2

enter image description here

In this image, the left (black) trash can is an icon-font. Its font-size is 16px which causes the icon to look crisp 100% of the time.

The two blue trash cans are SVGs. They have exactly the same markup. One of them happened to be pixel-aligned, and the other one wasn't.

How can I force my SVG icons to always be pixel-aligned so that they come out sharp, just like font-icons?

Not that I think it's relevant to my question, but the icon in question is ionicon trash-a.svg. It was designed to look crisp at particular sizes, but I'm pretty sure the browser isn't pixel-aligning it depending on where it lands in a paragraph.

mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • *"They have the same markup"*. *"One of them happened to be pixel-aligned, and the other one wasn't."* How is this possible ? I think this question will unfortunately turn out to be too broad, because one solution for your markup (that we don't have access to btw) will not work for all markups : If it's a simple global transform issue (like here), you could wrap all elements in a `` then translate it until everything looks fine. But if other paths are positioned on floating coords, then there s no way to make them all fit on rounded coords. – Kaiido Feb 07 '17 at 05:17
  • Ps: if your font-icon is sharp, it's because the author made it pixel-aligned, it has nothing to do with the fact that it's a font-icon. (You can try http://icomoon.io/ and upload your non-pixel-aligned svg, it will be burred just like the svg version) – Kaiido Feb 07 '17 at 05:21
  • @Kaiido Will have to wait til I get home to post you the markup. How is this *not* possible? The SVG path coordinates are identical on both blue trash cans, but the position of the SVG as a whole is different. It's sitting next to some text which will affect its global coordinates. The only the reason the *text* is clear is because of ClearType or whatever which makes sure all the letters are pixel-aligned. Is there not something similar for SVGs? – mpen Feb 07 '17 at 17:03
  • @Kaiido In fact, there's a [proposal](https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/SVG_hinting#Pixel_snapping) which discusses the issue I'm talking about. I'm pretty sure the black trash can is sharp not *just* because it was designed that way, but also because the browser and/or OS knows how to align *characters*. – mpen Feb 07 '17 at 17:03

0 Answers0