Drawing an SVG file on a HTML5 canvas

by

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).

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

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:

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

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)

canvg takes the URL to an SVG file, or the text of the SVG file, parses it in JavaScript and renders the result on Canvas.

More Related Contents:

  1. What is the difference between SVG and HTML5 Canvas?
  2. Draw SVG on HTML5 Canvas with support for font element
  3. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  4. How to create a circle with links on border side
  5. Draw on HTML5 Canvas using a mouse
  6. html5 – canvas element – Multiple layers
  7. How to Copy Contents of One Canvas to Another Canvas Locally
  8. Canvas drawings, like lines, are blurry
  9. html/css hexagon with image inside
  10. Setting transform-origin on SVG group not working in Firefox
  11. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  12. get click event of each rectangle inside canvas?
  13. Making an svg image object clickable with onclick, avoiding absolute positioning
  14. Gradient Stroke Along Curve in Canvas
  15. How to get rid of extra space below svg in div element
  16. How to get ScrollBars in SVG?
  17. Insert HTML code inside SVG Text element
  18. Cross-browser embedded font in svg image
  19. How to display multiple lines of text in SVG?
  20. Create links in HTML canvas
  21. Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
  22. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  23. How can I embed SVG into HTML in an email, so that it’s visible in most/all email browsers?
  24. How put percentage width into html canvas (no css)
  25. Clear Canvas Rect (but keep background)
  26. Poor anti-aliasing of text drawn on Canvas
  27. Scale SVG to container without mask/crop
  28. HTML5 Canvas – Fill circle with image
  29. HTML canvas with scrollbar
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment