![]() ![]() For example - three 1-pixel strokes set 3 pixels apart generates a spacing of 2 pixels between strokes: do you consider that as 1 pixel foreground strokes or 2-pixel background strokes? On the other hand, if you have icons that appear on both dark and light backgrounds, you'll probably find that while 2-pixel strokes look chunky on a light background, then conversely 1-pixel strokes will appear harder to see on dark backgrounds (similar to text).Īs a compromise, I prefer to use 1 pixel strokes for an outline shape and a mixture of 1 and 2 pixel strokes to differentiate the character of different parts of the icon, including differentiation of foreground and background elements within the icon. While it is of course possible to design a set of icons like this, if you have a large suite of icons to design, or you have 'interesting' concepts to convey in iconic form, then you'll quickly run unto the problem of not having enough space to draw what you want using 2-pixel strokes. I also find that designing SVG icons to suit a target size of around 20 to 25 pixels can lead to the same questions over stroke width (or rectangle size).Īt this size, 2-pixel strokes can indeed appear heavyweight or 'chunky' and lacking resolution. consider mixing up foreground and background strokes.don't use 1-pixel strokes for all icon components - mix it up.To answer your question - you can use 1-pixel strokes but. "1px stroke width is legible" - wouldn't be equally true of SVG icon content as it is of text? Is there a reason to beware that that - i.e. "Discussions"), is one pixel wide - and that, i.e. the strokes of the mouse-over text, created by the browser (i.e. Here it is zoomed and with a pixel-grid superimposed: on :hover - I simply change the backgroud-color and brighten the fill: Here's what it looks like on mouse-over, i.e. Is there a reason why that mightn't be true too of an SVG icon - i.e. ![]() the borders which you create using CSS, with a 1px width, are all quite visible. The design guideline says 2dp, because it says that although the icons are best viewed at 24x24, but they can also be displayed smaller e.g.They'll look better, less eye-catching - i.e.My question is - if I'll only display these icons at their recommended 24x24 size - can I (might it be good or bad) to edit the SVG to reduce the stroke width to 1? To maintain legibility, the recommended stroke weight is 2dp for most icons.Ģdp outlined icons remain readable across sizes and applications. Their design guidelines say, for outlined icons, ![]()
0 Comments
Leave a Reply. |