Salesforce reformatting HTML in visualforce page when rendering SVG
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>
Removing the namespace from my SVG's (xmlns="http://www.w3.org/2000/svg") made everything work as expected for me.