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?

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.

  • 2
    Setting width and height on <img> to avoid the weird jumping of content worked back in the day when responsive design did not exist. But today, to have a container for an image before it loads, a div is used which has height:0 and padding-top set to have the correct aspect ratio, and the image is then absolutely positioned within that div. This makes the container of the image responsive, rather than fixed size. Also, please add links to official pages to back up your statement about being penalized if not setting width/height on <img>. – cute_ptr Oct 11 at 16:49
  • 1
    By the way, in the question I am not talking about the width/height attributes of <img> but the width/height attributes of <svg> (which is within the SVG file referenced by <img>) – cute_ptr Oct 11 at 16:52
  • 1
    The Google Page Speed link I provided has a lot of info within. I will provide more details tomorrow. It’s 3am here, so probably not the best time to do anything detailed. As for the SVG, it’s the same mechanism. The browser needs to know what sizes to render the item. SVG is vector whereas IMG is rasta. I’ll explain more tomorrow. Good night :) – Invariant Change Oct 11 at 17:02
  • 1
    If you have a JPEG image, it has a specific width and height, and when indexed it will have that width and height. However, an SVG can have its width and height set to any value or completely omitted. So the question is about whether to set width/height on <svg> to some specific value or completely omit them. The question has nothing to do with width/height attributes of <img>. To better clarify what I mean: even if I set width/height on the <svg>, the browser will not know the size until it downloaded the SVG file. – cute_ptr Oct 11 at 17:21
  • 1
    4:20am and Im still awake :( Anyway, another reason it’s can harm SEO if you’re not using img schemas, is accessibility. Take a look a this Google Developers page. They clearly use the height and width attributes in their schema and for good reasons. developers.google.com/web/fundamentals/design-and-ux/responsive/… – Invariant Change Oct 11 at 18:22

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

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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