6

Generally, when SVGs are displayed responsively, we only need to set the viewBox attribute on the <svg> and can entirely omit the width and height attributes (i.e. something like <svg viewBox="0 0 20 20"> is enough). So, I wonder how SVG images with width and height attributes omitted are indexed by a search engine like Google, i.e. with what size they are displayed in Image Search.

I did a little bit of searching, and it seems that they are displayed as follows:

  • if the graphic is wider than tall: width is 800px and height is set to preserve the aspect ratio
  • else: height is 800px and width is set to preserve the aspect ratio

On the other hand, SVG images with width and height attributes set seem to be displayed in Image Search with the size as indicated in the two attributes (e.g. <svg viewBox="0 0 20 20" width="100" height="100"> is displayed as 100x100).

I also found an SVG image whose width and height are set to 100% , and it is displayed as 2000x2000 in Image Search.

So, what is the best practice for the width and height attributes of SVG images? Should they be omitted, set to 100%, or set to some other value?

cute_ptr
  • 199
  • 1
  • 5

2 Answers2

5

While SVG's can be a purpose of their own, websites, accessibility readers and much of what you need to account for with SEO, is based on the standard IMG schema.

Because of this, it's best practice to do what search engines expect, which is to use the established good old IMG schema and all its attributes.

As SVG matures, no doubt we will see more robust image schemas develop, but for now, keep with the regular IMG schema that accessibility devices and all browsers understand.

Based on the above

Always define the width and height attributes of an image. This will help avoid unnecessary repaints and reflows during rendering.

Google Page Speed

enter image description here

If you don't markup code correctly using HTML height and width properties and it has an impact on your site, Google and other search engines will penalise you in search results.

enter image description here

Media Embedding

Furthermore, your images may not display correctly when embedding in applications or social media.

HTML width & Height Attribute

Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Sitespeed: Do images require width and height attributes?

When you include the image dimensions, the browser can draw out the "containers" that will hold the images, reserving the space for them while they download. The browser can then go on the paint the rest of the pages CSS and objects around those "containers" without having to go back and redraw the whole page once the images have downloaded and their sizes are then known.

See technical specification on W3C.

Electron
  • 314
  • 2
  • 6
1

Here's what I came up with when it comes to setting or not setting the width/height attributes on the <svg> element (which is inside the .svg file and has nothing to do with width/height of the <img> element whose src is set to that .svg file, just to be clear).

Not setting width/height attributes on the <svg> element seems to be the best choice if your SVG is responsive because: 1) when a user opens that SVG in a separate tab, the SVG will fill the entire screen, rather than being of fixed size and thus often being displayed either too small, or too big (and thus causing scrollbars to appear); 2) When a search engine accesses the SVG file, it does not see a width and height specified on the <svg> element, and thus that SVG is probably interpreted as a responsive SVG, thus the search engine chooses what's the best size to display it in Image Search (which currently seems to be 800px, at least for Google, but this may change in the future); 3) when such an SVG is included with <img>, and the <img> does not specify width/height attributes, then <img> will simply fill the entire available width. However, you are free to specify width/height on the <img> to any value you want, and it will be properly sized.

The only case I can think of when setting width/height on the <svg> might be useful is when that SVG is always supposed to be shown with that specific size, no matter what the screen size is (in other words, the SVG is not supposed to be responsive). Setting width/height will ensure that when a user opens the SVG in a separate tab, it will have the size you specified, search engines will index it with the size you specified, and when such an SVG is included with <img>, and the <img> does not specify width/height attributes, then the size of <img> will match the width/height specified in <svg>. However, if you specify width/height attributes on the <img>, and they don't match the ones specified on <svg>, the SVG will be properly resized to the size indicated in <img>, but since the SVG is supposed to have fixed size, if you decide to set width/height attributes on <img>, you probably want to set them to match the width/height attributes of <svg>.

cute_ptr
  • 199
  • 1
  • 5