SVG CSS Injection—A Different Approach Towards SVG Rendering

SVGs will be playing a major role in our new retina-display world. If we are going to be using SVGs, why not take advantage of their markup structure?

Retina displays are going to drastically change how we design for the web. Vector imagery, most notably SVG, will become a significant tool to display resolution-independent imagery at a reasonable bandwidth footprint. I made the switch to SVG on my site using data URIs a few weeks back and will not be looking back. One thing has gnawed at me when I added the SVGs to my CSS file. It felt wrong to treat those SVGs like a plain images. One considerable strength to SVG is that it’s markup-based. That nagging feeling led me to experiment with a different approach to rendering vector imagery on a website, which I am calling SVG CSS injection. Continue reading “SVG CSS Injection—A Different Approach Towards SVG Rendering”

Font-Embedding Icons the Right Way—A Legitimate Alternative to Images

Using fonts to display icons have shown potential but carry significant downsides. A slight adjustment to the method makes it ready for primetime.

When I released Iconic in font format it got a lot of positive feedback. However, it had one significant technical issues that kept it from being practical. The glyphs in the font had no logical assignment to Unicode characters, making the output semantically unsound. A few months back, Philip Shaw shared a much improved method for glyph assignment which I have implemented in the current version of Iconic. I thought it would be worthwhile to share that approach so that others may adopt it and that a standard can hopefully form. Continue reading “Font-Embedding Icons the Right Way—A Legitimate Alternative to Images”