4/4/2023 0 Comments Open source svg iconsProperly sized glyphsįor each icon, we currently serve a single glyph at all sizes. For screen readers, SVG provides us the ability to add pronouncable alt attributes, or leave them off entirely. SVGs will display regardless of font overrides. This messed up GitHub’s page layouts and didn’t provide any meaning. To those changing their fonts, our font-based icons were rendered as empty squares. For dyslexics, certain typefaces can be more readable. Since our SVG is injected directly into the markup (more on why we used this approach in a bit), we no longer see a flash of unstyled content as the icon font is downloaded, cached, and rendered.Īs laid out in Death to Icon Fonts, some users override GitHub’s fonts. Since our icons were delivered as text, sub-pixel rendering meant to improve text legibility actually made our icons look much worse. In Webkit-based browsers, you’d get blurry icons depending on the browser’s window width. Unfortunately, even though these icons were vector shapes, they’d often render poorly on 1x displays. We could then change the size and color on the fly using only CSS. Simply adding a class to any element would make our icons appear. This allowed us to include our icon font in our CSS bundle. We originally used a custom font with our icons as unicode symbols. Compare the zoomed-in icon font version on the left with the crisp SVG version on the right. Switching to SVG renders our icons as images instead of text, locking nicely to whole pixel values at any resolution. While the changes are mostly under-the-hood, you’ll immediately feel the benefits of the SVG icons. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. no longer delivers its icons via icon font.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |