ariya.io About Talks Articles

svg-to-png using (Qt)WebKit

2 min read

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.

♡ this article? Explore more articles and follow me Twitter.

Share this on Twitter Facebook