TechPrufer
Get started
GitHub
GitHub logoGitHub · Feature trail

Octicon SVG Delivery

1 post · Feb 2016

What this trail covers

This post details the initial migration of GitHub's Octicons from icon fonts to SVG, improving rendering quality, accessibility, and authoring ease. The approach involved injecting SVGs directly into the markup via a Rails helper, offering benefits like CSS-based coloring and eliminating FOUC. Future evolution may involve more sophisticated SVG animations and size-specific glyphs.

All GitHub trails
  1. Delivering Octicons with SVGThis post details the technical decision and implementation of replacing Octicon icon fonts with directly injected SVGs. It covers the rationale (rendering issues, page performance, accessibility, glyph sizing, authoring ease, animation potential), the chosen approach (Rails helper for SVG injection), and the exploration of alternative methods (external .svg, background images, img src, embedded svgstore). It also discusses performance observations and drawbacks like Firefox pixel-rounding and IE compatibility.