svg

scalable vector goodness

Vectors break through a web of pixels

Most computer graphics are done in pixels with bitmaps (a map of bits...), sometimes called raster graphics (rasterize anyone?). Tiny dots given a color value that when put together with many more tiny dots create the images we're used to seeing on our televisions and computers. They are powerful, versatile and the amount of dots per image, photo and can be displayed in a square inch are constantly increasing.

However, all of that precise power for creating graphics with photo-quality comes at a price...file size. Each pixel's value has to be stored in memory and the more pixels you have, even with compression algorithms, still adds up quickly.

Enter vector graphics. This is what Illustrator is famous for. Illustrating icons, artwork, logos, diagrams, and very complex artwork, but not photography. The beauty of vector is that instead of each pixel being saved to memory, the math of the curve, the math of the color value changes is stored instead. Which allows infinite scaling without a loss in quality. Although it's not for everything (like photographs), it does come in very handy for logos, certain artwork styles, icons, shapes and more. Allowing one asset to be used for mobile, desktop and at any size and screen resolution without a loss in quality and maintaining a relatively small file size.

There is also the ability to use CSS to manipulate them. One asset, used many times, in different ways, sizes, colors and more.

See the Perdue logo and the elements in the home hero slider on the new site: http://perdue-fresh.marriner.com/
See the Marriner logo on our current site: https://www.marriner.com/

Was this post helpful?

Last modified: Wednesday, March 27, 2019 at 6:10 pm