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

Question

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.

Tadzhik

The biggest mistake with SVGs is to NOT reduce precision with tools like jakearchibald.github.io/svgomg – Stirring

@Danny'365CSI'Engelman just to clarify - you're saying that one should reduce the precision, right? Won't argue there. – Programme

Yes, reduce precision; and if you need precision eg: M20.3 7.9L30.7 21.3 then consider multiplying the viewBox by 10 – Stirring

Answer 1

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.

Programme

If you look at the KB size, it changes based on the size of the viewBox. Is that true or have I got that wrong? – Tadzhik

@Tadzhik it's possible, but I think that's mostly wrong. I'm going to update the answer since I don't have enough room here – Programme

@Tadzhik updated the answer, hope that clarifies - let me know if I'm wrong about anything – Programme

Your image is only 48 bytes larger as you added 48 bytes worth of characters (6 zeros x 8 places)! The actual size in effect does not change as you first said. – Pleasure

@GrahamRitchie exactly the point I'm trying to make - should I clarify that? – Programme

Possibly just because that 28% larger looks scary and we all know that people don't read things properly :-P hehe. I was just pointing out your first answer was spot on anyway! – Pleasure

haha :) Maybe this needs some bold disclaimer next to it – Programme

the amount of times I add disclaimers is actually quite worrying lol! +1 you as realised I had not done so :-) – Pleasure

@GrahamRitchie well now my answer has more upvotes than yours, which is not right because yours actually answers more of the question than mine. I guess none of us really play this game for the magical internet points, anyway, though they do help boost my self-confidence – Programme

Oh no, I am a narcissist, the points matter to me far more than they should 🤣🤣 I might retract my vote then. 😋 – Pleasure

Answer 2

When your SVG "size" matters

Sizing on SVG is pretty arbitrary as it is a vector format, the layout is done with maths and so isn't dependent on the size you specify.

However, if the SVG is rendered on the page and then gets resized size it can make a difference at the rendering stage.

This is because all SVGs are built and then converted to raster images for display. So if you have a gigantic image as you have set the size using cm and the browser has not yet calculated it's final width you can end up in a scenario where there is a lot of wasted rendering work done.

This is an edge case so it is unlikely to affect most sites, especially if their critical CSS is inlined etc.

The only other time it matters is if your CSS fails to be applied correctly for any reason. But on most sites gigantic SVGs are not going to be the biggest things that are broken if the CSS fails for any reason so yet again, super minor point.

In Summary: Do not worry about this, it is not worth the effort in 99.9% of cases and will perform equally well.

Optimising SVGs for performance.

SVG optimisation is more about removing unneeded nodes (so if you are displaying an SVG at a 10px by 10px size it may be worth removing some nodes and simplifying the SVG to save bytes and rendering complexity at the expense of detail.) and optimisation of the SVG by simplifying complex paths and removing bloat.

A great tool for minimising an SVG is SVG OMG, that is where you will see the performance gains from fewer bytes and simplified paths etc.

A final thought

I have a site that is very heavy on SVG, other than DOM complexity it's size is tiny at only 80kb gzipped (as SVGs can be minified and Gzipped as they are just text), I would imagine your time would be better spent optimising elsewhere unless you are already scoring 95+ in Page Speed Insights.

Pleasure

I thought this might be the answer. I'll try SVG OMG (hillarious name). Your site is awesome. – Tadzhik

Thanks Eoin, SVG OMG is great so I hope it saves you a few KB! Good luck with the project(s) you are working on! – Pleasure

Great answer! My answer basically addresses/nitpicks only a small part of the question, so I'm glad that someone else (you) were able to provide the rest of the info. (and Eoin is right, your site is awesome!) – Programme

Thanks for the link to the SVG OMG tool. My current SVG was created in Photoshop and has a viewBox="0 0 3813 688" considering it only loads on my site at 220x40px should I first recreate the SVG from Photoshop at the exact physical size before I send it through SVG OMG? My current SVG is only 2.8kb and SVG OMG can take it down to 1.6kb. – Polak

Your viewbox doesn't matter with SVG that much, all it is doing is defining "hey, please show any paths that appear within these coordinates". So it doesn't matter if your SVG viewbox is smaller. What matters is the number of paths and points on those paths, which SVG OMG will help with so I suppose the short answer (especially with a 2.8kb file) is just leave it as it is and run it through SVG OMG. – Pleasure