How Glyphs Works
The Glyphs platform combines a few of the most popular SVG usage methods in order to deliver the best all-around experience from using SVG. As we build out all of our planned features you'll have access to every feature SVG has to offer with complete compatibility and speed.
At this point in our beta we are using a combination of a javascript injection script, a custom svg sprite for each user (this is what you're creating each time you update your kit), and svg <use> elements for inline replication. It's fast, loads instantly with no FOUC("flash of un-styled content"), and allows you the majority of SVG functionality with a large degree of browser support (IE 9+). We also spend a lot of time organizing, optimizing, and adding CSS classes to our icons to make using those features even easier.
The SVG Icon
For each instance of an individual SVG icon we're going to have an svg tag and a use tag. It should look like this:
<code><svg class="glyph offset anchor"><use xlink:href="#offset-anchor"></use></svg></code>
With the main Glyphs.co script installed in your header, the above tag will have the SVG data replicated into it and the end result will be something like this:
The glyph class applies to all of the icons, with some basic styling for size, positioning, layout, etc.. You can use the individual icon class (anchor in the example) to select and style specific icons, the set class (offset) to style an entire set, or both to hit a specific icon if you have a lot of similar icons.
Because we're using the svg use tag, we have a few fancy CSS classes applied to each of our icons to help styling behave as you would expect. We use the currentColor variable in CSS to control the color of the stroke and fill, and most icons have stroke set to inherit so that by setting a stroke-width on the outer svg element (with the classes above) that will cascade to all of the strokes in that icon (for sets where this is available).
more coming soon