Search code examples
performancesvgpagespeedgoogle-pagespeedpagespeed-insights

Should I serve SVGs at the correct size or should I shrink them and let the browser resize them?

SVGs are vectors so they can rescale in size without losing any quality.

Knowing this my mind says, why would I ever use an SVG at the correct size. It seems to me that the same size SVG at 100px x 100px is far larger in size than at 10px x 10px.

So then the question is should I go for a smaller file size and let the browser resize the image, or is it better to serve the image at the correct size so the browser doesn't have to do any rescaling (accepting that in many cases due to responsiveness it will have to do this either way).

I'm aware that this might fall into the category of micro-optimisation but it seems that many of my SVGs could be significantly smaller, and that might help with a Google pagespeed score.

Solution

  • Like you said, SVGs are vectors.

    should I go for a smaller file size

    You cannot shrink the file size of an SVG. The SVG's XML code remains the same even if you lower the SVG's stated DPI or pixel size.

    Will the SVG's file size change if the viewBox is changed?

    It usually won't, or at least not much. Here's a convoluted example in which it WOULD change.

    Here's the original ("small") version:

    <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect y="5" x="5" width="2" height="2"></rect>
  <circle cx="5" cy="5" r="20%" fill="white"></circle>
</svg>

    Now let's up the viewBox size. We need to proportionally increase the absolute coordinates of all elements.

    <svg viewBox="0 0 10000000 10000000" xmlns="http://www.w3.org/2000/svg">
  <rect y="5000000" x="5000000" width="2000000" height="2000000"></rect>
  <circle cx="5000000" cy="5000000" r="20%" fill="white"></circle>
</svg>

    The result is the same image, but 48 bytes larger (28%!). 48 bytes larger FOR NO GOOD REASON - the represented image is exactly the same, with the same level of precision.

    This example is convoluted because most SVGs won't be like this - they will use floating point numbers, and even if the decimal (the literal .) position shifts, the number of digits will not - so there will be little or no size difference.

    If you are changing the viewBox size and rescaling all of the values and do see a difference, then it is either like the convoluted example above, OR you are actually losing precision because the rescale is reducing the number of digits in the floating point values -- which would reduce the quality of the final image.