GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes are mostly under-the-hood, you’ll immediately feel…
Overview
GitHub has transitioned from using icon fonts to SVGs for delivering Octicons across its platform. This change enhances rendering quality, accessibility, and ease of use, allowing for better performance and flexibility in icon management.
What You'll Learn
1
How to replace icon fonts with SVGs in a web application
2
Why SVGs improve accessibility for users with font overrides
3
When to consider SVG over icon fonts for better rendering
Key Questions Answered
What are the benefits of using SVGs over icon fonts?
SVGs provide better rendering quality, as they lock to whole pixel values and avoid blurriness on various displays. They also enhance accessibility by allowing screen readers to interpret icons correctly and ensure that icons display regardless of font overrides, which was an issue with icon fonts.
How does GitHub implement SVG icons in its codebase?
GitHub injects SVGs directly into the markup using a Rails helper, which allows for easy testing and flexibility in icon management. This method eliminates the flash of unstyled content and allows for dynamic styling with CSS.
What performance improvements were observed after switching to SVGs?
The transition to SVGs showed no adverse effects on page load or performance. SVGs rendered like images with defined dimensions, reducing layout jank and allowing for a cleaner CSS bundle by eliminating the need for font CSS.
What are some common pitfalls when using SVGs?
Common issues include pixel-rounding errors in Firefox and the need for defined width and height attributes in Internet Explorer. Additionally, wrapping SVGs in a div may be necessary for background color adjustments, which can complicate layouts.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Svg
Used for rendering icons in a scalable and accessible manner.
Backend
Rails
Utilized for creating a helper to inject SVG paths into the markup.
Key Actionable Insights
1Transitioning to SVGs can significantly enhance the visual quality of icons in your application.SVGs render crisply at any resolution, making them ideal for responsive designs and high-DPI displays. This is particularly important for applications that prioritize user experience.
2Utilizing a helper method for SVG injection can streamline icon management in your codebase.By abstracting SVG paths into a helper, you can easily test and modify icon usage without extensive code changes, enhancing maintainability.
3Consider accessibility when implementing icons; SVGs provide better support for screen readers.SVGs allow for the inclusion of alt attributes, which can convey meaning to users relying on assistive technologies, improving overall accessibility.
Common Pitfalls
1
SVGs may not render correctly in Internet Explorer without defined width and height attributes.
This can lead to layout issues, so it's essential to specify these attributes to ensure proper sizing across all browsers.
2
Using both SVGs and icon fonts during the transition can cause compatibility issues.
This can lead to crashes in Internet Explorer, highlighting the importance of a complete transition before deploying changes.
Related Concepts
Svg Rendering Techniques
Accessibility Best Practices
Icon Management Strategies