How to draw an inline svg (in DOM) to a canvas?

by

For inline SVG you’ll need to:

  • Convert the SVG string to a Blob
  • Get an URL for the Blob
  • Create an image element and set the URL as src
  • When loaded (onload) you can draw the SVG as an image on canvas
  • Use toDataURL() to get the PNG file from canvas.

For example:

function drawInlineSVG(ctx, rawSVG, callback) {

    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image;

    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    };

    img.src = url;
}

// usage:
drawInlineSVG(ctxt, svgText, function() {
    console.log(canvas.toDataURL());  // -> PNG data-uri
});

Of course, console.log here is just for example. Store/transfer the string instead here. (I would also recommend adding an onerror handler inside the method).

Also remember to set canvas size using either the width and height attributes, or from JavaScript using properties.

More Related Contents:

  1. Capture HTML Canvas as gif/jpg/png/pdf?
  2. how to save canvas as png image?
  3. Convert SVG to PNG with applied images as background to svg elements
  4. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  5. Rasterizing an in-document SVG to Canvas
  6. Is there an equivalent of canvas’s toDataURL method for SVG? [closed]
  7. How to detect shape on a transparent canvas?
  8. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  9. Resizing an image in an HTML5 canvas
  10. Get pixel color from canvas, on mousemove
  11. Zoom Canvas to Mouse Cursor
  12. Zoom in on a point (using scale and translate)
  13. Does HTML5/Canvas Support Double Buffering?
  14. Uploading ‘canvas’ image data to the server
  15. html 5 canvas LineTo() line color issues
  16. HTML5 Canvas camera/viewport – how to actually do it?
  17. How do you access the contents of an SVG file in an element?
  18. Is it possible to programmatically detect size limit for data url?
  19. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  20. Detect if user clicks inside a circle
  21. addEventListener for keydown on Canvas
  22. Javascript function to Rotate a base 64 image by X degrees and return new base64
  23. How to save canvas animation as gif or webm?
  24. size of createElement(“svg”) is 0,0
  25. clearing circular regions from HTML5 Canvas
  26. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  27. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  28. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  29. how to animate drawing lines on canvas
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment