Import a SVG file into RaphaelJS, modify it and save it as an image. - Part 2
Add comment
Latest comments
-
GurpreetWell I have a different issue. Basically I want to write a general standalone script that parses different SVG files and makes some changes(permanent ones). It has nothing to do with the web. How do I go about it??
Permalink22.05.2013 -
Illinois busine...
Really rich content and very useful information. I found my problem’s solution starting over here. I exceedingly advocate his/her machinery by means of the valuable enlightening information. Thanks a lot………..
Permalink21.05.2013 -
Carla
We are beginning to use Drupal as a platform for clients and this was a great article to come across to kick start my learning. I have my own check list of modules to include that were mostly covered in this article however, I now have some thoughts on what am I missing since there were several here that I did not previously consider. Thanks for the enriching and thought provoking info!
Permalink21.05.2013
1
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):
<div class="svg-file" id="svg_wrapper" data-svg="Invisible_Pink_Unicorn_black.svg"></div>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:
<div class="svg-file" id="svg_wrapper" data-svg="Invisible_Pink_Unicorn_black.svg"></div><canvas id="canvas"></canvas>
<img id="converted_image" src="">
Let's add some titles to keep an overview:
<h3>SVG</h3><div class="svg-file" id="svg_wrapper" data-svg="Invisible_Pink_Unicorn_black.svg"></div>
<h3>CANVAS</h3>
<canvas id="canvas"></canvas>
<h3>IMAGE</h3>
<img id="converted_image" src="">
Then we are going to add another button that will trigger the conversion. You can place wherever you want to:
<!-- color buttons --><button class="color" value="#000000">Classy Black</button>
<button class="color" value="#eb84b6">Sassy Pink</button>
<button class="color" value="#6f4a9a">Space Rainbow Purple</button>
<button class="color" value="#fff682">Yellow Star</button>
<!-- image button -->
<br>
<button id="make_image">make image</button>
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!):
<script src="rgbcolor.js"></script><script src="canvg.js"></script>
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.