In this episode, we look at some of SVG's most compelling benefits, explain the difference between raster and vector, and finally provide a bit of SVG history.
WHAT IS SVG AND WHY DO YOU CARE?
If you've been keeping an eye on the "pulse of the web" these days, you've undoubtedly notice that SVG–spelled out: Scalable Vector Graphics–is experiencing an amazing resurgence on the web. Let's examine what exactly this SVG thing is, and why you need to start learning more about it now.
SVG BENEFITS
Perhaps you've already played around a bit with SVG–or, perhaps not–but, either way, it's useful to know exactly what benefits a technology brings to understand exactly how much time is appropriate to invest in it to get maximum ROI. Here are some of the more compelling ones you may be interested in:
Resolution Independence and Scalability–unlike their Rastercounterparts, Vector images don't have to resort to anti-aliasingand the edges remain crisp as you zoom in and out Dynamic–SVGs are interactive and can be manipulated at run-time via scripting or CSS Backed by a proper DOM-based API (this relates to the last benefit, but explains why SVG is so amenable to scripting) SVG supports the inclusion of text and raster images within a given SVG document so you get the best of both worlds if you need it Availability of client-side raster filter effects such as drop shadows, gradients, etc. Inline SVG is styleable via CSS (excluding some pesky browsers edge cases of course!) W3C Open Standard with excellent import/export capabilities ex. you can export an Adobe Illustrator file; import it in to Sketch or Inkspace, tweak some more, and then render it in a web browser Designer Friendly–designers can use tools they love like AI and simply export graphics to SVG SEO and Accessibility wins since the graphic image is semantically described by an underlying XML text-based structure Text–searchable, selectable, and translatable Reusability–any shape or group of shapes can be instantantiated multiple times These are just some of the benefits, but let's get in to explaining exactly what IS SVG next…
RASTER VS. VECTOR
To understand the Scalable Vector part of SVG, we need to understand what vector is, and contrast it to raster (the more common image counterpart in use).
Raster
A simple definition of a raster image is: a rectangular series of pixels, where each pixel defines an RGB color value. This is a simplified (if not dumbed down) definition, but will suffice for our purposes.
The series of pixels described above, is also known as a bitmap. Bitmaps are generally compressed for storage, and then decompressed by a viewing program as needed.
Some popular raster image formats are: JPG (or JPEG), PNG, and GIF. These image formats are prolific and, thus, support for raster images is ubiquitous. This wide-spread usage explains the excellent back support for raster images, and supporting legacy browsers/systems is pretty much a non-issue. However, raster images have some disadvantages:
Static–raster images are generally not self-aware, so you can't easily change them at run-time Pixelation–when zoomed, edges start to exhibit a "stair-stepping", or "jagged" effect. This is generally circumnavigated by means of anti-aliasing, a process which, essentially, detects and blurs an image's edges creating the optical illusion of smooth edges. But, as you zoom in, these sorts of techniques become less and less effective, and the eye is distracted by the rather ugly visual artifacts in the zoomed raster image.
Vector
A vector image is: a series of instructions that describe to a viewing program how to draw shapes comprised of lines and curves. These instructions map to a series of grid points (aka coordinates) where the lines or curves are to be drawn.
Rendering
Interestingly, the actual rendered vector image, is rendered as a raster image by the viewing program, since: all modern displays are raster-oriented
However, due to the way vector graphics are defined (as a series of commands or instructions at geometric points), the rendering engine can achieve feats such as zooming via some simple multiplication and a redraw. This fact, makes SVG wonderful when it comes to, ahem, scalability.
While vector-based graphics are not as ubiquitous as raster, they have some definite advantages:
vector graphics are object-based and thus self-aware (so a circle "knows" it's a circle and, as such, can be altered or morphed at run-time) resolution independence and scalability (Are we repeating ourselves!? Fine, but here's another compelling example for you: a printer can utilize its full resolution resulting in a sharper printed page).
Read the corresponding blog post at:
http://unicorn-ui.com/blog/what-is-svg-and-why-do-you-care.html
The short SVG "history lesson" was drawn from Doug Scheper's SVG workshop at frontendmasters that I recently attended:
https://frontendmasters.com/workshops/svg/
Music Attributions:
Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/
frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)
notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/
