Is there a default way of drawing an SVG file onto a HTML5 canvas? Google Chrome supports loading the SVG as an image (and simply using drawImage
), but the developer console does warn that resource interpreted as image but transferred with MIME type image/svg+xml
.
I know that a possibility would be to convert the SVG to canvas commands (like in this question), but I'm hoping that's not needed. I don't care about older browsers (so if FireFox 4 and IE 9 will support something, that's good enough).
Best Answer
EDIT: Dec 2019
The Path2D() constructor is supported by all major browsers now, "allowing path objects to be declared on 2D canvas surfaces".
EDIT: Nov 2014
You can now use
ctx.drawImage
to draw HTMLImageElements that have a.svg
source in some but not all browsers (75% coverage: Chrome, IE11, and Safari work, Firefox works with some bugs, but nightly has fixed them).Live example here. You should see a green square in the canvas. The second green square on the page is the same
<svg>
element inserted into the DOM for reference.You can also use the new Path2D objects to draw SVG (string) paths. In other words, you can write:
Live example of that here.
Original 2010 answer:
There's nothing native that allows you to natively use SVG paths in canvas. You must convert yourself or use a library to do it for you.
I'd suggest looking in to canvg: (check homepage & demos)