8

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>?

1
  • 1
    Are we talking about word art? It is explicitly easy for search engines to read the text within an SVG ... If the image is a cat then any type of image should have the alt="cat" attribute and hold the same weight. Dec 8, 2022 at 22:51

3 Answers 3

11

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.

4

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.

4

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.

1
  • This answer is correct, but likely misleading. Google has been processing images to extract meaningful data - and I'm not referring only to EXIF data, but actually the meaning of the picture - from the actual image for a very long time (Thats how Google Image search is powered).
    – davidgo
    Sep 27, 2023 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.