What’s Your Vector, Victor? SVGs And You

When people think of pictures what comes to mind may be the classic Polaroid, or possibly images on Facebook or Instagram. While they both serve the purpose of keeping our precious memories with us, an important commonality is that they are both made up of many, many dots. Modern printed photographs are made up of dots and if you had super vision, or a low power microscope, you could see the individual dots of ink that blend together to hold some of our most cherished memories. The digital images we see are made up of many pixels. We observe these images as pixels on a screen, and essentially that is exactly what they are, a collection of pixels. A fundamental issue of both digital and real images is that they cannot be scaled without degrading in quality. In the digital age many graphical images are not photos but are simply shapes or icons. To use these icons we may need to scale them up or down, but we begin to lose quality.

Enter the vector. You have probably heard of vectors in some capacity, but in vector graphics, vectors are equations that are used to represent a visual object. Since these objects are not defined by pixels but by equations they can be scaled infinitely without any quality degradation. A good example of these vector graphics are fonts. Ever notice how you can have giant fonts and the tiny version of the same font will look just as good? Vectors! A common form of these vector graphics are called SVGs or Scalable Vector Graphics. SVGs are defined as sets of points along paths or shapes that make up the visual image that we see.

A huge plus of SVGs over images is that we can manipulate them with CSS or Javascript. This can make them interactive and animated. There are some stunning examples around the web but we have a great one ourselves on the landing page of the blog! Another advantage of SVGs is that they can be embedded directly into webpages, so you don’t need to serve another request for a user to load an image.

How does this affect the average person? Leveraging the ability of SVGs to be embedded can decrease load times, and make images look better. Sounds like a win-win! Another great use of SVGs is in logos. If you have a logo designed or make one yourself, make sure to save a copy as an SVG. You’ll have an infinitely scalable version that will be perfect when you’re building a website or getting signs or shirts printed.

If you don’t get this done when your logo is first made you can use a program like Adobe Illustrator or Inkscape to create it yourself.