The Simpsons in CSS, in 15 minutes

The Simpsons in CSS is a clever example of how you can "draw" vector shapes on a Web page (and animate them) using only HTML and CSS.

The HowTo explains the basic technique: break down your drawing into rectangles (each will result in a <div>) that can be stylized with CSS, e.g. by using transformations, borders, round corners, etc. The HowTo does not state how the author actually derived the CSS code, but I suspect that he drew the wireframe on a grid (either on paper or with a vector drawing software) and then manually synthesized the CSS.

What about doing the same, but in just 15 minutes, by automagically output the required XHTML+CSS from SVG? Even better, the SVG created by Inkscape, an awesome free software drawing tool?

Well, it happens that I am working on an Inkscape plugin (and an associated console-friendly script), that solves exactly this problem: you draw your SVG in the Inkscape GUI, and my plugin will export the corresponding XHTML+CSS.

With lots of Fixed Layout eBook-related options, as some elements in the next screenshot give away (click to enlarge):

(Click here to see the results of working too much with SVG.)

I plan to release this plugin on my GitHub soon. Meanwhile, you might be interested in knowing that I will be on the job market from January 2015.

EDIT 2014-07-10: the ink2fxl Inkscape plugin and the associated stand alone script are available at https://github.com/pettarin/ink2fxl