var svg = document.querySelector( "svg" ); | |
var svgData = new XMLSerializer().serializeToString( svg ); | |
var canvas = document.createElement( "canvas" ); | |
var ctx = canvas.getContext( "2d" ); | |
var img = document.createElement( "img" ); | |
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) ); | |
img.onload = function() { | |
ctx.drawImage( img, 0, 0 ); | |
// Now is done | |
console.log( canvas.toDataURL( "image/png" ) ); | |
}; |
This comment has been minimized.
This comment has been minimized.
Not that I'm aware of. |
This comment has been minimized.
This comment has been minimized.
Note that currently this solution does not work in Firefox. Chrome seems to support this ok. I'm also thinking that the |
This comment has been minimized.
This comment has been minimized.
To have the image not be cropped, you just need to set the size of the convas, which you can do based on the size of the svg. Just put this immediately after
|
This comment has been minimized.
This comment has been minimized.
My onload function is not getting called here and even the image is not getting displayed..please suggest an option |
This comment has been minimized.
This comment has been minimized.
Using this to draw a d3pie pie chart to the canvas just renders an empty object. Any idea why ? Edit: Decided to use canvg and pass svgData to it instead of creating an img out of it and it works ! But I still don't understand why the original code didn't work... |
This comment has been minimized.
This comment has been minimized.
converting svg to data url is working but when I try to render it to canvas it's not showing images that used in svg... any idea I have already add required attrs to svg here is my code
|
This comment has been minimized.
This comment has been minimized.
IE11 (probably others too) have some issues with SVG namespaces - I don't know if it is the Raphael to blame or something else. One solution is to fix the namespaces yourself: you will have some weird stuff like:
replace it with:
and fix the xlinks accordingly |
This comment has been minimized.
This comment has been minimized.
If your SVG styling isn't inline, you can use this package: https://github.com/lukehorvat/computed-style-to-inline-style |
This comment has been minimized.
This comment has been minimized.
@philfreo , I found your function useful, but it was still partially cut off, so as a hack, I did this to ensure it wasn't cut off. Won't work in all cases. Just a heads up that getBoundingClientRect() doesn't seem to always work.
By the way, this gist is a lifesaver! |
This comment has been minimized.
This comment has been minimized.
Here's what i'm using. Works fine in Chrome but not on Firefox... Any ideas?
|
This comment has been minimized.
This comment has been minimized.
@guillemp |
This comment has been minimized.
This comment has been minimized.
@guillemp
|
This comment has been minimized.
This comment has been minimized.
@abishekrsrikaanth "Is there a way to convert PNG to SVG?" |
This comment has been minimized.
This comment has been minimized.
Hi. How can i convert svgz (compressed svg) from url? Tried with CloudConvert and work properly with svgz!! How can i do using svg2png.js file? |
This comment has been minimized.
This comment has been minimized.
Seems a little odd to base64 encode it.... I went with var img = new Image()
img.src = "data:image/svg+xml;utf8," + svgData |
This comment has been minimized.
This comment has been minimized.
@toastal Using utf8 didn't seem to work. Did it work for you? I am Using Chrome. |
This comment has been minimized.
This comment has been minimized.
var svg = document.querySelector( "svg" ); var canvas = document.createElement( "canvas" ); var img = document.createElement( "img" ); img.onload = function() {
}; Worked with this code. but for some SVG files it is showing "NETWORK ERROR". Can u help? |
This comment has been minimized.
This comment has been minimized.
When I convert SVG to PNG it only export graph plot not graph data to PNG . |
This comment has been minimized.
This comment has been minimized.
I'm trying to export angular-d3-charts to PDF as an image but the chart is not complete the x-axis are hidden as it's not inline style is there any workaround to solve this ??? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
You save my life!!!!!!!!!!!!!!!!!!!! @guillemp This code works well! Thank you very much! I used snap JS to draw svg, here what I do:
|
This comment has been minimized.
Is there a way to convert PNG to SVG?