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.

2
  • The <hr/> tag is present in the VF page (source) as well. What are the other differences?
    – Sam
    Jun 23, 2014 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. Jun 23, 2014 at 5:33

3 Answers 3

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>
3
  • 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. Jun 23, 2014 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, 2014 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, 2017 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.

1
  • 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, 2015 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .