Is SVG better for SEO than other image formats?

Question

While reading an article on the internet I read that SVG is better for SEO than other image formats. How true is that? Also, when adding an SVG image to a website should it be added as <svg> or <img>?

Answer 1

In the vast majority of use cases, SVG does not gain any special benefits over the other image formats in terms of SEO. However, SVG images are often smaller than their counterparts in other image formats, improving page load times which benefits SEO indirectly.

One thing that SVGs are not that much better at is letting search crawlers index non-image content embedded within them. While crawlers may index textual content, they do not follow links, and they cannot otherwise make sense of an SVG document's structure.

The question of whether to use <img> or <svg> is mostly equivalent to the question of whether it makes more sense to link your images externally by using <img>, or to inline them by using <svg> (you can also inline them by using <img> with a data URI, but it's not recommended as it increases file size and defeats the purpose of SVG's text-based format). 90% of the time it makes the most sense to link your website's images externally by using the <img> tag.

Also note that inlined SVG images are not eligible for inclusion into Google Image Search, only images with their own path on the server are eligible. So if you want your SVG images to show up in image search, be sure to link them externally using img tags.

There is also a third option for embedding which is to use an <object> tag, but that should be used only for SVGs that have scripting or interactive content, and is beyond the scope of this answer.

Answer 2

To expand on Maximillian's excellent answer, it's important to note the following:

The smaller size of SVG's only holds for illustrations, like logo's and other images that consist of a comparably small amount of shapes and colors. It is utterly unsuitable and consumes a rediculous amount of resources when used for photographic imagery. (Or it will simply embed the bitmap thus negating the benefits of SVG altogether).

The reason for this is the difference between vector based images and bitmap based images, witch is way too large a subject for an SE answer but well worth educating yourself about if you haven't already.

Answer 3

One advantage of SVG is that the text stays with the image file, if your logo ends up in a Google image search for example. The point here being that if the image is embedded in HTML then the alt text does not necessarily travel with the image if it is copied and stored elsewhere ( for instance in Google's image repositories). You might assume that the alt text is recorded by search engine spiders and kept in sync with the image but that is not guaranteed and certainly not in the case where fans of your web content copy the image and make their own links - you then lose all control of your alt text content staying with the image.