Here at Duckpin, I am a web developer first and foremost, but I also have had my hands in web design. As a result, it is hard to admit that I only truly understood the power of SVG about one year ago. I can attribute the first time that SVGs became more than just a another image filetype back to a talk that was given at a Charm City JS Meetup by Chris Yoolander about the javascript library, D3.js. He was explaining about how the library can take large amounts of data and use it to output vector art on your website. D3 stands for Data Driven Design. It blew my mind at the time, not only because I have never really paid much attention the SVG filetype when working in Adobe Illustrator, but also because I had just realized that I could edit the same file in a coding text editor and Adobe Illustrator. After this first revelation took place, much more research was done.
What are SVGs?
SVG, or Scalable Vector Graphics is a vector based image format that uses XML markup to output the points, lines and curves on your monitor. It can be treated like an html image file, called using the img tag, or the markup can also be embedded directly on your site. Since the code is so easily manipulated, it leaves itself to be transformed and animated by javascript. It also has a native animate feature which gives it more opportunity to have fun with. Needless to say, there are many very popular js libraries that use this type of image to make wild interactive experiences on your screen.
How to use SVGs
When thinking about SVG in the context of SEO and image formats, you should to take into consideration several factors that can affect performance. Do your images increase load times? Do they hide indexable text? Do they scale for mobile/desktop? And so on. Well, all of those factors are the major benefits of SVG. It is very lightweight and fast; most times, load times would be faster compared to optimized pngs/jpgs of the same image. You can embed text into SVG, and it is totally indexable by Google crawlers, while other image formats rely only on title and alt tags to get the point across. It also is infinitely scalable. Vector graphics are not based on pixels like traditional image formats, but based on points, lines and curves on a given relative dimension. That means that the more complex the vector art, the larger the file size, but once it is saved, it doesn’t matter how large the image is, it will always load just as fast. Therefore, there is always a certain size a PNG can be that is a larger file size than it’s SVG couterpart, no matter the complexity of the image.
Why SVGs Provide Performance
We have concluded that SVG is simply a better filetype for vector based web development and SEO for many reasons, but why did it take so long to gain attention? SVG was developed in 1999, back when load times were going to be absurdly long no matter what, and responsive websites did not matter because no phones or tablets had any internet capabilities. Working in pixel based programs, like Photoshop, was and still is the primary way designers give their developers website comps. Photoshop was designed to manipulate photos, not design modern, responsive websites. It also has extremely limited capabilities to save anything to an SVG format.
Almost every aspect of web design has changed since SVG was created and that is part of the reason that SVG is only really gaining popularity until recently. None of the benefits really became benefits until Google stepped up their SEO algorithms, sites became responsive, and load times became a make or break attribute to web design. It is time to break the mold of comping solely in Photoshop, slowly add in programs that are designed to handle SVG’s, like Illustrator, or Sketch.
Front end development is a constantly changing environment to work in, and that is a big reason I love it so much. It is rare that you find an old tech gem that impacts the way you design in a big way. Something that is so infinitely scalable, has all major browser support, can be worked on by developers and designers, and can be animated and manipulated natively and by javascript so easily should never be looked over. This old tech will bring your site into the future.