This week in my Web Graphics Software class, we briefly covered the subject of Scalable Vector Graphics. My interest piqued, I found myself turning to the internet to dig up more information on these SVGs.
Scalable Vector Graphics as defined by Adobe are essentially a language rather than straight graphics. This language breaks down images and describes them with vector shapes, text, and embedded raster graphics. These SVGs are resolution independent, high resolution dots per inch graphics that can be used on several different platforms in a compact format. Thanks to the fact that SVGs are composed of a fixed set of shapes rather than a fixed set of pixels, they can be scaled up or down without losing detail or color. Each shape within these graphics can be animated, bringing new life to graphics without losing quality. Scalable Vector Graphics, when loaded in a browser with proper support, do not require plugins and they render more reliably.
Unfortunately, there are some downsides to using SVGs. Though many internet browsers used to have no Scalable Vector Graphic support, most browsers now have at least some form of SVG support. This support, however, is still limited, and sites that are making attempts to use SVGs still provide raster versions of their graphics.
Sure there are several other ways one could make scalable graphics, but SVGs are most likely the cleanest and easiest way to create these types of images without having to worry about pixel loss and distortion of the image. One could simply use CSS to create a scalable graphic but image distortion would still be a problem .
Personally, I like the idea of SVGs. They seem like a stable way to create scalable and responsive images without having to worry about extra code in the CSS and without worrying excessively about image distortion and loss. It’s a shame that more browsers don’t fully support scalable vector graphics.
Want a quick tutorial on SVGs? W3schools has a brief tutorial here!
Until the next post, readers! Have a great week!
SAikins Designs 