Webkit fails to render SVGs

[koppor]

Including SVGs in the HTML leads to a parsing error. Is it possible to add SVG support?

Example SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 

[cburgmer]

Thanks for reporting.

As far as I can tell, this is an issue with Webkit. It works fine in Firefox.

Please see this test case: http://jsfiddle.net/cburgmer/c7EcP/4/. Green borders show an <svg> element, an adjacent blue border on the right shows the same SVG as <img> encoded via a data:URI.

It seems that Chrome and Safari in the newest versions don't render an SVG inside another SVG's <foreignObject> if included via an <img> element. This process is employed internally with rasterizeHTML.js to render HTML.

The third column in this test case indicates a possible workaround for Webkit. Here the internal SVG is converted to an <img> element instead of being embeded via a <svg> tag.

I don't think I will get to implementing such a workaround in the near future. Anybody willing to do so can have a look how external image references are embedded as an example.

[cburgmer]

Of course, if you have a say over the content you can work around that bug yourself. Just replace the SVG with the following image:

'<img src="data:image/svg+xml;charset=utf-8,' + encodeURIComponent(THE_SVG) + '"/>'

This can have side effects with CSS applied to the SVG.

[cipri-tom]

is there a way to keep the CSS styles while using the workaround?

[cburgmer]

If you follow the general idea above, then CSS embedded in the SVG (not linked) should automatically apply.

My thoughts were more around styles applied from the parent document - however it seems that they don't apply across borders anyway.

In case there's still an issue please provide an example on jsfiddle (or similar) and we can have a look at it.

[cipri-tom]

the styles were not embedded and that is why I had a problem. I stripped them by hand from the stylesheet and added them to the svg. It works now. Thanks for the solution!

[cburgmer]

Chrome in the mean time seems to work well with the test case I've posted above. Safari still fails.

[sbrown345]

It looks like this is working in Safari now.

[cburgmer]

Thanks, Simon. It also works for me now. Seems WebKit has caught up!

I've updated the docs (https://github.com/cburgmer/rasterizeHTML.js/wiki/Limitations#webkit-origin), and will close the issue.

As always, happy to reopen if necessary.