My blog has been moved to

Wednesday, August 06, 2008

svg-to-png using (Qt)WebKit

Related to the recent discussion on some problems of Qt SVG renderer when drawing the Oxygen icons, I decided to sit down and wrote an example of yet-another SVG renderer by using QtWebKit (available since Qt 4.4.0). Check out the code if you're interested, it is part of the Graphics Dojo examples.

The major difference between this WebKit-based tool compared to QSvgRenderer is that it should handle SVG features which are supported by WebKit. Note that QtSvg limits itself only to SVG Tiny 1.2 without DOM API and scripting (due to various reasons). On the other hand, SVG support in WebKit will be improved over the time. Yes, fancy stuff like filter effects are not fully implemented yet (at least, in QtWebKit), but we are working towards that.

For those who can't wait for the DOM API in QtWebKit, you can see the example of poor man's way of doing it, i.e. by (ab)using evaluateJavaScript() of a web frame. Here it is used to get the SVG width and height attributes. As a hint, if you are unsure about the DOM tree, its elements and/or their attributes, then open the SVG in e.g. Arora or the Demo Browser and use the Web Inspector to check it. The JS console is also helpful to try out various thing right when you view the SVG.

Obligatory screenshot follows:

Result of WebKit-based SVG rasterizer

And while you are there, check out also other fresh dojo examples: zooming text and old-school radial blur.


Ruud Steltenpool said...

Very nice.
/me loves SVG

André Somers said...

Do I understand you correctly if I say that Qt thus contains two SVG renderers? I think it is a pity that there is such a duplication in Qt. It makes for more maintenance, longer compiles, more memory usage...

And if I read the other Qt related blogs, Qt will only become a heavier beast with the release of 4.5 (which will include an ODF writer, according to Thomas Zander).