Introduction to SVG

What is SVG?

SVG means Scalable Vector Graphics and it is a XML-based markup language for describing two dimensional computer graphics. It also have support for interactivity an animation. SVG is an open web standard with official specifications and it is wideley supported by all modern browsers.

In general, a vector graphics is a form of computer graphics in which visual images are created from geometric descriptions defined in a Cartesian plane. A computer takes those descriptions and render its content accordingly. As a result, vector graphics are scalable, portable and they can be drawn optimally on any screen size. By contrast, raster graphics, which is another form of computer graphics, are defined by the state of every single pixel that compose them. Thus, they are more dependent of the screen size of the screen where they are rendered and it is not warranted that the will be well drawn.

On the other hand, raster images use pixels (picture elements) to express its content. In general, a pixel is considered the smallest unit of a digital image. So, raster images are represented by the state of an array or a matrix of pixels, each one having its own specific state. The pixel’s state is defined by the numeric value of each of the parts that compose it. For example, in a RGB representation of the state of a pixel, there are three numbers in the integer range of [0,255] each one representing the Red, Green and Blue channer or state of the pixel. With this combination of states we can represent up to 16.777.216 colors. In that way, almost every quality of raster images is defined in terms of the pixels that compoose it. For example, the quality of a raster image, its resolution, is defined in terms of its number of pixels as a pixel density and its bit depth represntation.

As a result, raster graphics are represented as a composition of the state of its individual pixels, and vector graphics are represented by computational descriptions of the images but not by describing the state of each pixel. The following image is a vector graphic representing the official symbol of the SVG format. As an experiment, you may want to increase o decrease the screen size of your device and you may expect to always have a good quality in the image.

The Mathematics of SVGs

Vector Graphics are based on analytic geometry. In that context, a line, a shape or a path is defined as a set of points in a two dimensional geometric space. In the case of SVG, each point is defined as a 2-tuple (x, y) with each component representing some the state of one of the dimensions of the geometric space. In addition, all kind of shapes are defined from a set of special points called vertices. Thus, in the SVG world, it is not necesary to define the state of every single pixel in order to form graphic representations, but that job is done by defining some vertices, paths traversing them and other variables like color, fill and stoke for example, so, in that way the computer can form and render an image by interpolating those definitions to a graphics diplay.

The fundamental geometric primities of the SVG format are: a single point, a line segment, a polygonal chain and a polygon. Examples of polygons are the triangle, square, pentagon, and other regular polygons like the hexagon. Likewise, there are also irregular polygons and some primitives like circles, ellipses and bezier curves. From those mathematical descriptions, computers can draw images of great quality and flexibility, allowing illustrations and other developments to be ported anywhere regardless the size and quality of the displays.

Going deeper in each of the primitives and the mathematics behind the vector graphics is matter of other seeds. For now, this high level description is just enough for this introduction, but the main point is that vector graphics are forms from mathematical descriptions.

Advantages of SVG

SVG has some advantages compared with raster graphics. One of the main advantages is its scalability. Because SVG does not depend on a the particular state of some set of pixels, its size can be recalculated for the computer in an optimal way without losing quality. The file size of SVG files is typically smaller, compared with raster formats. On the other hand, SVG files can be compressed and have open standars, allowing them to be well suited for the use in the Web context. Vector graphics can be edited with ease compared with raster graphics, and its resolution does not depend on its individual components. SVG can be animated using CSS or JavaScript so they can reach every audience the Web has already reached.

In contrast, raster graphics can have more expressive power than vector graphics because with pixels we can have more control to specific contorns and colored details. That is why raster graphics are very well suited for photography and some other forms of art where every detail counts. Vector graphics are better for illustrations used in designs, logos, book or magazine designs, and they are good for be printed in any size. Animations created from vector graphics are easier than animations from raster graphics. In general, the latter needs a more specialized software to be animated while the vector graphics uses open standards, so they are more accesible to the general public. Sometimes vector graphics like SVG of PDF are used as the default format to share information made in private or closed standards.

A Brief History of SVG

Vector graphics existed since the 60’s of the XXth Century, but the idea of build a new specification of vector graphics specifically designed for the Web as an open standard started at the end of the 90’s. That idea of the creation of a new standard for the open Web was the origin of SVG and it has been developed within the W3C since 1999. Six competing proposals for vector graphics were submitted to the consortium, but the SVG working group decided not to develop any of the six proposals, but create a new one informed on the submitted ones.

From the Autodesk, HP, Macromedia and Microsoft proposal, a compressed path syntax and elements influenced the specification of SVG. A compact syntax offered better file size, making it very suitable for Web deployments. From the Adobe, IBM, Netscape and Sun proposal, the working group took the coordinate system, transformations and the color space. After the new definition of a vector graphics representation, little by little the browser vendors started to natively support the format, paving the way for a wider adoption and further development. That is the secret origin of SVG according to the W3C: an informed mixture of features for the sake of preservation of the open Web.

The Adobe, IBM, Netscape and Sun proposal was named Precision Graphics Markup Language (PGML). Here I am going to point out some of the main points of the proposal taken from the official working documennt. PGML is a 2D scalable graphics language designed to meet both the simple vector graphics needs of casual users and the precision needs of graphic artists. PGML uses the imaging model common to the PostScript language and Portable Document Format (PDF); it also contains additional features to satisfy the needs of web applications. One of its key design principles is compatibility with already existing imagining models. In addition, it was intended to satisfty three types of web page creators: those who wanted to hand-code its graphics in a text editor, those who wanted to generate images via client or server applications, and those who wanted to create their graphics via graphics authoring applications. The last, but not least design principle was intention of compatibility with all related W3C standards effors. As you can see, PGML was designed for contributing with the open standards and really make a contribution to the openness of the Web.

All of the six propoals had a common goal: fulfill the requirements for scalable graphics for the Web. Those requirements were specified in 1996 under seven categories: open specification, graphical facilities, interaction, metadata, authoring tools and browsability. Here are some of the requirements grouped by categories:

Open Specification

Graphical Facilities

Interaction

Those requirements reflect the initial and important push for an open Web standards for Web graphics since the beginning. Compatibility, integration with existing technologies, openness, inclusiveness, availability were core principles that guided the creation of the SVG format. Sometimes it is necessary to remember that technology is not just an mere artifact, but a mirror in which humanity reflects itself.

Specifications and Standards

According to the W3C standards and drafts, SVG has three official standards and one candidate standard:

In the current official standard, Scalable Vector Graphics (SVG) 1.1 (Second Edition) (2011), SVG is defined as language for describing two-dimensional graphics in XML. SVG allows three types of graphics object: vector graphics shapes like paths, straight lines and curves; images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively or via scripting. Event handlers can be attached to events like onmouseover or click through a suplemental scripting language which accesses the SVG DOM. The MIME type for svg is “image/svg+xml”, its file extension is .svg and its compressed file extension is .svgz

The current standard defines SVG as Scalable Vector Graphics meaning by Scalable the quality of increasing or decreasing uniformly, ie. not being limited to a single, fixed pixel size. SVG scales to different display resolutions, they can be displayed on different sizes on the same document. SVG is also scalable because a SVG content can be a stand-alone graphic or can be referenced or included inside another SVG graphic. The meaning of Vector Graphics is that they are abstractions that contains geometric objects like lines and curves as we already reviewed. Finally, the Graphics part in SVG means a rich XML structured description of vector and mixed vector/raster graphics.

Other important concepts in the SVG standard is the concept of Graphical Objects. SVG models graphics at the level of graphical objects rather than individual points. For example. SVG provides a general path element, which can be used to create a huge variety of graphical objects, and also provides common basic shapes like circles, ellipses, lines, polygons, polylines and rectangles. SVG also provides fine control over the coordinate system in which graphical objects are defined as well as animations, fonts and raster effects. Ultimately, SVG is a well crafted concept for vector graphics objects that combine availability, compatibility and flexibility.

Illustration by Wahyu Setyanto on Unsplash

Conclusion

The integration of SVG and the Web allowed the growth of a new era of digital graphics. Designers and other creatives started to develop ideas that looked well in any device. That independence helped to integrate SVG into user experiences enhancing web design and applications. Little by little, SVG and other vector graphics formats became a way to express ideas and create interactive content through animations and outstanding graphic designs. The industry of Web design, UX and UI started to grow and since then SVG and other vector graphics formats are used everywhere in marketing, branding materials and data visualization.

This history is just starting to take shape and further developmets are coming for sure. For now, SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group.