OK, I take back what I said. SVG can be used to create a single asset that looks good at ALL resolutions; it's just going to take some work and possibly add too much bloat to be worth it in some cases.
So let's say you have a 16px icon design, with an element 7px wide, and you want a 24px version of that icon. The problem is when you scale an odd-numbered-height or width element by a factor of 1.5 in this example, you get an element with a height or width defined as a non-integer (10.5px wide in this case), which is when anti-aliasing kicks in and replaces that extra .5 pixel of element and .5 pixel of background with one pixel of element at half opacity. this makes it look fuzzy.
What you need to do is have a media query like this in the SVG file:
<style>
@media screen and (max-width: 24){#element {width: 10px}}
</style>
Or maybe:
@media screen and (max-width: 16){<shape id="element" width="7px"</shape>}
@media screen and (max-width: 24){<shape id="element" width="10px"</shape>}
I haven't played with it to be sure yet, but something like that might allow you to set the width, height or radius to an integer for the sizes you care about.
Complex paths would still likely need to be redrawn for various target sizes to get rid of the more egregious anti-aliasing issues. In that case, we're adding bloat to everyone's SVG files to serve the needs of different clients. Maybe we're still better off with different SVG files served to different clients when we pass a certain threshold of duplicated content within the SVG, and duplicated paths would seem to me to be in danger of crossing that threshold.
WiseWeasel|14 years ago
So let's say you have a 16px icon design, with an element 7px wide, and you want a 24px version of that icon. The problem is when you scale an odd-numbered-height or width element by a factor of 1.5 in this example, you get an element with a height or width defined as a non-integer (10.5px wide in this case), which is when anti-aliasing kicks in and replaces that extra .5 pixel of element and .5 pixel of background with one pixel of element at half opacity. this makes it look fuzzy.
What you need to do is have a media query like this in the SVG file:
Or maybe: I haven't played with it to be sure yet, but something like that might allow you to set the width, height or radius to an integer for the sizes you care about.Complex paths would still likely need to be redrawn for various target sizes to get rid of the more egregious anti-aliasing issues. In that case, we're adding bloat to everyone's SVG files to serve the needs of different clients. Maybe we're still better off with different SVG files served to different clients when we pass a certain threshold of duplicated content within the SVG, and duplicated paths would seem to me to be in danger of crossing that threshold.
WiseWeasel|14 years ago