Mobile app version of vmapp.org
Login or Join
Rambettina927

: Should all SVG assets be designed in 1x? (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

@Rambettina927

Posted in: #Icon #Svg

(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)

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Rambettina927

1 Comments

Sorted by latest first Latest Oldest Best

 

@Berryessa866

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:



Which at a small pixel output size looks like this:



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:



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



We now have a nice crisp output:



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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme