8

So, I have this simple visualforce page:

<apex:page standardstylesheets="false" showheader="false" sidebar="false" docType="html-5.0" applyHtmlTag="false">
  <div>
    <h1>
      <a href="/">
        <div>
          <svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.3125px;">
            <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.0.1</desc>
            <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
            <ellipse cx="320" cy="240" rx="128" ry="180.48" fill="none" stroke="#555555" transform="matrix(1,0,0,1,0,0)" stroke-width="1" opacity="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></ellipse>
          </svg>
        </div>
      </a>
    </h1>
    <hr/>
  </div>
</apex:page>

The page renders, however salesforce is modifying the HTML when the page is sent to the browser. If I view the source of the page, here's what I get:

<!DOCTYPE HTML>
  <head>
    <script src="/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1403162922000" type="text/javascript"></script>
    <script src="/static/111213/js/perf/stub.js"></script>
  </head>
  <div>
    <h1>
      <a href="/">
        <div>
          <svg height="480" style="overflow: hidden; position: relative; top: -0.3125px;" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg">
            <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Rapha&euml;l 2.0.1</desc>
            <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
            <ellipse cx="320" cy="240" fill="none" opacity="0.5" rx="128" ry="180.48" stroke="#555555" stroke-width="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;" transform="matrix(1,0,0,1,0,0)"></ellipse>
          </svg>
        </div>
      </a>
      <hr />
    </h1>
  </div>

Which is ALMOST correct. Note that the hr has been included in the h1 tag. Why would this be happening and what can I do to fix it? I'm only able to produce this result when I'm rendering an svg to the browser. Otherwise, the HTML is preserved.

  • The <hr/> tag is present in the VF page (source) as well. What are the other differences? – Sam Jun 23 '14 at 5:32
  • The hr tag is present in the page source but it is in the wrong spot. It should not be inside the h1 tag. – DerekLansing Jun 23 '14 at 5:33
6

Definitely seems like a bug with the processing engine to me. If you wrap everything inside the <h1> tags with no-layout output panel then the generated HTML comes out as expected:

<apex:page standardstylesheets="false" showheader="false" sidebar="false" docType="html-5.0" applyHtmlTag="false">
  <div>
    <apex:outputPanel layout="none">
        <h1>
          <a href="/">
            <div>
              <svg height="480" version="1.1" width="640" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.3125px;">
                <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.0.1</desc>
                <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
                <ellipse cx="320" cy="240" rx="128" ry="180.48" fill="none" stroke="#555555" transform="matrix(1,0,0,1,0,0)" stroke-width="1" opacity="0.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.5;"></ellipse>
              </svg>
            </div>
          </a>
        </h1>
      </apex:outputPanel>
    <hr/>
  </div>
</apex:page>
| improve this answer | |
  • 1
    Thanks Matt. This works for my simplified stackexchange version but still breaks in the full page. Looks like there is a bug here. I'll submit the bug to salesforce. – DerekLansing Jun 23 '14 at 15:56
  • It's turtles all the way down. Just keep wrapping in output panels everywhere for now, but yeah, kick that bug report in to them! – Matt Lacey Jun 23 '14 at 22:27
  • @MattLacey : Your solutions worked. You are real champ. Whenever visualforce do render problem, we have to try this layout=none option., This works many times. This Time i forgot to try this. and your ans given me reminder. – Ankuli Mar 24 '17 at 10:04
2

Removing the namespace from my SVG's (xmlns="http://www.w3.org/2000/svg") made everything work as expected for me.

| improve this answer | |
  • 1
    This is a super old comment but valid even today in 2015. Thank you Caleb for pointing this out. I figured it out myself the long and horrible way when an SVG element in my VF page broke the entire page layout simply because of this namespace. Gah! – AndyBean Aug 12 '15 at 20:07
0

Came across one more solution. similar to @Matt Lacey 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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.