Skill levels in Scalable Vector Graphics (SVG)
0. Unaware
Has not heard of SVG as a web technology.
Has not noticed the use of SVG icons/
images on web pages. Has not encountered .svg files in a file explorer, or ignored their existence.
May or may not know about vector graphics in general or other implementations of the concept.
1. Beginner
Finds and downloads SVG images like icons and clip art.
Puts them onto web pages using the
<img>tag, the same as with other image types (PNG/JPEG/ etc.). Understands that on high-pixel-density displays (device pixel ratio > 1, Retina, HiDPI), which are increasingly common, SVG images look sharper and better than old-school bitmap images that only target traditional low-resolution displays (around 100 DPI).
2. Intermediate
Hand-draws vector graphics using programs like Inkscape, Adobe Illustrator, LibreOffice Draw.
Edits vector graphics or SVGs made by other people to fit their own needs.
Effectively uses core features such as shapes, polygons, curves, line strokes, layering.
3. Expert
Hand-writes SVG XML code in a plain text editor (instead of using a WYSIWYG drawing program).
Intuitively visualizes (x,y) coordinates and accurately predicts the effects of graphical commands.
Understands advanced features like reusable definitions, clipping/
masking, filter effects. Selectively inlines SVG code into HTML pages to reduce loading time by reducing network round-trips.
Inlines SVG into HTML to stylize the SVG elements from CSS rules that are attached to the HTML page. (An SVG rendered using
<img>cannot be affected by CSS code in the HTML page.)Simplifies/
optimizes SVG code with respect to structure, shapes, attributes, groups, deduplication.
4. Master
Writes JavaScript code to dynamically generate SVG elements through DOM APIs.
Renders SVG images based on user-inputted data, results of API calls, or other sources.
Animates SVG images using arbitrary logic implemented in JavaScript, beyond the native capabilities offered by CSS and SVG (e.g. keyframes, transitions, paths).
Queries bounding boxes to detect the actual size of rendered text, then applies transformations to make them fit specific boxes.
Uses math functions as necessary to implement a layout. For example, an analog clock can use sines and cosines to describe the endpoints of the hands.
Motivation
Why am I writing about this topic? Web development is a popular field and career, both for hobby and paid work, and for self-study and paid bootcamps. Typical curricula (whether free or paid) cover the basics of HTML, CSS, and JavaScript, but few mention SVG and even fewer actually teach its internal workings. Yet I think SVG is an underrated, useful technology that deserves to be discussed and taught.
When it comes to drawing geometric shapes on screen, SVG is a lot less kludgy (and thus more elegant) than the alternatives:
You can draw rectangles, triangles, circles, and ellipses using only HTML (
<div>) and CSS (border,border-radius, etc.). But this technique is hacky and gets unwieldy with even a small number of objects, because the ability to draw simple shapes is a side effect of CSS features rather than a first-class feature. SVG on the other hand, is purpose-built for drawing shapes, and is the preferred solution for serious drawings.The
<canvas>element can only be drawn at run time using a bespoke JavaScript API, whereas SVGs can be statically declared in XML or be dynamically created/modified using the XML DOM API. Worse, because a canvas is a bitmap, it necessarily becomes blurry or pixelated when scaled up. If you wanted a canvas’s pixels to always line up one-to-one with actual screen pixels (not CSS pixels), you have to write and test a bunch of extra, fragile code. Whereas for SVG, the browser is responsible for always rendering the vector graphics at the native screen resolution, and it does a good job at this with no extra effort from the web developer. Collections of icons are often bundled into a custom font, and then individual icons are rendered on screen in the form of textual characters. This is kludgy in many ways – such as the icon’s character code making no sense in Unicode, only allowing monochrome (one color or transparent) graphics in legacy fonts, being affected by OS-level subpixel font rendering techniques like ClearType, relying on CSS code to declare the icon font, not being easily viewable or editable because fonts are binary files, and many more issues.
Some authors provide bitmap icons in a (finite) number of different sizes, like 32×32 pixels for low-resolution displays, 64×64 for high-res, etc., and deliver them through techniques like
imgset. But this creates a mess in managing multiple files for a conceptual single image asset, and still doesn’t cover resolutions that are in between the offered sizes or resolutions smaller or larger than the most extreme sizes.
Notes
The skill levels are more or less cumulative in few senses. Someone who is learning about SVG technology is likely to start with the easy techniques having fast payoffs – like browsing for SVGs and linking to one using an <img> tag. As they become more familiar and comfortable, they will experiment with more difficult techniques that are required for more specialized situations. Another sense in which the skill levels are cumulative is that many skills build upon other ones – e.g. writing SVG code to draw shapes means that you understand how shapes work. Yet another sense is that at any level, lower-level skills appear trivial and automatic – e.g. someone who can create an SVG can surely download one instead.
SVG lies at the intersection between art and code. On the art side, you can draw vector art in a graphical editor program and adjust shapes until they look right; you can create complex and beautiful art this way. On the code side, you can programmatically generate images based on dynamic data (e.g. rendering a graph of a numerical time series); you can write code to draw mathematical objects like fractals that are difficult to do by hand in a graphical editor. Someone who understands art and code can produce more impressive works with SVG than someone who only does art or someone who only codes.