Aside: Generating & Rendering SVG

I am thinking of a site that will generate images of quotes.

The first thing I think of is of course SVG, and I did a “dry run” for the use cases.
(should discuss the drawbacks later, as an anti XML guy. For my usage it should be clean enough)

Some points to note:

It is natural to use Javascript to interact with it.


Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM

Libraries to interact with

Article on svg javascript libraries

svgweb uses flash to support compatability. Sound weird for me now.

Processing.js. Library for data visualization. seems suitable mostly for scientific computations.

SVG Image library and Editor provide a library of SVG images and a nice SVG editor which can export to code/png.

It require sign up to save the image on web.

No Save As – way to render as normal img

Using SVG to render the image, user can hardly save as an image using the usual right click menu way, which is crucial to my site

<br /> var canvas = document.getElementById("mycanvas");</pre>
var img    = canvas.toDataURL("image/png");

another version:



window.onload =function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

context.fillStyle ="green";


// no argument defaults to image/png; image/jpeg, etc also work on some

// implementations -- image/png is the only one that must be supported per spec.

window.location = canvas.toDataURL("image/png");



Generate Link to save the data, avoiding round trip to server

You can avoid a round trip to the server.

Base64 encode your SVG xml.

Then generate a link to that data. The user can right click on to save it locally.

// This example was created using Protovis &amp; jQuery

// Base64 provided by <a href=""></a>

function encode_as_img_and_link(){

// Add some critical information

$("svg").attr({ version: '1.1' , xmlns:"<a href=""></a>"});

var svg = $("#chart-canvas").html();

var b64 = Base64.encode(svg);

// Works in recent Webkit(Chrome)

$("body").append($("&lt;img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/&gt;"));

// Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri

$("body").append($("&lt;a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'&gt;Download&lt;/a&gt;"));


The img tag works in Webkit, the link works in Webkit & Firefox, and may work in any browser which supportsdata-uri


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s