SVG2PNG

Written by Yannik Messerli - 15 May 2015


SVG stands for Scalable Vector Graphics. It is XML based and is extremely handy. First, because it is resolution-independant, since it is mathematical curves that describe graphics. But also because it supports a large number of features, such as animation, user interaction, etc... Thus, I'm mostly working with it, producing graphs and infographics.

However, there is a catch. Too few applications read SVG files. I can rarely send a SVG over an email and not hearing complains from the recipient. Powerpoint does not allow me to just drop my SVG in my slides and only a few applications are able to convert SVG in other formats. If frameworks exists, such as the well-known ImageMagick, there isn't good integration with my Mac OS. Same story with Cairo. Some developers tried to ship it in a nice native app. But I never succeeded to install it. Despite the large number of proposed solutions, nothing looked simple. The process to create a shareable image from SVG is, in fact, a frustrating experience. Even when it works - when you have Imagemagick producing something, it is not rare that the output does not represent well the graph.

Therefore, I developped quickly a simple page in which I would be able to drop my SVG and then drag and drop images of my graphs. 3s to share my latest work... You can check it out here.


Mockup

The way I'm using it is as follow:

  • First, using the awesome NYT's bookmarklet SVG Crowbar, I would download a SVG file from a page I'm working on.
  • Optionally, I would modify the file in Illustrator or in other vector editors.
  • Then, I would drop my SVG in SVG2PNG page and then, I would drag the produced image somewhere else, e.g. in my powerpoint or in Mail.app.

Typically, I would have the page open all day long in the back of my desktop.

Hope it will help someone.

Written by

Yannik Messerli

Comments