The value of the viewbox property defines the aspect ratio of the document and is equivalent to the size of the artboard in Illustrator. I've used the svg- prefix to easily target elements inside of a specific SVG. My base SVG element contains the following: I've significantly simplified this xml by removing a lot of the extra markup that the program outputs by default.
Svg icon plus code#
This code was exported from my vector editing tool, Adobe Illustrator. Here's the SVG code for the first animation example I'll demonstrate, a blinking Christmas light. Inkscape actually does a better job of exporting SVG in this respect, but I've found that simplifying and formatting the code can go a long way towards making the code easier to read and work with. The SVG code that is exported by Illustrator, my vector graphics editor of choice, is pretty unreadable at first glance. One of the biggest knocks on SVG is that the code is difficult to deal with. You could also try creating your demos on Codepen, which can be easily configured to use prefixfree.
Svg icon plus free#
Check out the prefixfree library by Lea Verou if you'd like to write prefix free CSS easily.
You can certainly expect support for these technologies to improve in the future.Īdditionally: In this article I've omitted some necessary browser prefixes from some CSS properties for concision and readability. Mozilla support is perfectly possible with the appropriate property prefixes. If you're following along with the tutorial, it's best if you use Chrome or Safari. Note: The following demos use cutting edge technologies that, as of the time of this writing, are not supported in some browsers such as Internet Explorer. Adding a dash of interactivity with animation to your icons can help create a delightful experience for your users and also add context about what an icon represents.įor an introduction on SVG and the web, take a look at SVG Files: From Illustrator to the Web. Plus, just like HTML, SVGs can easily be styled with CSS, which includes CSS3 animation. SVGs are flexible, resolution independent, and light weight, so icons naturally lend themselves to the vector format. If you're interested in using SVG on the web, icons are a great place to start. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started! The icons I'm using come courtesy of designer Sam Jones. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. 'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons.
0 kommentar(er)
