(first, sorry if that's a really beginner question but the world of SVG's seems pretty confusing).

I have a couple of SVG icons that are designed at a baseline 48x48 or larger but need them to fit designs with 16x16 as a 1x. Theoretically, they should just scale/up down as we want fit but when they do, they seem a bit blurry. Is the only solution to redraw them all into 16x16 baseline?

(side note: I was always under the impression that when working with SVG you always need them designed in 1x so then can scale up nicely, but when I started to play a Sherlock and use 'inspect element' across the web, I often find the SVG bigger than the actual design (web) so maybe my understanding is crooked)

  • SVG scales as best as it can. The small error can only come from rounding differences, which are more apparent at small sizes Feb 1 '17 at 0:00

Should all SVG assets be designed in 1x?

No. In theory you can design your SVG at any size you want and scale your output to whatever size you need... they are Scalable Vector Graphics (SVG) after all.

...designed at a baseline 48x48 or larger but need them to fit designs with 16x16

There's your problem. The only time scaling really becomes an issue is when you're intending to display your SVG at smaller sizes. This is just a consequence of the fact that you're viewing your images on a display made of pixels (so a limitation of your display, not your image).

We can better see what's going on if we look at an example. Take this:

enter image description here

Which at a small pixel output size looks like this:

enter image description here

Not great. If we take a look at the paths over a pixel grid we can see why — there simply aren't enough pixels to accommodate our paths and nothing is aligned to the pixel grid:

enter image description here

Lets make some quick adjustments and snap everything to our pixel grid:

enter image description here

We now have a nice crisp output:

enter image description here

So in a roundabout way, yes you'll probably have to redraw (or at least adjust) your icons to the size you need. Or live with the apparent loss in quality.

  • Thank you @Cai for a great example! This is exactly what is happening! Scaling up works like a charm but scaling down to a rather tiny size makes the quality bad. In your example - if you would now use a corrected tiny icon and scale it further up, wouldn't it look a bit less detailed than the original in the bigger size (to rephrase - in cases like this, would you still prepare separate assets for different sizes especially when dealing with more complex drawables or is there a smarter way around it?)
    – vinylova
    Feb 1 '17 at 8:32
  • 2
    No smarter way around it really, no. Either you live with a loss of quality at smaller size, a loss of details at bigger sizes, or create multiple assets. As scaling up isn't an issue though you should only need one for the smallest size and one for everything else.
    – Cai
    Feb 1 '17 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.