Skip to main content
Webmasters

Return to Question

Tweeted twitter.com/StackWebmasters/status/1050446057358983169
added 29 characters in body
Source Link
cute_ptr
cute_ptr
  • 189
  • 1
  • 4

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

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"> will beis 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 sizevalue?

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. After a little bit of searching, 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"> will be 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 size?

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?

added 29 characters in body
Source Link
cute_ptr
cute_ptr
  • 189
  • 1
  • 4

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 wonderedwonder how SVG images with width and height attributes omitted wereare indexed by a search engine like Google, i.e. with what size would they beare displayed in Image Search. After a little bit of searching, it turned outseems that they are displayed as follows:

  • if widththe graphic is biggerwider than height,tall: width is 800px and height is set to preserve the aspect ratio
  • if height is bigger than width,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. an SVG with width and height of 100px<svg viewBox="0 0 20 20" width="100" height="100"> will be 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 particular size?

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. So I wondered how SVG images with width and height attributes omitted were indexed by a search engine like Google, i.e. what size would they be displayed in Image Search. After a little bit of searching, it turned out that they are displayed as follows:

  • if width is bigger than height, width is 800px and height is set to preserve the aspect ratio
  • if height is bigger than width, 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. an SVG with width and height of 100px will be 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 particular size?

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. After a little bit of searching, 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"> will be 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 size?

Source Link
cute_ptr
cute_ptr
  • 189
  • 1
  • 4

Is setting the width and height of an SVG important for indexing?

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. So I wondered how SVG images with width and height attributes omitted were indexed by a search engine like Google, i.e. what size would they be displayed in Image Search. After a little bit of searching, it turned out that they are displayed as follows:

  • if width is bigger than height, width is 800px and height is set to preserve the aspect ratio
  • if height is bigger than width, 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. an SVG with width and height of 100px will be 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 particular size?