SVG Files → A Developer Perspective
Coming from an educational and work background in architecture, a field which has been wholly dependent on software applications for decades now, I have long been familiar with the use of both bitmap and vector graphics in the production of construction documents. Most CAD modeling programs utilize the latter, vector graphics being the ideal format for the speedy rendering of architectural drawings, with an incomparable level of precision. In my recent forays into full-stack software development I have discovered that the utility of vector image formats is equally strong in the coding world. Here I would like to explore the use of the SVG format as it relates to software, and how developers can create simple and scalable images for any program with relative ease.
Scalable Vector Graphics, or SVG, is a vector image format for 2-D graphics that are based on the Extensible Markup Language (XML) paradigm. They are the eminent graphics format for the web, developed by the World Wide Web Consortium in 1999. Essentially, SVG are ideal for any non-photographic imagery — icons, logos, animation, et al. The most salient feature of SVG images are their scalability — they uphold crisp resolution at any size. But what makes them particularly useful for web design is that they are optimized for search engines, they are smaller in file size than other formats, and they are programmable. We will touch more how SVG files work and on their programmability below, after a quick overview of image formats.
A World of Images
Two of the most common image formats are PNG and JPEG. Both are termed raster, or bitmap, images, in that they store image contents in a grid of small colored squares. This makes them necessary formats for highly detailed images such as photographs. The downside of these formats is that their resolution is essentially fixed at their creation: any zooming in on the image will reveal their grid-like structure. This is of course unavoidable for photographs. Yet for other images, an alternate structure may be used.
Vector graphics work much differently than raster images, operating on a fixed set of shapes, as opposed to pixels. They work on mathematical formulas to determine points and lines between points. This results in images which retain their form and resolution irrespective of size. Vector based images can also store color qualities as well as text. PDFs are a vector based format, in addition to SVGs.
A Programmer’s Fancy
As stated above, and if the name wasn’t a giveaway, the most defining feature of SVG formatted images is their endless scalability. Where this feature is especially important is in web design. The size of images view on the web is always changing, based on the browser window dimensions, the device and interface used, and as a result of the user zooming in and out at will. The ideal format would be one that allows images to be fully rendered at every stage.
There are a couple of other features of SVGs which make them integral to good web design: customization, scripting programmability, and search engine optimization. We will look at some examples below which highlight the straightforward customization process can be once we examine the inherent structure of SVGs. This format really shines in its scripting compatibility. SVG uses CSS for styling and JavaScript for scripting. They are simply text files, and may be manipulated with any text or code editor. This allows for screen reader capabilities, and the capacity to be indexed by search engines.
Anatomy of An SVG Image
As SVG files are text based, and are written in XML, they may be created in a code editor and then rendered to any HTML document. Thus they are human readable, and developers may make edits to the XML files directly. Any cursory search for SVGs reveals a wealth of reusable graphics to add to a project, each with the same capacity to be edited inside a code editor. There are also SVG sandboxes, where one may write code and instantly view the resulting image. Also, one need not be a proficient programmer to create images in a vector format. There are many programs, such as Adobe Illustrator, or the open source program Inkscape, which allow the user to draw and design first, and then save the file as an SVG, where the resulting file is converted into code.
An SVG can be written from scratch by simply starting a new file in any code editor or IDE, and saving it with a .svg extension. Following typical XML semantics, all of the code is wrapped inside opening and closing <svg> tags. Often metadata about the file is stored first, such as the id and creator of the file. Within the initial <svg> tag, the desired size of the image is specified with the “viewBox” parameter, with values given for height and width.
Next, any number and sequence of shape tags will follow, specifying basic features, such as circle, rectangle, and text tags. The properties of that shape, such as axial orientation, height, width, or text content, are stored within the angle brackets of the tag. Here is an example of three simple shapes and their corresponding code:
Much like regular HTML elements, properties of the components within an SVG can be styled using an external CSS file, with a class or id referencing that file. Or properties may simply be written in-line, or even by a separate <style> tag also within the SVG contents. In this sense the file structure is largely up to the designer.
The shape tags, while quite useful, used alone are rather limited; it is through the use of paths and curves that detailed designs may be created. In fact, upon opening a detailed SVG file, one finds that a majority of the design is usually generated within one or a small number of <path> tags. Here, lines are drawn to connect specified points, where ‘M’ and ‘m’ represent absolute and relative coordinates, respectively. Similarly, ‘C’ indicates the endpoint of a curve. Here is an example of this notation for representing linework:
The SVG Universe
The resulting code that makes up even a quite detailed SVG image is relatively small in terms of file size. This fact, as well as the other features of vector based graphics, make SVGs an immensely useful medium for programmers. They have a vast range of uses and compatibility, impacting every area of web design. Also, there is enough flexibility in the format that programmers are able to create their own for some contexts, and yet in other contexts they can search the web for highly detailed SVGs which have already been created. I hope this has been a useful introduction to this ubiquitous image format, and that the reader will be encouraged to make a few of their own. Thank you for reading!
