![]() For this tutorial we’ll be using this SVG file. Check out this article over at CSS-Tricks for a good introduction on how to create and work with SVGs. I’m assuming you are familiar with vector graphics and know how to create or where to get a SVG file. Getting startedįirst, we’ll need to get some SVGs to work with. For humanity’s sake, let’s kick him off the sofa and send him to the gym. ![]() We will be able to use animations with SMIL, CSS or JavaScript.Ĭurrently, SVG looks more like a retired super hero. We will obtain the ability to style our icons with CSS. The power of consistently crisp rendering across browsers and operating systems.Extending the benefits of icon fonts, it will give us some additional super powers: The icon solution I want to share here with you is based on SVG (Scalable Vector Graphics). So today we will explore the possibilities of using SVG icons instead. We can’t, for example, use an inset text shadow or apply different colors to the details. Unfortunately, icon fonts have some limitations like being monochrome ( still) and we can only use styles for texts like e.g. Browser support for older browsers possible (e.g.It’s a font – you can easily change size, color, shape and add a shadow.It’s one source file, which means a minimum of HTTP requests.It’s a vector graphic, which means it can be scaled to any size making it Retina ready.It’s plain text, which means they can be gzipped to up to 95%.They allow us to manage all these things more easily and we have the following benefits: Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale.īut fortunately we’ve had icon fonts coming to the rescue. ![]() What about a shape? A shadow? Yup, the same thing. ![]() What about size? For each icon size we need to add yet another icon image. What if we need to change a color of an icon for its hover/active/focus state? For each icon state we need to add one more icon image. Using raster graphics for icons means that they are not manageable in CSS. A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible.
0 Comments
Leave a Reply. |