• No results found

SVG Snapshots

In document Using SVG With CSS3 and HTML5 (Page 125-128)

Rasterization is the conversion of a vector graphic into a bitmap for‐

mat. Broadly speaking, any application that can display an SVG on a screen is a rasterizer. The programs described here are

“single-SVG Snapshots | 123

purpose” rasterizers, used when incorporating SVG into print or when generating fallback alternatives for older browsers. They are command-line programs or software libraries suitable for inclusion in automated routines.

Batik

The Apache Batik project is a complete implementation of SVG 1.1 in Java. The project’s rasterizer utility has traditionally been used to render SVG in publishing pipelines, most typically to convert XSL Formatting Objects (XSL-FO) documents into printed output. In general, the quality of the Batik rendering is quite high, and is particularly appropriate for generating images in raster formats such as PNG or JPEG from SVG graphics.

Batik supports nearly all features of SVG 1.1, but has not (at the time of writing) implemented CSS 3 features which you might wish to use in SVG for modern web browsers.

Once downloaded, Batik can be run as a Java archive file. The static renderer is specifically batik-rasterizer.jar, part of the Batik distribution. There are a number of options for controlling out‐

put file format, width and height, area, quality, output directory, and so forth. Invoking the rasterizer without arguments should give you the list of options.

LibRSVG

The LibRSVG library is part of the Linux Gnome project, and provides support within Gnome for static SVG images as well as a library that lets developers generate SVG in their programs. It can also be run as a standalone program called rsvg to generate PNG or JPEG images from SVG files. It supports core vector graphics, but not advanced effects. The LibRSVG rendering engine is used in numerous other open source SVG tools.

ImageMagick

ImageMagick is a “Swiss army knife” for command line manip‐

ulation of graphics, and is available on Windows, Macintosh, and Linux platforms. It can be used from a command line and also can be invoked from libraries in most modern processing languages, from C++ to Python, PHP, Ruby, and Node.js. Given this, it’s not surprising that it supports rasterization of SVG.

At its simplest, the ImageMagick convert command is trivial:

convert image.svg image.png

This converts the file indicated by the first argument from an SVG image to a corresponding PNG image. When it is available, ImageMagick will use Inkscape’s command-line interface to render SVG; in that case, it will support most SVG 1.1 features.

As a second effort, ImageMagick will try to use LibRSVG. If that is not available, ImageMagick has its own rendering tools; these have less support for advanced features such as filters and style‐

sheets. It is generally advisable to experiment with sample SVG images to see whether ImageMagick will meet your needs.

CairoSVG

Cairo is vector graphics language, used as a programming library in other software; it has implementations in many com‐

mon programming languages such as C++ and Python. Cairo graphics can be converted into vector files as PostScript, PDF, and SVG, can be output on various screen display modes on Linux and Macintosh systems, or can be used to generate raster images. The CairoSVG library, from the web design company Kozea, parses SVG files, and converts them to Cairo graphics;

the result can be used to generate PDF, PostScript, or PNG ver‐

sions of the SVG files. Most basic vector graphics features from SVG 1.1 are supported.

As you may have gathered, a limitation of all these rasterization tools is that they do not neccessarily keep up to date with the latest developments in other web platform specifications—if they even support the full SVG standard to begin with.

A final option for creating rasterized versions of SVG files is to use an actual web browser rendering engine. To do this from a server routine or other command-line interface, you can use the Phan‐

tomJS implementation of the WebKit browser engines. The sample rasterize.js script can be used to convert any web page or SVG file to PNG or PDF. PhantomJS can also run your own JavaScript code, such as a script to build an SVG visualization from a data file, and then save the resulting SVG document.

Similar “headless” versions of the other browser rendering engines have been proposed, with a headless Chromium browser expected soon.

With all these options for converting SVG to raster image formats, you may wonder about the reverse conversion. Can you create an SVG from a PNG or JPEG? That gets much more complicated.

SVG Snapshots | 125

Although SVG code contains information about how the shapes should look, raster images don’t contain information about the shapes they were constructed from.

Tracing or vectorizing tools use algorithms to try to calculate those shapes from the pixel data in a raster image, looking for high-contrast edges, then connecting them into smooth lines and curves.

The more comprehensive graphics programs, such as Illustrator and Inkscape, include auto-tracing tools. There are also specialized trac‐

ing tools such as Vector Magic. These can be particularly useful if you want to draw graphics by hand before scanning them into your computer and converting the drawings to SVG.

In document Using SVG With CSS3 and HTML5 (Page 125-128)