A tutorial for working with scalable SVG graphics

Vector graphics explained in a few words

In contrast to “bitmap” or “raster” images, a vector based picture consists not of single pixels, but of “objects”. These objects may be modified in size, shape, color, and position – at any given time and without the loss of quality. That’s what makes vector graphics so special. In other words: there is no “resolution” in vector art designs. Any image may be rendered as large as the intended application requires it. As a result, vector graphics have recently become quite popular in modern, responsive web designs.

The most common proprietary vector formats are AI (Adobe Illustrator) and CDR (CorelDRAW). Opposed to these, the W3C (World Wide Web Consortium) has created and developed a new, open standard called SVG (Scalable Vector Graphics), about which this article gives some useful insights.

Viewing SVG graphic files

Virtually any modern web browser has native supports for displaying SVG graphics – be it FirefoxGoogle ChromeOpera, Safari or Internet Explorer. Simply open the file in your browser to see it in its default size. Yet, most desktop image viewers – such as XnView or IrfanView – are not capable of rendering SVG files. Here’s an example SVG image of a splash, which you may open right here in your browser, and it should look like this:

View SVG file in Chrome

SVG image in Google Chrome

Editing SVG graphics

Image editors, like GIMP, Paint.net, and Photoshop, can usually import SVG files as raster bitmaps. However, raster images lack the option of lossless object modifications. Instead, use Inkscape for working with SVG files – that’s a free Open Source vector editor. The program is available on all major operating systems – Windows, Linux, Mac – and there is also a portable version of Inkscape, which can be used on a USB flash drive.

Select object in InkScape

SVG vector editor Inkscape

Open any SVG file in Inkscape. By left clicking, you can select and resize the whole image. Click again, to see options for rotating and shearing it. Select specific parts of the image, by multiple left clicks. It should be a double click, but mostly, you need to click more than twice to select a single object. As depicted above, the selected object itself can be resized or freely modified. Change the color, border or add effects similar as it is done in a “normal” image editor. The same goes for text: select it, change it. Simple as that.

You may zoom in and out by using your mouse wheel and pressing Ctrl at the same time. Size only matters, when exporting an image into a PNG file.

Exporting a vector SVG to PNG bitmap

To export any part of your SVG sheet, select first all objects you want to have in your bitmap file. Inkscape supports export into the PNG format, including alpha transparency. To do so, choose in the main menu “File” the entry “Export Bitmap…”.

Export SVG to PNG in InkScape

Inkscape export function

In the export dialog, select width and height of the target PNG and choose a filename. After that, click on “Export” to create the actual PNG. Congratulations! You’ve done it! With that, you can create any size of any SVG/PNG image, be it a tiny 16×16 pixel wide icon or a large printed poster in a stadium. SVG will always give you the resolution and sharpness required for any purpose.


Leave a Reply

Your email address will not be published. Required fields are marked *