What are SVGs?
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.