HTML into SVG into HTML Inception

by Schepp

HTML

<!--[if !IE]><!-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <foreignObject x="0" y="0" width="100%" height="100%">
        <!--<![endif]-->
        <p>IE9 and IE10 both *do* support embedding SVG into HTML.<br>
        They *do not* support embedding HTML into SVG via &lt;foreignObject&gt;. Instead they try to parse it with the SVG parser and that can't make any sense of the HTML content. They display nothing.<br>
        To prevent IE9 from doing this, I can use conditional comments to hide the outer SVG parts.<br>
            Life gets harder with IE10 as Microsoft decided to no longer support CCs... :(</p>
        <!--[if !IE]><!-->
    </foreignObject>
</svg>
<!--<![endif]-->

CSS

p {
    font-family: Arial, Helvetica, sans-serif;
}