About those vector icons
pushing-pixels.org
About those vector icons
1–10 of 41 posts
Re: About those vector icons
#2Long but good article.
Glad he got into (and linked to the excellent article about) font hinting, because that is of course the solution. A simple vector format is not enough, you need to define what parts should scale how, which are rigid, which are elastic.
I don't think higher resolution displays actually help, because the real limitation becomes the human eye. Though the new display could use the 'old' normal sized icons as small ones, your eye couldn't distinguish some of the details that worked before.
Anyways, it is an interesting problem and one that I don't envy designers for.
Re: About those vector icons
#3I'm glad to see near the end the mention of high-density displays. When designing icons, a 64@2x icon should be different than a 128@1x icon. Although the former is technically at 128, it is going to be displayed on a high-density display at a smaller size, and care should be taken to simplify embellishments and details that will just make it look too detailed when viewed.
For icon designers out there, I'm curious how many are already aware of this distinction and are designing icons accordingly?
Re: About those vector icons
#4The very meaning of the term “icon” implies a non-literal representation, and since there is no automatic way to transform high-res representation to low-res caricature, you end up with vector artists doing horrendous pixel art.
Pixel art is a very different medium from what they’re used to, and there are specific techniques that they haven’t learned, largely because they don’t even know such techniques exist. They don’t know how (or when) to antialias or dither by hand. They don’t know what banding is and why to avoid it, nor what selective outlining (“selout”) is and why they need it. They especially don’t know how to correctly choose a good, limited palette. All of these things taken together make for designers at best reinventing tools and techniques, and at worst making icons that suck.
But what can you do? Pixel art isn’t a popular medium, so the wealth of knowledge out there goes to waste. It’s such a pity.
Re: About those vector icons
#5Not sure why this can be a "solved problem" with fonts (mostly) due to intelligent hinting.
Is there nothing like "Hinting for SVG" or an SVG equivalent to "Multiple Master" fonts (https://en.wikipedia.org/wiki/Multiple_master_fonts)?
Re: About those vector icons
#6So it would seem the ultimate future-proof solution is to have multiple vector icons with different levels of detail, each targeting a particular set of actual rendered sizes. Then, when the platform vendor doubles pixel density on you, you simply use your current 32x32px-targeted vector design to render the new 64x64px icons.
Re: About those vector icons
#7Isn't this a little bit of inefficient over-optimization. Sure auto scaled vectors look more blurred than hand made bitmaps. But the important question is: do normal people even notice the difference in today's screens? At the end of the post, the author concludes that not yet. But he doesn't seem to back it up. And I don't mean to back it up by comparing vector and manual icons for videophile designers. But actually a/b test it with real users.
I know I personally cannot tell the difference between the example comparisons in the post. Not sure my users would. I'll probably a/b test it with them at some point to be sure. Until then, my impression is that vectors are a net positive.
Re: About those vector icons
#8Long but good article. Glad he got into (and linked to the excellent article about) font hinting, because that is of course the solution. A simple vector format is not enough, you need to define what parts should scale how, which are rigid, which are elastic. I don't think higher resolution displays actually help, because the real limitation becomes the human eye. Though the new display could use the 'old' normal siz…
Font hinting can be terribly difficult (more art than science) and incredibly time consuming. Matthew Carter designed a custom font for us and I've been involved in the process of its creation / tweaking over the last few years. Everything I've seen makes me feel like TrueType hinting experts are like the digital equivalent of Swiss watchmakers. I'd love it if more font "programmers" (the guys actually creating the font, not designing it) would tell their tales.
Re: About those vector icons
#9Symbian used SVG for all icons, for various screen sizes. Never looked especially good, especially so on the lower DPI screens.
Re: About those vector icons
#10I'd like:
1. native support for optional manual hinting vector icons
2. native support for optional auto-hinting vector icons
Auto hinting is not the ultimate solution, but it can get you part way there, just like with fonts.