Converting SVG To PNG On The Fly: How? [Update]

Remember SVG? Pioneered by Adobe back in the day, Scalable Vector Graphics were to compete with Macromedias Flash. They never could (and so they bought them), but the result—the SVG standard, is interesting for HTML / CSS uses. While inserting an SVG image requires the use of a special svg tag plus browser support or plugins, the future might include support from the img tag and background-image property. The possibilities are rather delicious; logos and icons can retain their scalability, gradients can stay smooth no matter the resolution. All the while, filesizes are kept small, perfect for cellphones and useful for modern browsers and their spanking new full-page zoom features.

Alas, we’re not quite there yet. Even Wikipedias use of SVG involves PNG for cross-platform-compatability. PNGs are a pretty good start, though. So how do they do it? I’ve found only a few ways to convert SVG files to PNGs on the fly, but none that I can install on my webserver; the closest being an ImageMagick powered one.

Dear tech savvy reader, please feel free to chime in with your vast knowledge. Is there a system—preferrably PHP / GD powered—that’ll let me generate a PNG image from an SVG image? Is it possible at all?

[Update]: No, no it’s not possible. GD apparently doesn’t support it. Here’s a list of supported rasterizers of SVG.

3 thoughts on “Converting SVG To PNG On The Fly: How? [Update]”

  1. I’m not sure about how to automate the rasterization on the webserver, but Batik is a pretty good means of rasterizing SVGs. Furthermore, you dont’ need to serve PNGs to all browsers, only those that don’t yet support SVG (this means only Internet Explorer).

    Do this:

    This has the effect of the browser fetching foo.svg if it understands SVG and foo.png if it doesn’t.

  2. Woops, the markup was eaten. Here’s my second attempt:

    <object type=”image/svg+xml” data=”foo.svg” width=”300″ height=”200″ />

    <img src=”foo.png” width=”300″ height=”200″ />


  3. Joen says:

    Thanks for the response and the code.

    Furthermore, you dont

Comments are closed.