search

salesforce-ux / design-system

Salesforce Lightning Design System
https://www.lightningdesignsystem.com
Other
3.57k stars 827 forks source link

Visualforce SVG tag issues #47

Closed paxtontech closed 8 years ago

paxtontech commented 9 years ago

Good evening,

I stumbled onto an issue that appears to be a bug within Salesforce that hasn't been solved for quite a few years. When referencing SVG tags in Visualforce, the renderer seems to trip up when encountering XML namespace attributes. For example, if I reference the SVG component as suggested in the document, the "slds-mediabody" tag is rewritten to be inside the "slds-mediafigure" tag even though it is declared to be a sibling in the template.

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- Without custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, 'assets/icons/standard-sprite/svg/symbols.svg#opportunity')}" />
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

My solution thus far has been to create a custom component for the SVG tag, which appears to ensure that the template gets written correctly:

Component:

<apex:component >
    <apex:attribute name="styleClass" type="String" description="Class for svg tag" />
    <apex:attribute name="path" type="String" description="Path for svg tag" />
    <svg aria-hidden="true" class="{!styleClass}">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, path)}" />
    </svg>
</apex:component>

Page:

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- With custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <c:svg styleClass="slds-icon slds-icon--large slds-icon-standard-opportunity" path="assets/icons/standard-sprite/svg/symbols.svg#opportunity" />
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>
stefsullrew commented 9 years ago

Hi @paxtontech - Have you filed a bug with the VF team? These are issues that we should get fixed!

stefsullrew commented 9 years ago

I've filed an investigation for you with the VF team. I'll let you know what happens.

stefsullrew commented 9 years ago

They closed my investigation by saying that it's already a known issue with a bug filed. When you put the xmlns attribute in the middle of the page, it causes that DOM bug. I'll try to follow up on that bug.

AndyBean commented 9 years ago

As long as you strip out the xmlns attribute, things work fine. It is an obscure, known, and annoying issue.

stefsullrew commented 9 years ago

Hi @paxtontech - @AndyBean is correct. We had originally found that VF needed the xmlns attribute, and were putting it on the <use> element as you are. Then we found that by putting it on the <html> element, we could leave it off the individual svg elements.

So, IF you have placed it on the <html> tag, you should not need the attribute on the svg (or the component you built to use an <svg>). Can you see if that fixes your issue?

paxtontech commented 9 years ago

My only issue with this is when I want to keep the normal Salesforce headers. Having the html tag declared twice, seems...messy. Thoughts?

On Tue, Oct 20, 2015 at 4:02 PM, Stephanie (Sullivan) Rewis < notifications@github.com> wrote:

Hi @paxtontech https://github.com/paxtontech - @AndyBean https://github.com/AndyBean is correct. We had originally found that VF needed the xmlns attribut, and were putting it on the element as you are. Then we found that by putting it on the element of the sprite, we could leave it off the individual svg elements.

So, IF you have placed it on the element of the sprite, you should not need the attribute on the svg (or the component you built to use an

). Can you see if that fixes your issue? — Reply to this email directly or view it on GitHub https://github.com/salesforce-ux/design-system/issues/47#issuecomment-149726426 .
paxtontech commented 9 years ago

I'm afraid I don't understand entirely. Which page are you referring to as the sprited SVG page?

My current code is as follows:

<apex:page >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:form styleClass="slds">
        <!-- Without custom component for SVG -->
        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#opportunity')}" />
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

If I remove the xmlns, I get the following error:

The prefix "xlink" for attribute "xlink:href" associated with an element type "use" is not bound.

Where is the xmlns supposed to be added if not on the <use> tag?

stefsullrew commented 9 years ago

OK, apologies. I mispoke. The xmlns attribute should simply be placed on the regular HTML element of your VF page. You can enable the headers or sidebars as well. Please see this portion of the Trailhead module: https://developer.salesforce.com/trailhead/lightning_design_system/lightning-design-system2

That should straighten things out. Please let us know.

paxtontech commented 9 years ago

Okay, so this will generate two <html> tags as I previously had stated, which I still think is a bit messy. I think for now my best solution is to just use a component to generate the icons as that seems to not be affected by this particular bug. I do wish Salesforce would fix the bug though, as it's been around for a number of years, sigh. Thanks all!

stefsullrew commented 9 years ago

I am no VF expert, but I'm fairly certain this only amends the HTML tag for your page. It does not add a second. This is how you control things that are added to it. Can you confirm this adds two HTML tags after it is compiled?

paxtontech commented 9 years ago

Here you go! It does unfortunately create two <html> tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class=""><head><title>Salesforce - Developer Edition</title><script src="/static/111213/js/perf/stub.js" type="text/javascript"></script><script src="/jslibrary/1442862172000/ui-sfdc-javascript/SfdcCore.js" type="text/javascript"></script><script src="/static/111213/js/picklist.js" type="text/javascript"></script><script src="/jslibrary/1444699760000/sfdc/VFState.js" type="text/javascript"></script><script src="/jslibrary/1444699760000/sfdc/main.js" type="text/javascript"></script><script src="/jslibrary/jslabels/1444939652000/en_US.js" type="text/javascript"></script><link class="user" href="/sCSS/35.0/sprites/1443723874000/Theme3/default/gc/zen-componentsCompatible.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/35.0/sprites/1443723874000/Theme3/default/gc/elements.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/35.0/sprites/1443723874000/Theme3/default/gc/common.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/35.0/sprites/1443814728000/Theme3/gc/dStandard.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/35.0/sprites/1445037541000/Theme3/00D37000000PY2m/00537000000gpul/gc/dCustom0.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/35.0/sprites/1443723874000/Theme3/default/gc/extended.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/35.0/sprites/1443723874000/Theme3/default/gc/setup.css" rel="stylesheet" type="text/css" /><link class="user" href="/resource/1445392258000/metasync__SLDS/assets/styles/salesforce-lightning-design-system-vf.css" rel="stylesheet" type="text/css" /><script>window.sfdcPage = new GenericSfdcPage();
UserContext.initialize({"ampm":["AM","PM"],"isAccessibleMode":false,"uiSkin":"Theme3","salesforceURL":"https://na31.salesforce.com","dateFormat":"M/d/yyyy","isS1Desktop":false,"language":"en_US","locale":"en_US","userName":"travis.paxton@gmail.com","userId":"00537000000gpul","isCurrentlySysAdminSU":false,"renderMode":"RETRO","startOfWeek":"1","dateTimeFormat":"M/d/yyyy h:mm a","orgPreferences":[{"index":257,"name":"TabOrganizer","value":true},{"index":113,"name":"GroupTasks","value":true}],"siteUrlPrefix":"","isDefaultNetwork":true,"labelLastModified":"1444939652000","today":"10/20/2015 10:11 PM","timeFormat":"h:mm a","userPreferences":[{"index":112,"name":"HideInlineEditSplash","value":false},{"index":114,"name":"OverrideTaskSendNotification","value":false},{"index":115,"name":"DefaultTaskSendNotification","value":false},{"index":119,"name":"HideUserLayoutStdFieldInfo","value":false},{"index":116,"name":"HideRPPWarning","value":false},{"index":87,"name":"HideInlineSchedulingSplash","value":false},{"index":88,"name":"HideCRUCNotification","value":false},{"index":89,"name":"HideNewPLESplash","value":false},{"index":90,"name":"HideNewPLEWarnIE6","value":false},{"index":122,"name":"HideOverrideSharingMessage","value":false},{"index":91,"name":"HideProfileILEWarn","value":false},{"index":93,"name":"HideProfileElvVideo","value":false},{"index":97,"name":"ShowPicklistEditSplash","value":false},{"index":92,"name":"HideDataCategorySplash","value":false},{"index":128,"name":"ShowDealView","value":false},{"index":129,"name":"HideDealViewGuidedTour","value":false},{"index":132,"name":"HideKnowledgeFirstTimeSetupMsg","value":false},{"index":104,"name":"DefaultOffEntityPermsMsg","value":false},{"index":135,"name":"HideNewCsnSplash","value":false},{"index":101,"name":"HideBrowserWarning","value":false},{"index":139,"name":"HideDashboardBuilderGuidedTour","value":false},{"index":140,"name":"HideSchedulingGuidedTour","value":false},{"index":180,"name":"HideReportBuilderGuidedTour","value":true},{"index":183,"name":"HideAssociationQueueCallout","value":false},{"index":194,"name":"HideQTEBanner","value":false},{"index":193,"name":"HideChatterOnboardingSplash","value":false},{"index":195,"name":"HideSecondChatterOnboardingSplash","value":false},{"index":270,"name":"HideIDEGuidedTour","value":true},{"index":282,"name":"HideQueryToolGuidedTour","value":true},{"index":196,"name":"HideCSIGuidedTour","value":true},{"index":271,"name":"HideFewmetGuidedTour","value":false},{"index":272,"name":"HideEditorGuidedTour","value":false},{"index":205,"name":"HideApexTestGuidedTour","value":false},{"index":206,"name":"HideSetupProfileHeaderTour","value":true},{"index":207,"name":"HideSetupProfileObjectsAndTabsTour","value":false},{"index":213,"name":"DefaultOffArticleTypeEntityPermMsg","value":false},{"index":214,"name":"HideSelfInfluenceGetStarted","value":false},{"index":215,"name":"HideOtherInfluenceGetStarted","value":false},{"index":216,"name":"HideFeedToggleGuidedTour","value":false},{"index":268,"name":"ShowChatterTab178GuidedTour","value":false},{"index":275,"name":"HidePeopleTabDeprecationMsg","value":false},{"index":276,"name":"HideGroupTabDeprecationMsg","value":false},{"index":224,"name":"HideUnifiedSearchGuidedTour","value":false},{"index":226,"name":"ShowDevContextMenu","value":true},{"index":227,"name":"HideWhatRecommenderForActivityQueues","value":false},{"index":228,"name":"HideLiveAgentFirstTimeSetupMsg","value":false},{"index":232,"name":"HideGroupAllowsGuestsMsgOnMemberWidget","value":false},{"index":233,"name":"HideGroupAllowsGuestsMsg","value":false},{"index":234,"name":"HideWhatAreGuestsMsg","value":false},{"index":235,"name":"HideNowAllowGuestsMsg","value":false},{"index":236,"name":"HideSocialAccountsAndContactsGuidedTour","value":false},{"index":237,"name":"HideAnalyticsHomeGuidedTour","value":true},{"index":238,"name":"ShowQuickCreateGuidedTour","value":false},{"index":245,"name":"HideFilePageGuidedTour","value":false},{"index":250,"name":"HideForecastingGuidedTour","value":false},{"index":251,"name":"HideBucketFieldGuide","value":false},{"index":263,"name":"HideSmartSearchCallOut","value":false},{"index":265,"name":"HideSocialProfilesKloutSplashScreen","value":false},{"index":273,"name":"ShowForecastingQuotaAttainment","value":false},{"index":280,"name":"HideForecastingQuotaColumn","value":false},{"index":301,"name":"HideManyWhoGuidedTour","value":false},{"index":284,"name":"HideExternalSharingModelGuidedTour","value":false},{"index":298,"name":"HideFileSyncBannerMsg","value":false},{"index":299,"name":"HideTestConsoleGuidedTour","value":false},{"index":302,"name":"HideManyWhoInlineEditTip","value":false},{"index":303,"name":"HideSetupV2WelcomeMessage","value":false},{"index":312,"name":"ForecastingShowQuantity","value":false},{"index":313,"name":"HideDataImporterIntroMsg","value":false},{"index":314,"name":"HideEnvironmentHubLightbox","value":false},{"index":316,"name":"HideSetupV2GuidedTour","value":true},{"index":317,"name":"HideFileSyncMobileDownloadDialog","value":false},{"index":322,"name":"HideEnhancedProfileHelpBubble","value":false},{"index":328,"name":"ForecastingHideZeroRows","value":false},{"index":330,"name":"HideEmbeddedComponentsFeatureCallout","value":true},{"index":341,"name":"HideDedupeMatchResultCallout","value":false},{"index":340,"name":"HideS1BrowserUI","value":false},{"index":346,"name":"HideS1Banner","value":true},{"index":358,"name":"HideEmailVerificationAlert","value":false},{"index":354,"name":"HideLearningPathModal","value":false},{"index":359,"name":"HideAtMentionsHelpBubble","value":false},{"index":368,"name":"LightningExperiencePreferred","value":false}],"networkId":""});
</script><script type="text/javascript">
var MOTIF_KEY='Home';</script><link rel="shortcut icon" href="https://na31.salesforce.com/favicon.ico" />
<script src="/jslibrary/1444699760000/sfdc/Security.js"></script><script>ClientHash.prototype.needsClientHash('sid_Client','7000000gpul7000000PY2m','67.169.63.239','/servlet/servlet.ClientHashValidator?ResponseRequestedURL=%2Fapex%2Fmetasync__test');</script></head><body onUnload="if(this.bodyOnUnload)bodyOnUnload();" onBeforeUnload="if(this.bodyOnBeforeUnload){var s=bodyOnBeforeUnload();if(s)return s;}" onLoad="if(this.bodyOnLoad)bodyOnLoad();" class="hasMotif homeTab  sfdcBody brandQuaternaryBgr" onFocus="if(this.bodyOnFocus)bodyOnFocus();">
<!-- Main Body Starts Here -->
<form  id="sessiontimeout" method="post" name="sessiontimeout" onsubmit="if (window.ffInAlert) { return false; }" ><input type="hidden" name="continueButton" id="continueButton" value="Continue Working" /><input type="hidden" name="doNotTimeoutLocation" id="doNotTimeoutLocation" value="/page/timeoutrefresh.jsp" /><input type="hidden" name="doTimeoutLocation" id="doTimeoutLocation" value="https://login.salesforce.com/?ec=301&amp;startURL=https%3A%2F%2Fmetasync.na31.visual.force.com%2Fpage%2Ftimeoutrefresh.jsp&amp;stbdtimeout=1" /><input type="hidden" name="logoutButton" id="logoutButton" value="Logout" /><input type="hidden" name="timeoutText" id="timeoutText" value="For security reasons, your salesforce.com session is about to time out.<br><br>What would you like to do?" /></form><script>var secondsLeftValue=7160,secondsPopupValue=7130,lastPageActivityTime=(new Date).getTime(),forceLogout=true;function startSessionTimer(){schedulePopup(7160,7130)}function schedulePopup(a,b){null!=timeoutUniqueId&&clearTimeout(timeoutUniqueId);forceLogout&&null!=redirectUniqueId&&clearTimeout(redirectUniqueId);if (forceLogout) {redirectUniqueId=setTimeout(logout,1E3*a);}timeoutUniqueId=setTimeout(alertTimeout,1E3*b)}function logout(){(forceLogout && "function"==typeof getRTimeout)?getRTimeout():doLogout()} function doLogout(){window.location="https://na31.salesforce.com/secur/logout.jsp"}var alertWindow=null,parentWindow=null,timeoutUniqueId=null;redirectUniqueId=null;function updateSessionTimeouts(a,b){"undefined"!=typeof a&&(secondsLeftValue=a);"undefined"!=typeof b&&(secondsPopupValue=b);lastPageActivityTime=(new Date).getTime();schedulePopup(secondsLeftValue,secondsPopupValue);if(window.Sfdc&&Sfdc.require&&"undefined"!=typeof SFDCSessionVars){Sfdc.require("SfdcApp.SfdcSession",function(){SfdcApp.SfdcSession.updateExpires({oid:SFDCSessionVars.oid,uid:UserContext.userId,expire:lastPageActivityTime+(secondsLeftValue*1000)})});}}function updateRedirectTimeouts(a){"undefined"!=typeof a&&(secondsLeftValue=a);null!=redirectUniqueId&&clearTimeout(redirectUniqueId);redirectUniqueId=setTimeout(logout,1E3*(secondsLeftValue));}function alertTimeout(){"function"==typeof getSTimeout?getSTimeout():doAlertTimeout()}function doAlertTimeout(){timeoutUniqueId=null;alertWindow=window.open("/page/timeoutwarn.jsp","_sTometasync_na31_visual_force_com","width=360,height=280,location=no,dependent=no,resizable=yes,toolbar=no,status=no,directories=no,menubar=no,scrollbars=yes",!1);parentWindow=window;!alertWindow&&forceLogout&&setTimeout(parentWindow.doLogout(),25E3);document.body.onfocus=alertFocus}function checkSessionTimeout(){var a=(new Date).getTime();5>=secondsLeftValue-(a-lastPageActivityTime)/1E3?(a=window.location.pathname+window.location.hash,window.location.search&&1<window.location.search.length&&(a+=window.location.search),a="/?ec=302&startURL="+encodeURIComponent(a),top.location=a):(lastPageActivityTime=a,startSessionTimer())}function alertFocus(){alertWindow&&(alertWindow.closed?(alertWindow=null,document.body.onfocus=closePopup):alertWindow.focus())}</script><a href="#skiplink" class="navSkipLink zen-skipLink zen-assistiveText">Skip to main content</a><div id="contentWrapper"><div class="bPageHeader" id="AppBodyHeader"><table  class="phHeader brandZeronaryBgr phHeaderCustomLogo" border="0" cellpadding="0" cellspacing="0" id="phHeader"><tr><td class="left"><img src="/img/seasonLogos/2016_winter.png" alt="Salesforce.com" width="175" height="65" id="phHeaderLogoImage" title="Salesforce.com" /><img src="/s.gif" alt="" width="1" height="1" class="spacer" title="" /></td><td class="searchCell"><form  action="/_ui/search/ui/UnifiedSearchResults" id="phSearchForm" method="GET" name="sbsearch" onsubmit="if (window.ffInAlert) { return false; }" ><input type="hidden" name="searchType" id="searchType" value="2" /><input type="hidden" name="sen" id="sen0" value="001" /><input type="hidden" name="sen" id="sen1" value="003" /><input type="hidden" name="sen" id="sen2" value="a01" /><input type="hidden" name="sen" id="sen3" value="005" /><input type="hidden" name="sen" id="sen4" value="006" /><div class="headerSearchContainer" id="phSearchContainer"><div class="headerSearchLeftRoundedCorner"><div class="searchBoxClearContainer"><input  autocomplete="off" id="phSearchInput" maxlength="100" name="str" placeholder="Search..." size="20" title="Search..." type="text" value="" /><a class="headerSearchClearButton" href="javascript: void(0);" id="phSearchClearButton" name="phSearchClearButton" style="visibility:hidden" title="Clear search terms"></a></div><div class="headerSearchRightRoundedCorner" id="searchButtonContainer"><input value="Search"  id="phSearchButton" type="button" /></div></div></div></form></td><td class="right"><div class="multiforce"><div class="messages"></div><div class="navLinks"><div class="linkElements"><div class="menuButton menuButtonRounded" id="userNav" title="User menu for Travis Paxton"><div class="menuButtonButton" id="userNavButton"><span  class="menuButtonLabel" id="userNavLabel" tabindex="0">Travis Paxton</span><div class="userNav-buttonArrow mbrButtonArrow" id="userNav-arrow"></div><div class="userNavButton-btm mbrButton-btm mbrButton-rc"></div></div><div class="menuButtonMenu" id="userNavMenu"><div class="userNavMenu-tr mbrMenu-tr mbrMenu-rc"></div><div class="userNavMenu-tl mbrMenu-tl mbrMenu-rc"></div><div class="mbrMenuItems" id="userNav-menuItems"><a href="https://na31.salesforce.com/_ui/core/userprofile/UserProfilePage" class="menuButtonMenuLink firstMenuItem" title="My Profile">My Profile</a><a href="https://na31.salesforce.com/ui/setup/Setup?setupid=PersonalSetup" class="menuButtonMenuLink" title="My Settings">My Settings</a><a href="javascript:openPopupFocus%28%27https%3A%2F%2Fna31.salesforce.com%2F_ui%2Fcommon%2Fapex%2Fdebug%2FApexCSIPage%27%2C%20%27DeveloperConsole%27%2C%201000%2C%20800%2C%20%27width%3D1000%2Cheight%3D800%2Cresizable%3Dyes%2Ctoolbar%3Dno%2Cstatus%3Dno%2Cscrollbars%3Dyes%2Cmenubar%3Dno%2Cdirectories%3Dyes%2Clocation%3Dno%2Cdependant%3Dno%27%2C%20false%2C%20false%29%3B" class="debugLogLink menuButtonMenuLink" title="Developer Console (New Window)">Developer Console</a><a href="https://na31.salesforce.com/secur/logout.jsp" class="menuButtonMenuLink" title="Logout">Logout</a></div><div class="userNavMenu-br mbrMenu-br mbrMenu-rc"></div><div class="userNavMenu-bc mbrMenu-bc"></div><div class="userNavMenu-bl mbrMenu-bl mbrMenu-rc"></div></div></div><script>new MenuButtonRounded('userNav', false,16);</script><a href="https://na31.salesforce.com/setup/forcecomHomepage.apexp?setupid=ForceCom&amp;retURL=%2Fapex%2Fmetasync__test" id="setupLink" title="Setup">Setup</a><a href="javascript:openPopupFocusEscapePounds(%27https://login.salesforce.com/services/auth/sso/00D30000000XsfGEAS/HTAuthProvider?startURL=%252Fapex%252Fhtdoor%253Flanguage%253Den_US%2526release%253D198.8.8%2526instance%253DNA31&amp;site=https%3A%2F%2Fhelp.salesforce.com%27, %27Help%27, 1024, 768, %27width=1024,height=768,resizable=yes,toolbar=yes,status=yes,scrollbars=yes,menubar=yes,directories=no,location=yes,dependant=no%27, false, false);" class="brandZeronaryFgr" title="Help (New Window)">Help</a></div></div><div id="toolbar">
<!-- TabSet drop down -->
<div class="menuButton menuButtonRounded appSwitcher" id="tsid" title="Force.com App Menu"><div class="menuButtonButton" id="tsidButton"><span  class="menuButtonLabel" id="tsidLabel" tabindex="0">Sales</span><div class="tsid-buttonArrow mbrButtonArrow" id="tsid-arrow"></div><div class="tsidButton-btm mbrButton-btm mbrButton-rc"></div></div><div class="menuButtonMenu" id="tsidMenu"><div class="tsidMenu-tr mbrMenu-tr mbrMenu-rc"></div><div class="tsidMenu-tl mbrMenu-tl mbrMenu-rc"></div><div class="mbrMenuItems" id="tsid-menuItems"><a href="https://na31.salesforce.com/home/home.jsp?tsid=02u37000000QeDI" class="menuButtonMenuLink firstMenuItem">Call Center</a><a href="https://na31.salesforce.com/home/home.jsp?tsid=02u37000000QeDJ" class="menuButtonMenuLink">Marketing</a><a href="https://na31.salesforce.com/app/mgmt/applauncher/appLauncher.apexp?tsid=02u37000000QeDO" class="menuButtonMenuLink">App Launcher</a><a href="https://na31.salesforce.com/home/home.jsp?tsid=02u37000000QeDP" class="menuButtonMenuLink">Community</a><a href="https://na31.salesforce.com/home/home.jsp?tsid=02u37000000QeDQ" class="menuButtonMenuLink">Site.com</a><a href="https://na31.salesforce.com/home/home.jsp?tsid=02u37000000QeDR" class="menuButtonMenuLink">Salesforce Chatter</a><a href="https://na31.salesforce.com/home/home.jsp?tsid=02u37000000QeDW" class="menuButtonMenuLink">Content</a><hr class="menuSeparator" /><a href="https://www.salesforce.com/appexchange" class="menuButtonMenuLink" target="_blank">AppExchange</a><a href="http://developer.force.com" class="menuButtonMenuLink" target="_blank">Developer Community</a><a href="https://success.salesforce.com" class="menuButtonMenuLink" target="_blank">Success Community</a></div><div class="tsidMenu-br mbrMenu-br mbrMenu-rc"></div><div class="tsidMenu-bc mbrMenu-bc"></div><div class="tsidMenu-bl mbrMenu-bl mbrMenu-rc"></div></div></div><script>new MenuButtonRounded('tsid', false,16);</script></div></div></td></tr>
</table><div class="zen"><div class="brdPalette zen-headerBottom zen-hasTabOrganizer" id="tabContainer" role="navigation"><h1 class="zen-assistiveText">Tab Navigation</h1><nav><ul class="zen-inlineList zen-tabMenu" id="tabBar"><li class="zen-active primaryPalette brandPrimaryBgr zen-firstItem primaryPalette" id="home_Tab"><a href="https://na31.salesforce.com/home/home.jsp" class="brandPrimaryFgr" title="Home Tab - Selected">Home</a><span class="zen-assistiveText">(Currently Selected)</span></li><li id="Chatter_Tab"><a href="https://na31.salesforce.com/_ui/core/chatter/ui/ChatterPage" title="Chatter Tab">Chatter</a></li><li id="Campaign_Tab"><a href="https://na31.salesforce.com/701/o" title="Campaigns Tab">Campaigns</a></li><li id="Lead_Tab"><a href="https://na31.salesforce.com/00Q/o" title="Leads Tab">Leads</a></li><li id="Account_Tab"><a href="https://na31.salesforce.com/001/o" title="Accounts Tab">Accounts</a></li><li id="Contact_Tab"><a href="https://na31.salesforce.com/003/o" title="Contacts Tab">Contacts</a></li><li id="Opportunity_Tab"><a href="https://na31.salesforce.com/006/o" title="Opportunities Tab">Opportunities</a></li><li id="Forecasting3_Tab"><a href="https://na31.salesforce.com/_ui/sales/forecasting/ui/ForecastingTabPage" title="Forecasts Tab">Forecasts</a></li><li id="Contract_Tab"><a href="https://na31.salesforce.com/800/o" title="Contracts Tab">Contracts</a></li><li id="Order_Tab"><a href="https://na31.salesforce.com/801/o" title="Orders Tab">Orders</a></li><li id="Case_Tab"><a href="https://na31.salesforce.com/500/o" title="Cases Tab">Cases</a></li><li id="Solution_Tab"><a href="https://na31.salesforce.com/501/o" title="Solutions Tab">Solutions</a></li><li id="Product2_Tab"><a href="https://na31.salesforce.com/01t/o" title="Products Tab">Products</a></li><li id="report_Tab"><a href="https://na31.salesforce.com/00O/o" title="Reports Tab">Reports</a></li><li id="Dashboard_Tab"><a href="https://na31.salesforce.com/01Z/o" title="Dashboards Tab">Dashboards</a></li><li class="wt-Compensation" id="01r37000000DtSX_Tab"><a href="https://na31.salesforce.com/a01/o" title="Compensations Tab">Compensations</a></li><li id="AllTab_Tab"><a href="https://na31.salesforce.com/home/showAllTabs.jsp">&nbsp;<img src="/s.gif" alt="All Tabs"  class="allTabsArrow" title="All Tabs"/>&nbsp;</a></li><li class="zen-moreTabs zen-notNeeded zen-lastItem" id="MoreTabs_Tab"><a href="javascript:void(0);" class="zen-assistiveLink" id="zen-moreTabsAssistiveLink" title="More Tabs Menu (Closed)"><b></b></a><ul id="MoreTabs_List"></ul>
</li></ul>
</nav></div></div></div><div class="bodyDiv brdPalette brandPrimaryBrd"><table class="outer" width="100%" id="bodyTable" border="0" cellspacing="0" cellpadding="0">
<!-- Start page content table -->
<tr><td id="sidebarCell" class=" sidebarCell"><div class="sidebar fixed" id="sidebarDiv"><div class="createNewModule sidebarModule"><div class="sidebarModuleBody sidebarModuleBodyNoHeader"><div class="menuButton" id="createNew"><div class="menuButtonButton" id="createNewButton"><span  class="menuButtonLabel" id="createNewLabel" tabindex="0">Create New...</span></div><div class="menuButtonMenu" id="createNewMenu"><a href="https://na31.salesforce.com/00U/e?retURL=%2Fapex%2Fmetasync__test" class="menuButtonMenuLink firstMenuItem eventMru"><img src="/s.gif" alt="Event"  class="mruIcon" title="Event"/>Event</a><a href="https://na31.salesforce.com/00T/e?retURL=%2Fapex%2Fmetasync__test" class="taskMru menuButtonMenuLink"><img src="/s.gif" alt="Task"  class="mruIcon" title="Task"/>Task</a><a href="https://na31.salesforce.com/701/e?retURL=%2Fapex%2Fmetasync__test" class="menuButtonMenuLink campaignMru"><img src="/s.gif" alt="Campaign"  class="mruIcon" title="Campaign"/>Campaign</a><a href="https://na31.salesforce.com/00Q/e?retURL=%2Fapex%2Fmetasync__test" class="leadMru menuButtonMenuLink"><img src="/s.gif" alt="Lead"  class="mruIcon" title="Lead"/>Lead</a><a href="https://na31.salesforce.com/001/e?retURL=%2Fapex%2Fmetasync__test" class="accountMru menuButtonMenuLink"><img src="/s.gif" alt="Account"  class="mruIcon" title="Account"/>Account</a><a href="https://na31.salesforce.com/003/e?retURL=%2Fapex%2Fmetasync__test" class="contactMru menuButtonMenuLink"><img src="/s.gif" alt="Contact"  class="mruIcon" title="Contact"/>Contact</a><a href="https://na31.salesforce.com/006/e?retURL=%2Fapex%2Fmetasync__test" class="opportunityMru menuButtonMenuLink"><img src="/s.gif" alt="Opportunity"  class="mruIcon" title="Opportunity"/>Opportunity</a><a href="https://na31.salesforce.com/800/e?retURL=%2Fapex%2Fmetasync__test" class="contractMru menuButtonMenuLink"><img src="/s.gif" alt="Contract"  class="mruIcon" title="Contract"/>Contract</a><a href="https://na31.salesforce.com/500/e?retURL=%2Fapex%2Fmetasync__test" class="caseMru menuButtonMenuLink"><img src="/s.gif" alt="Case"  class="mruIcon" title="Case"/>Case</a><a href="https://na31.salesforce.com/501/e?retURL=%2Fapex%2Fmetasync__test" class="solutionMru menuButtonMenuLink"><img src="/s.gif" alt="Solution"  class="mruIcon" title="Solution"/>Solution</a><a href="https://na31.salesforce.com/01t/e?retURL=%2Fapex%2Fmetasync__test" class="productMru menuButtonMenuLink"><img src="/s.gif" alt="product"  class="mruIcon" title="product"/>Product</a><a href="https://na31.salesforce.com/reportbuilder/reportType.apexp" class="reportMru menuButtonMenuLink"><img src="/s.gif" alt="Report"  class="mruIcon" title="Report"/>Report</a><a href="https://na31.salesforce.com/a01/e?retURL=%2Fapex%2Fmetasync__test" class="menuButtonMenuLink Custom90Mru"><img src="/s.gif" alt="Compensation"  class="mruIcon" title="Compensation"/>Compensation</a></div></div><script>new MenuButton('createNew', false);</script></div></div><div class="recentItemModule sidebarModule"><div class="sidebarModuleHeader brandPrimaryBgr"><h2 class="brandPrimaryFgr">Recent Items</h2></div><div class="sidebarModuleBody"><div class="hidden" data-urlquerystr="retURL=%2Fapex%2Fmetasync__test&amp;isAjaxRequest=1&amp;renderMode=RETRO&amp;nocache=1445404284468&amp;hl=00637000006gPwu%3A%2C00637000006gFXA%3A%2C" id="urlQueryStr"></div><div class="mruList individualPalette" data-hovdata="dir=chatterHover-right"><div class="opportunityBlock" data-hovid="00637000006gFXA"><div class="mruItem" id="mru00637000006gFXA"><a href="https://na31.salesforce.com/00637000006gFXA" class="opportunityMru" accesskey="1" tabindex="0" title="[Alt+1]"><img src="/s.gif" alt="Opportunity: test"  class="mruIcon" title="Opportunity: test"/><span  class="mruText">test</span></a></div></div><div class="opportunityBlock" data-hovid="00637000006gPwu"><div class="mruItem" id="mru00637000006gPwu"><a href="https://na31.salesforce.com/00637000006gPwu" class="opportunityMru" accesskey="2" tabindex="0" title="[Alt+2]"><img src="/s.gif" alt="Opportunity: tst"  class="mruIcon" title="Opportunity: tst"/><span  class="mruText">tst</span></a></div></div></div></div></div><div class="recycleBinModule sidebarModule"><div class="sidebarModuleBody sidebarModuleBodyNoHeader"><a href="https://na31.salesforce.com/search/UndeletePage"><img src="/s.gif" alt="Recycle Bin"  class="recycleIcon" title="Recycle Bin"/><span  class="recycleText">Recycle Bin</span></a></div></div></div></td>
<td class="oRight" id="bodyCell">
<!-- Start page content -->
<a name="skiplink"><img src="/s.gif" height='1' width='1' alt="Content Starts Here" class="skiplink skipLinkTargetInner zen-skipLinkTarget" title="Content Starts Here"/></a><span id="j_id0"></span><html xmlns:xlink="http://www.w3.org/1999/xlink">
<form id="j_id0:j_id3" name="j_id0:j_id3" method="post" action="https://metasync.na31.visual.force.com/apex/test" class="slds" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id0:j_id3" value="j_id0:j_id3" />

        <div class="slds-page-header" role="banner">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-opportunity">
                                <use xlink:href="/resource/1445392258000/metasync__SLDS/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Opportunity</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Test Opportunity">Test Opportunity</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><div id="j_id0:j_id3:j_id6"></div>
</form><span id="ajax-view-state-page-container" style="display: none"><span id="ajax-view-state" style="display: none"><input type="hidden"  id="com.salesforce.visualforce.ViewState" name="com.salesforce.visualforce.ViewState" value="redacted" /><input type="hidden"  id="com.salesforce.visualforce.ViewStateVersion" name="com.salesforce.visualforce.ViewStateVersion" value="201510201904330640" /><input type="hidden"  id="com.salesforce.visualforce.ViewStateMAC" name="com.salesforce.visualforce.ViewStateMAC" value="AKjY01vhr2sk4vYkr16gMupaufll" /><input type="hidden"  id="com.salesforce.visualforce.ViewStateCSRF" name="com.salesforce.visualforce.ViewStateCSRF" value="VmpFPSxNakF4TlMweE1DMHlORlF3TlRveE1Ub3lOQzQwTnpGYSwtQV81b0gxQjNHYU1YVWNqTTU3Qk5PLFlXVmhZVGRq" /></span></span>
    </html><script type="text/javascript">Sfdc.onReady(function(){
    SfdcApp && SfdcApp.Visualforce && SfdcApp.Visualforce.VSManager && SfdcApp.Visualforce.VSManager.vfPrepareForms(["j_id0:j_id3"]);

});</script>

<!-- Body events -->
<script type="text/javascript">function bodyOnLoad(){setFocusOnLoad();if (typeof(startSessionTimer)!='undefined') {startSessionTimer(); };if (typeof(ActivityReminder)!='undefined') {ActivityReminder.initialize([], false, false, 'redacted');};if ((window.sfdcPage) && (sfdcPage.executeOnloadQueue)){sfdcPage.executeOnloadQueue();};SearchClickLoggingUtil.setClickLoggingServletPath("/_ui/search/logging/SearchClickLoggingServlet");new UnifiedSearchAutoCompleteElement("phSearchInput","/_ui/common/search/client/ui/UnifiedSearchAutoCompleteServlet",1,{},true,null,"phSearchForm",["div","searchOwner","asPhrase","sen"],{},true,3,100);new UnifiedSearchButton("searchButtonContainer", "phSearchButton", "headerSearchRightRoundedCornerMouseOver", "phSearchForm");SfdcApp.MruHovers.global_data.url='retURL=%2Fapex%2Fmetasync__test&isAjaxRequest=1&renderMode=RETRO&nocache=1445404284468';if (document.getElementById('sidebarDiv')){ Sidebar.prototype.theSidebar = new Sidebar(document.getElementById('sidebarDiv'), false); };if(window.PreferenceBits){window.PreferenceBits.prototype.csrfToken="VmpFPSxNakF4TlMweE1DMHlORlF3TlRveE1Ub3lOQzQwTmpsYSw4UUlvcXV2X1R6QnBkZnQ2M0lfV3BHLE1HVXdaalF3";};}function bodyOnBeforeUnload(){if ((window.sfdcPage) && (sfdcPage.executeOnBeforeUnloadQueue)){sfdcPage.executeOnBeforeUnloadQueue();};}function bodyOnFocus(){closePopupOnBodyFocus();}function bodyOnUnload(){}</script>
<!-- End page content -->
</td>
</tr>
</table>
</div><div class="bPageFooter noTableFooter"><div><span  class="brandQuaternaryFgr">Copyright © 2000-2015 salesforce.com, inc. All rights reserved.</span>&nbsp;|&nbsp;<a href="http://www.salesforce.com/company/privacy.jsp" class="brandQuaternaryFgr" target="_blank" title="Privacy Statement (New Window)">Privacy Statement</a>&nbsp;|&nbsp;<a href="http://www.salesforce.com/company/security.jsp" class="brandQuaternaryFgr" target="_blank" title="Security Statement (New Window)">Security Statement</a>&nbsp;|&nbsp;<a href="http://www.salesforce.com/company/msa.jsp" class="brandQuaternaryFgr" target="_blank" title="Terms of Use (New Window)">Terms of Use</a>&nbsp;|&nbsp;<a href="javascript:openPopupFocusEscapePounds(%27https://login.salesforce.com/services/auth/sso/00D30000000XsfGEAS/HTAuthProvider?startURL=%252Fapex%252Fhtdoor%253Floc%253Dhelp%2526target%253Daccessibility_overview.htm%2526section%253Daccessibility%2526language%253Den_US%2526release%253D198.8.8%2526instance%253DNA31&amp;site=https%3A%2F%2Fhelp.salesforce.com%27, %27Help%27, 1024, 768, %27width=1024,height=768,resizable=yes,toolbar=yes,status=yes,scrollbars=yes,menubar=yes,directories=no,location=yes,dependant=no%27, false, false);" class="brandQuaternaryFgr" title="508 Compliance (New Window)">508 Compliance</a></div></div><div></div></div><script>var SFDCSessionVars={"uid":"00537000000gpul","server":"https://login.salesforce.com/login/sessionserver190.html","act":"u","host":"login.salesforce.com","oid":"00D37000000PY2m","exp":1445411444000};</script><script>var SFDCMktUrl='https://login.salesforce.com/17181/logo180.png';</script><script>(function(){var s=document.createElement('SCRIPT');s.async=true;s.defer=true;s.src='/jslibrary/1444699760000/sfdc/SfdcSessionBase198.js';(document.body||document.getElementsByTagName('script')[0]).appendChild(s);})();</script><script>(function(){var s=document.createElement('SCRIPT');s.async=true;s.defer=true;s.src='/jslibrary/1444699760000/sfdc/MarketingSurveyResponse.js';(document.body||document.getElementsByTagName('script')[0]).appendChild(s);})();</script></body></html>
<!-- page generation time: 37ms -->
stefsullrew commented 9 years ago

I do not see two HTML tags, but I also don't see the xmlns attribute, so in all that code, I might be missing it. Did you do it JUST like the Trailhead module shows?

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<head>

You can, of course, use showHeader="true" and sidebar="true" if you like, but you should make sure to keep the applyHtmlTag="false" so that you don't get two.

paxtontech commented 9 years ago

Visualforce won't let you set showHeader to true and applyHtmlTag to false. It throws the following error: Error: Attribute 'showHeader' on component apex:page must be false when 'applyHtmlTag' is false

The Trailhead module only shows you how to use the components on a blank page without the header and sidebar. The ideal situation is to be able to use the components in Visualforce pages with the sidebar and header now so when we upgrade to the Lightning Experience in the future, it'll ease the transition.

stefsullrew commented 9 years ago

Hmmm... experimenting. Not good so far.

matt-ian-thomas commented 9 years ago

Is there any update on this? I ran into the same issue...it looks like you can either have showHeader = "true" OR be able to specify xmlns and xmlns:xlink on the html tag.

One thing I tried that I didn't see anywhere else:

in a script at the top of my page, I added the following code with showHeader="true" and the default applyHtmlTag="true" var html = document.getElementsByTagName("html")[0]; html.setAttribute("xmlns", "http://www.w3.org/2000/svg"); html.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");

The only problem I've encountered with the above is that sublime won't let me compile with a <use xlink:href=..... tag. I'm going to try dynamically adding the icons similarly to how I manipulated the html tag. I'll update here once I try that out.

kcallicoat commented 8 years ago

I found that I could work around this by adding the xmlns and xmlns:xlink attributes to any standard html tag that wasn't the svg. Visualforce tags don't seem to like the xlink attribute, even with the html- passthrough added. This appears to have the same effect as adding it to the html tag within the tag you add it to. This should resolve the issue with having to turn the headers off or being forced to have applyHTMLTag = false. The one key take away to this is that you seem to loose the ability to use any elements inside of the tag you apply the namespace to as rerender targets. They can be rerendered by choosing any target outside of the namespaced area. Rerendering the area does not cause any distortion of the markup.

rickschmoo commented 8 years ago

This bug has been logged internally with the Visualforce team so closing here.

e-bacho commented 8 years ago

Any updates on this?

ronplanken commented 8 years ago

Is there an SF issue we could follow to see if it is fixed on the VisualForce side?

kcallicoat commented 8 years ago

This was a bug within the visualforce page code generator. According to the upcoming Summer 16 release notes, Salesforce has resolved this issue (once the release goes live of course). On Jun 8, 2016 7:18 AM, "Ron Planken" notifications@github.com wrote:

Is there an SF issue we could follow to see if it is fixed on the VisualForce side?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/salesforce-ux/design-system/issues/47#issuecomment-224560278, or mute the thread https://github.com/notifications/unsubscribe/AD5f60nHBwsFLTarvz-CUlm_EGzBUEeEks5qJqUQgaJpZM4GNkOx .

paxtontech commented 8 years ago

I can verify that this is now working correctly on Summer '16. Thanks!

srmaind commented 8 years ago

This error can be avoided in the visualforce component by specifying 'xmlns' and 'xmlns:xlink' attributes to a wrapping div as shown below:

<apex:component >
  <div class="slds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <div class="slds-lookup" data-select="single" data-scope="single" data-typeahead="true">
      <div class="slds-form-element">
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
          <input type="text" id="lookup" class="slds-input" placeholder="Search" />
          <svg class="slds-input__icon">
            <use class="slds-input__icon"
              xlink:href="/resource/SLDS0101/assets/icons/utility-sprite/svg/symbols.svg#search" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</apex:component>
kaelig commented 8 years ago

Thank you for sharing this workaround, @srmaind!

avijitsf commented 7 years ago

if we add this xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to html attribute it also resolves the problem

itsmebasti commented 7 years ago

Not sure why everybody says this is fixed or why xmlns attributes in within the html tag fixes it. As soon as I render svg anywhere within the form, my commandButton does not re-render anything. So there is still something wrong with svgs in Visualforce! my page is on v. 39. ActionFunctions didn't work either. My page starts like this:

<apex:page controller="MyCtrl" standardStylesheets="false" sidebar="false" applyBodyTag="false" docType="html-5.0">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

@rickschmoo any updates on this?

EDIT: Encapsulating it in a component enabled re-rendering, but messed up the whole html after re-rendering.

ankushsomani09 commented 7 years ago

I am still facing this issue. Tried all above mentioned points.

ankushsomani09 commented 7 years ago

the panel which we do render, if put there layout=none, then it don't make svg invisible. So worked for me. ans

Came across one more solution. .

Below Code will not render the svg when renedering the outputPanel="timeSheetNav" and make invisible on page.

    <apex:outputPanel id="timeSheetNav"  layout="none">
    <apex:outputPanel styleClass="slds-m-vertical--medium" >
        <span class="slds-icon_container" onclick="showPrevWeek();" title="description of icon when needed">
            <svg class="slds-icon slds-icon--small slds-icon-text-default slds-p-top--x-small " aria-hidden="true">
                <use xlink:href="{!URLFOR($Asset.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#chevronleft')}"></use>
            </svg>
            <span class="slds-assistive-text">Left</span>
        </span>
    </apex:outputPanel >
</apex:outputPanel>

while below code will work after rendering the outputPanel="timeSheetNav" by action.

<apex:outputPanel id="timeSheetNav"  layout="none">
    <div class="slds-m-vertical--medium" >
        <span class="slds-icon_container" onclick="showPrevWeek();" title="description of icon when needed">
            <svg class="slds-icon slds-icon--small slds-icon-text-default slds-p-top--x-small " aria-hidden="true">
                <use xlink:href="{!URLFOR($Asset.SLDS,'assets/icons/utility-sprite/svg/symbols.svg#chevronleft')}"></use>
            </svg>
            <span class="slds-assistive-text">Left</span>
        </span>
    </div >
</apex:outputPanel>

So, If rendering apex section include svg tag, then be sure not to keep any type of apex tag under the rendering section tag, which has layout="block" , If you want to keep that tag, replace by html tag or use layout="none". Then it will surly resolve svg rendering problem.

ronplanken commented 7 years ago

Not sure if that fixes the rerendering and ActionScript not working anymore.

srmaind commented 7 years ago

specifying the "xmlns" and "xmlns:xlink" attributes works only if those are applied to an element that wraps the svg icon but does not contain any apex tags which are being rerendered

OmegaSheep commented 7 years ago

Still experiencing this problem, would love a fix.

BeckGHub commented 7 years ago

I had the same problem, but I fixed it with just adding ( xmlns:xlink="http://www.w3.org/1999/xlink") to the <use> tag.

<svg class="slds-section__title-action-icon slds-button__icon slds-button__icon--left" aria-hidden="true">
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
</svg>
jerome-d-russ commented 7 years ago

@BeckGHub adding the xmlns to the use tag worked for me as well! Thanks! ...any idea why that was needed?

BeckGHub commented 7 years ago

@jerome-d-russ I have no idea why.

ankushsomani09 commented 7 years ago

@OmegaSheep : Please post your code, with parent and grandparent element.

OmegaSheep commented 7 years ago

@ankushsomani09 That entire section was redesigned and recoded so can't really help with that now.

FergusRedican commented 6 years ago

Hi All,

I think the needs to be a knowledge article created for this as so many people are struggling with hacks to try to get this to work.

Here is what I have found:

For example

. gives the following error on saving the VF page "Error Traced[line: 492] The prefix "xlink" for attribute "xlink:href" associated with an element type "use" is not bound. " However adding xmlns:xlink="http://www.w3.org/1999/xlink allows me to save the component. At this point the SVG still gets lost on re-rendering - If I add xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" to a html tag in my VF page which contains the VF component this resolves the re-rendering issue. From reading this Github thread and other posts I found on other forums there is no clear answer on how to resolve this. There needs to be a step by step guide detailing all the potential steps-combined which are required for this. I thought I’d add my findings here as it’s taken sometime to come to the conclusion that to fix this it’s a combination of steps suggested in this thread and not one solution on it’s own. I hope this helps somewhat. I'm interested to note if anyone else required further workarounds?
AndrewNR commented 5 years ago

Hi, I was able to fix the problem when SVG icons disappear, if we re-render some <apex:*> tag after controller's action:

  1. Add docType="html-5.0" attribute to the <apex:page> tag;
  2. Put the xmlns="..." and xmlns:xlink="..." attributes directly on the <use ...> tag, together with xlink:href="..." value for the SVG icon.

Please find example in this StackExchange answer: https://salesforce.stackexchange.com/a/283032/29123