Posted on

About the SVG file format



All the images on the Imagewheel website are uploaded in the SVG file format. SVG stands for Scalable Vector Graphics. SVG has a lot going for it. Here is a bit of an introduction.

The SVG file format can be identified by the .svg extension to a file name.

SVG is at its best when displaying 2D (two dimensional) images produced using vector graphics apps but it also handles most kinds of text. Vectors are paths that have a starting point, a direction and a distance to a second point. A complete vector drawing might include hundreds (or thousands) of paths. Modern vector-based software applications allow each path to be assigned a stroke, colour, shape, curve, thickness, and fill.  Another import feature of the SVG file format is the ability to animate elements and make them interactive!

Images produced with vector-based graphics are very different from images produced with devices or applications that use a raster file format, such as cameras and Adobe Photoshop, which describe an image as a grid of pixels.

In the case of SVG’s, all the information is stored as a text file in the XML format. XML (Extensible Markup Language) is a set of instructions for encoding documents in a form that can be written by humans and read by computers. It is, in short, a computer programming language.

This means that an SVG image can be edited either using a graphic drawing program like Adobe Illustrator or using an XML editor that works directly with the code such as Microsoft’s XML Notepad or a multifunctional editor like Aptana Studio.

Another significant feature of SVG files is that vector-based graphics can be scaled to any size by simply changing one instruction. This means that regardless of how you scale up, or zoom in, the graphic maintains mathematically accurate crisp lines and sharp transitions between shapes regardless of size. This means that vector files are well suited to both digital display and digital printing.

Zooming in on a SVG image shows more detail without any loss of quality.

The SVG file format comes into its own when used to display an image in a browser such as Chrome or Safari or to place an image into the design of web pages. When used for web design, CSS (Cascading Style Sheets) can also be used in conjunction with XML to add styling. This might sound a bit technical! What it means is that XML can be used to describe the data needed to display an image but CSS can then be used to describe how it should be formatted.

All images on the Imagewheel website are in SVG format because it allows the same file to be displayed in different forms suited to different purposes and different page layouts. For example, an image can be displayed on one page as is, then displayed on another with elements reorganized, animated or the whole thing made interactive.

Another benefit of the SVG format for Imagewheel is that it allows “security features” to be added to images to manage how images can be downloaded.

An example of this is that a watermark or a preview message can be displayed over larger versions of images displayed on the site to encourage users to download images with a proper licensing agreement.

Imagewheel makes SVG versions of all images available for download. This allows more inventive users to edit images and add features.  But if you simply want to drop an image found on Imagewheel into a written assignment or even a PowerPoint presentation then the JPEG, PNG or PDF formats might be better suited to your needs. You can read about these different file formats in other posts.

Best wishes. Ric Mann. May 2016