Generally, when SVGs are displayed responsively, we only need to set the
viewBox attribute on the
<svg> and can entirely omit the
height attributes (i.e. something like
<svg viewBox="0 0 20 20"> is enough). So, I wonder how SVG images with
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
800pxand height is set to preserve the aspect ratio
- else: height is
800pxand width is set to preserve the aspect ratio
On the other hand, SVG images with
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
I also found an SVG image whose
height are set to
100% , and it is displayed as
2000x2000 in Image Search.
So, what is the best practice for the
height attributes of SVG images? Should they be omitted, set to
100%, or set to some other value?