SVG to Canvas/Image conversion using JS

Question

Is it possible to convert the below SVG code into Canvas or Image format using js.

<svg class="svg" id="myViewer" width="400" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <g transform="translate(0, 0)" stroke="#000000" fill="#ffffff" stroke-width="1">
        <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
            <div contenteditable="true" style="height:10%">Sample</div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
                <image x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/focus-48.png"></image>
                <rect x="0" y="0" width="100%" height="10" pointer-events="all" fill="green"/>
            </svg>
        </foreignObject>
    </g>
</svg>
<canvas id="canvas"></canvas>

[Here is how you can do it through JavaScript](http://stackoverflow.com/a/3976034/5653093) — A. G. K, Nov 24 '16 at 11:16

Blindman67 · Answer 1 · 2016-11-25T02:53:45.563

0

To convert svg content to an image.

var img = new Image();

img.src = "data:image/svg+xml;base64," +
   window.btoa(`<svg class="svg" id="myViewer" width="400" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <g transform="translate(0, 0)" stroke="#000000" fill="#ffffff" stroke-width="1">
        <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
            <div contenteditable="true" style="height:10%">Sample</div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
                <image x="0" y="0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/focus-48.png"></image>
                <rect x="0" y="0" width="100%" height="10" pointer-events="all" fill="green"/>
            </svg>
        </foreignObject>
    </g>
</svg>
`);

When it has loaded you can render it to a canvas, then convert canvas to a Data URL and save it in the image format you want. Note the SVG image you supplied has content that will taint the rendering image and make it impossible the save.

edited Nov 25 '16 at 02:53

answered Nov 24 '16 at 16:44

Blindman67

51,134
11
73
136

IE < Edge doesn't support foreignObject and does taint canvas when an svg image has been drawn to it and Safari> 9 taints the canvas when a foreignObject has been drawn to it. And I won't even talk about the fact that OP's svg is not even valid, nor about the fact that you can't load any external content from an img tag. There is a lot of work before being able to export this svg as bitmap. – Kaiido Nov 24 '16 at 23:46
Thanks Kaiido and Blindman67. In that case is there any tag where i can replace foreignObject to load div in the svg and only for demo purpose i'm loading the external content for img tag. But even though if i load internal content in svg tag is also not working. – Vijay Baskaran Nov 25 '16 at 04:30
This is wat i tried: – Vijay Baskaran Nov 25 '16 at 04:32
For external resources, you have to first convert it to a dataURL, then append it in your svg's dataURI. For foreignObject, no, no easy other say. One could first call html2canvas over the html markup to convert it to bitmap before hand, but sounds like a big hassle for just safari... But if all you've got is this text, it can easily be manually replaced with an svg text element. – Kaiido Nov 25 '16 at 04:43

SVG to Canvas/Image conversion using JS

1 Answers1