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.
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:
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).
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:
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.
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:
Read the corresponding blog post at:
The short SVG "history lesson" was drawn from Doug Scheper's SVG workshop at frontendmasters that I recently attended:
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/