Method to convert HTML5 canvas to SVG?

by

Try canvas2svg.js. [Demo]

I ran into needing this myself and ended up writing a library for this. At the time, the other libraries were a bit sparse, or didn’t generate valid SVG.

The basic concept is the same though. You create a mock canvas 2D context and then generate an SVG scene graph as you call canvas drawing commands. Basically you can reuse the same drawing function. Depending on what context you pass to it, you either draw to a standard 2D canvas or generate an SVG document that you can serialize.

You can’t actually “transform” a canvas element that’s been drawn to, as it’s just a bitmap, so keep that in mind. When you export to SVG you’re really just calling the same drawing function again using a fake context.

So as a quick example:

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg

More Related Contents:

  1. How to draw human body in html5 svg and roate it in 360degree [closed]
  2. How to create a circle with links on border side
  3. How to apply a style to an embedded SVG?
  4. Add a background image (.png) to a SVG circle shape
  5. How to style SVG with external CSS?
  6. html/css hexagon with image inside
  7. Setting transform-origin on SVG group not working in Firefox
  8. d3 Node Labeling
  9. Responsive CSS Trapezoid Shape
  10. How do you convert screen coordinates to document space in a scaled SVG?
  11. Extracting SVG from Font Awesome
  12. How to cut a circular part from an image?
  13. Making an svg image object clickable with onclick, avoiding absolute positioning
  14. Draw double curved item with beveled edges
  15. How to get rid of extra space below svg in div element
  16. How to get ScrollBars in SVG?
  17. div with triangle at the bottom with background image
  18. Insert HTML code inside SVG Text element
  19. Cross-browser embedded font in svg image
  20. How do I create a teardrop in HTML?
  21. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  22. How to render svg elements with crisp edges while still keeping anti-aliasing?
  23. How to display multiple lines of text in SVG?
  24. How to curve the div from bottom with image background
  25. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  26. How can I embed SVG into HTML in an email, so that it’s visible in most/all email browsers?
  27. SVG animation delay on each repetition
  28. SVG coordinates with transform matrix
  29. Scale SVG to container without mask/crop
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment