Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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.

share|improve this question
    
The <hr/> tag is present in the VF page (source) as well. What are the other differences? –  Mugambo 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

2 Answers 2

up vote 5 down vote accepted

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>
share|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! –  LaceySnr Jun 23 '14 at 22:27

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

share|improve this answer
    
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 at 20:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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