Convert jQuery SVG to image

Question

I am generating SVG object using jQuery SVG plug-in. The problem is how can I convert it into image in my script.

My script is following:

<html>
<head>        
<script type="text/javascript" src="jquery-latest.min.js"></script>                
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(function(){
  $("#draw").click(function(){
     $('#svg_container').svg();
     svg = $('#svg_container').svg('get');
     svg.clear(true);
     svg.circle(200, 220, 150, {fill: "red", stroke: "blue", strokeWidth: 5});
     alert(svg.toSVG()); //this prints svg source of the generated image, i.e. circle
  });
});
</script>
</head>
<body>
<div id="svg_container" style="position: absolute; left: 100px; top: 100px; width: 400px; height: 400px; border: thin solid #4297D7;"></div>
<button id="draw">Draw</button>
</body>
</html>

I have tried out this and this but without success.

Could you please show me how to convert this svg into any type of image?

Thanks in advance.

UPDATE

The problem is solved and I have posted the solution as an answer, check it here.

possible duplicate of [Convert SVG to image (JPEG, PNG, etc.)](http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc) — Phrogz, Nov 17 '11 at 02:02

score 6 · Answer 1 · answered Jan 28 '11 at 12:48

This seams to be very hard to do.

I found this project that attempts to do this:

http://www.svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

I also found one project that tried to build a SVG renderer for Canvas but it was far from complete.

They did use a solution to go by the server and have the SVG rendered to PNG there, that might be the only really working solution right now.

score -6 · Accepted Answer · answered Jan 29 '11 at 12:32

I have finally solved the problem of converting SVG to image file. Here is the solution, if anybody is interested in:

<html>
<head>        
<script type="text/javascript" src="jquery-latest.min.js"></script>                
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>

<script type="text/javascript">
$(function(){
    function q(k){
       var qs = window.location.search.substring(1);
       var t = qs.split("&");
       for (i=0;i<t.length;i++) {
        kv = t[i].split("=");
            if (kv[0] == k) return unescape(kv[1]).replace('+',' ');
       }
       return null;
    }

    var context;
    function bodyonload() {
       if (typeof(FlashCanvas) != 'undefined') context = document.getElementById('canvas').getContext;
       var qUrl = q('url'); if (qUrl != null && qUrl != '') { r(); canvg('canvas', qUrl); }
       var qSvg = q('svg'); if (qSvg != null && qSvg != '') { r(); canvg('canvas', qSvg); }
    }

    function render() {
       var c = document.getElementById('canvas');
       c.width = 400;
       c.height = 500;
       if (context) c.getContext = context;
       canvg(c, document.getElementById('svg').value);
       var svg_content = c.toDataURL();
       $.ajax({
                 type:"POST",
                 url:"svg.php",
                 data: ({
                      svg_content: svg_content
                 }),
                 timeout: 30000, //30 sec.                            
       });
    }   

    function r() {
        var c = document.getElementById('canvas');
        c.width = '1000'; //change it to the width of your image
        c.height = '600'; //change it to the height of your image
        if (context) c.getContext = context;
    }

    $("#save").click(function(){
        render();
    });

    $("#draw").click(function(){
        $('#svg_container').svg();
        svg = $('#svg_container').svg('get');
        svg.clear(true);
        svg.circle(200, 220, 150, {fill: "red", stroke: "blue", strokeWidth: 5});
        $("#svg").val(svg.toSVG());
    });
});
</script>
</head>
<body>
<textarea id="svg" rows="5" cols="50" style="visibility: hidden;"></textarea><br />
<canvas id="canvas" width="1000px" height="600px"></canvas>
<div id="svg_container" style="position: absolute; left: 100px; top: 100px; width: 400px; height: 400px; border: thin solid #4297D7;"></div>
<button id="draw" style="position: absolute; top:400px; left: 500px;">Draw</button>
<button id="save" style="position: absolute; top:400px; left: 550px;">Save</button>
</body>
</html>

The content of svg.php is following:

<?php
if (isset($_POST['svg_content'])){
     $imageData=$_POST['svg_content'];
     $filteredData=substr($imageData, strpos($imageData, ",")+1);
     $unencodedData=base64_decode($filteredData);
     $fp = fopen('test.png', 'wb' );
     fwrite( $fp, $unencodedData);
     fclose( $fp );
}
?>

You can download jQuery library (jquery-latest.min.js) from jQuery official web site and jQuery SVG library from here .

Hope this will help to many of you who are looking toward converting SVG to image right from your program.

Best,

Bakhtiyor

yes, what are it contents? because i don't see that in svg.php you are generating any png — fazo, Jan 29 '11 at 18:41
@fazo. Call it as you like but I was looking forward to store the result of grammatically generated SVG to file. And by the way it is one of the hot topics for SVG, I think. — Bakhtiyor, Feb 01 '11 at 17:12
the point is, you are generating 'test.png' in svg.php but it doesn't have anything to do with png. — fazo, Feb 01 '11 at 22:07
@fazo. Do you have any solution for my problem? If so, please be so kind to post it as an answer. — Bakhtiyor, Feb 02 '11 at 12:13
problem is, you was asking for a converter from SVG to and image, and accepted your 'solution' which is not doing what you was asking for. why are you lying that you are writing 'test.png' when it has nothing to do with png or any other image format — fazo, Feb 03 '11 at 15:02
@fazo. Final goal was to convert (or to save) SVG into any image format. I have PNG image format as a result of the script and the goal is achieved. — Bakhtiyor, Feb 03 '11 at 17:56
can you view it with image Viewer? no. Writing some data to a file and naming it data.png doesn't make it a png file — fazo, Feb 04 '11 at 12:40
This is one of the silliest answers I've seen on this site. You need to pay attention to what fazo is saying.... — Frodo Baggins, Oct 07 '11 at 10:08
This is not an anwser ... You need to convert your data to an image format before saving it to a filename whose extension is named after this format. You can't convert wav to mp3 by just renaming a file. — lud, Oct 23 '13 at 09:33

Convert jQuery SVG to image

2 Answers2