Import a SVG file into RaphaelJS, modify it and save it as an image. - Part 2

Welcome to the final post in this two-parter on how to import, modify and save your SVG as an image with JavaScript (JS). In this part we will be looking at the exporting aspect and how you can convert your imported SVG into an image. As mentioned in the first part this will unfortunately only work in Internet Explorer 9 and above. Although RaphaelJS supports Internet Explorer 8 and below, we cannot convert them in older versions of Microsoft's browser because it renders the imported SVG as VML and does not support canvas elements.

Getting the HTML ready

First we have to slightly modify our previous code by giving our SVG wrapper an ID (svg_wrapper):

Next we are going to add the canvas and the image element, you can place this wherever you want but I decided to just place it under the SVG wrapper:



Let's add some titles to keep an overview:

SVG

CANVAS

IMAGE


Then we are going to add another button that will trigger the conversion. You can place wherever you want to:







You may have noticed that I added a class to the color buttons, this is because we used to target all the buttons when changing the colors. But because there is now a button that does something else we have to adjust the existing JS a little bit:


$('button.color').live('click', function(){
unicorn.attr({
fill: $(this).val()
});
});

Now its time for the JS stuff!
As mentioned above we will not go from the SVG to an image directly but instead convert it to a canvas element and convert that to an image. For this we will be using an additional script called: canvg

Download the package and embed it in the usual way (there are two scripts in there!):

Making the magic happen with canvg & .toDateURL()

After that we can add the click event for the new image create button we placed in earlier:


$('#make_image').live('click', function(){
// create the image of the canvas
});

Inside here we first have to create the canvas from the SVG, for this we need to grab the canvas and the SVG elements:


$('#make_image').live('click', function(){
// create the image of the canvas
var canvas = document.getElementById('canvas');
var svg = document.getElementById('svg_wrapper');
svg = svg.innerHTML;
});

Then we can call the canvg() function using our two elements:


$('#make_image').live('click', function(){
// create the image of the canvas
var canvas = document.getElementById('canvas');
var svg = document.getElementById('svg_wrapper');
svg = svg.innerHTML;
// create the canvas version of the svg
canvg(canvas, svg);
});

If you try the whole thing at this point you will see that the canvas is successfully generated, for the image generation we are going to use the .toDataURL() function. This creates a base64 encoded url that we can safe and ultimately update the image placeholder with. You can also specify different image types, for this example however we are just going to generate a .png.

More information on the .toDateURL() function can be found here.


$('#make_image').live('click', function(){
// create the image of the canvas
var canvas = document.getElementById('canvas');
var svg = document.getElementById('svg_wrapper');
svg = svg.innerHTML;
// create the canvas version of the svg
canvg(canvas, svg);
// return the image
var img_url = canvas.toDataURL('image/png');
$('#converted_image').attr('src', img_url);
});

If you now click on “make image” you should get a total of three unicorns on your display: the imported SVG version, the canvas version and lastly the image that you wanted so badly for Christmas.

That is the entire magic! You can find a working demo of this entire tutorial here.

Stay in touch – join our newsletter!

 

 

November 19, 2012
0 Comments

Abonnieren Sie unseren Newsletter

Add a comment

icon
What is Amazee Labs?