Effect resizing SVGs has on SEO

Question

Does loading an SVG smaller than the original resolution have impact on your SEO?

As example:

index.html:

<img src="test.svg" width="10" height="10"/>

test.svg (original size: 150x150):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
   <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
   <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
</svg>

Answer 1

Nowhere has Google mentioned not to resize SVGs in their public documentation/comments. The whole point of SVGs is that you can resize them easily while maintaining a low transfer overhead and high quality. While generally it's bad practice to distort image quality by resizing jpgs or pngs, there's no logical reason for them to penalise SVGs being used as intended.

However, you may incur a penalty dependent on an image's use in the design. There are a number of SEO factors that take into account page user friendliness. With that in mind, here's a checklist of Google approved factors that are considerations on page load for image content:

• On Mobile: Is the image interactive, and is it too close to similar elements?
• Is the image blocking interactive elements, like a pop-up or interstitial?
• Does the image have valid alt text? Or structured data associated with it?
• Is the SVG necessary? Could your reduce it's size or exclude it?
• Do you need lazy loading to decrease page load time?