Converting Svg With Image Element To Html Canvas

I'm just trying to convert svg to html canvas, it works fine until i use image element in svg, if i use image elements means canvg is not working. This is the code which i used to

Solution 1:

You'd need to convert the image into a data URL. What you pass to canvg must be complete in a single file it can't have external references.

I can show you steps to see an image work. Start from this...

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="paste your data URL in here" height="75" width="75" y="27.5" x="29.5"></image>
</svg>

1. goto http://dopiaza.org/tools/datauri/index.php
2. Select retrieve from a URL
3. Enter http://archiveteam.org/images/thumb/4/40/Google_Logo.png/800px-Google_Logo.png as the URL
4. Replace the output in the place indicated above (it's too big to include here)
5. Paste the whole lot above into the test box here
6. You're done, see the result on the left. Note I've only tested this on Firefox.

Solution 2:

Try this out:- http://jsfiddle.net/adiioo7/xvQHb/3/

It's done using canvg plugin Reference

//load a svg snippet in the canvas with id = 'drawingArea'
  canvg(document.getElementById('canvas'), '<svg>...</svg>')