Drawing an SVG file on a HTML5 canvas

Question

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

User · Accepted Answer

EDIT Dec 16th  2019 Path2D is supported by all major browsers now EDIT November 5th  2014 You can now use ctx drawImage to draw HTMLImageElements that have a  svg source in some but not all browsers  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    quot http   upload wikimedia org wikipedia commons d d2 Svg example square svg quot    Live example here  You should see a green square in the canvas  The second green square on the page is the same  lt svg gt  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   Old posterity 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  http   code google com p canvg  http   canvg googlecode com svn trunk examples index htm

User · Answer

As Simon says above  using drawImage shouldn t work  But  using the canvg library and   var c   document getElementById  canvas    var ctx   c getContext  2d    ctx drawSvg SVG XML OR PATH TO SVG  dx  dy  dw  dh     This comes from the link Simon provides above  which has a number of other suggestions and points out that you want to either link to  or download canvg js and rgbcolor js  These allow you to manipulate and load an SVG  either via URL or using inline SVG code between svg tags  within JavaScript functions

User · Answer

You can easily draw simple svgs onto a canvas by    Assigning the source of the svg to an image in base64 format Drawing the image onto a canvas   Note  The only drawback of the method is that it cannot draw images embedded in the svg   see demo   Demonstration    Note that the embedded image is only visible in the svg    x000D   x000D  var svg   document querySelector  svg    x000D  var img   document querySelector  img    x000D  var canvas   document querySelector  canvas    x000D   x000D     get svg data x000D  var xml   new XMLSerializer   serializeToString svg   x000D   x000D     make it base64 x000D  var svg64   btoa xml   x000D  var b64Start    data image svg xml base64    x000D   x000D     prepend a  header  x000D  var image64   b64Start   svg64  x000D   x000D     set it as the source of the img element x000D  img src   image64  x000D   x000D     draw the image onto the canvas x000D  canvas getContext  2d   drawImage img  0  0   x000D  svg  img  canvas   x000D    display  block  x000D    x000D  SVG x000D   x000D   lt svg height  40  gt  x000D     lt rect width  40  height  40  style  fill rgb 255 0 255      gt  x000D     lt image xlink href  https   en gravatar com userimage 16084558 1a38852cf33713b48da096c8dc72c338 png size 20  height  20px  width  20px  x  10  y  10  gt  lt  image gt  x000D   lt  svg gt  x000D   lt hr  gt  lt br  gt  x000D   x000D  IMAGE x000D   lt img  gt  x000D   lt hr  gt  lt br  gt  x000D      x000D  CANVAS x000D   lt canvas gt  lt  canvas gt  x000D   lt hr  gt  lt br  gt  x000D   x000D   x000D

User · Answer

Mozilla has a simple way for drawing SVG on canvas called  Drawing DOM objects into a canvas

User · Answer

Sorry  i don t have enough reputation to comment on the  Matyas answer  but if the svg s image is also in base64  it will be drawed to the output   Demo    x000D   x000D  var svg   document querySelector  svg    x000D  var img   document querySelector  img    x000D  var canvas   document querySelector  canvas    x000D   x000D     get svg data x000D  var xml   new XMLSerializer   serializeToString svg   x000D   x000D     make it base64 x000D  var svg64   btoa xml   x000D  var b64Start    data image svg xml base64    x000D   x000D     prepend a  header  x000D  var image64   b64Start   svg64  x000D   x000D     set it as the source of the img element x000D  img onload   function     x000D         draw the image onto the canvas x000D      canvas getContext  2d   drawImage img  0  0   x000D    x000D  img src   image64  x000D  svg  img  canvas   x000D    display  block  x000D    x000D  SVG x000D   x000D   lt svg height  40  gt  x000D     lt rect width  40  height  40  style  fill rgb 255 0 255      gt  x000D     lt image xlink href  data image png base64 iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3 kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457 Lv7n 4tFjbwAHVOnVPnlLz75ht67OhhZg M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO v3WF27w rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD t5N9 QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3 DaG2 x4GNPgBhEZG GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u su8vinEO02hEWLN ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8 hKI4fRzz3L6uWe5 PMvnHz6aa4uX D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E YznOef7Vl1h86QWurlwjbc QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS xeLScoMYSVJlfOMTl5RXW1 5w5fJVnFGWf1 mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ   CfZ XUiZ0jTmFv5mAvf YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08 Tu lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2 Bvy7dYGZ1k7efeQB Y4PBqGBtdYvb3SFzLcfqToZc OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI r0hyU6P cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89 KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC Z2R6Rj0ra0w2W1 t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p Dp  JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX fcH ACJBPYTJ4X8tAAAAAElFTkSuQmCC  height  20px  width  20px  x  10  y  10  gt  lt  image gt  x000D   lt  svg gt  x000D   lt hr  gt  lt br  gt  x000D   x000D  IMAGE x000D   lt img  gt  x000D   lt hr  gt  lt br  gt  x000D      x000D  CANVAS x000D   lt canvas gt  lt  canvas gt  x000D   lt hr  gt  lt br  gt  x000D   x000D   x000D

[html] Drawing an SVG file on a HTML5 canvas

EDIT Dec 16th, 2019

EDIT November 5th, 2014

Old posterity answer:

Examples related to html

Examples related to canvas

Examples related to svg