There isn’t just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We’re going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.
read all about it Animating SVG with CSS | CSS-Tricks.
Designing Iconic Across Different Sizes.
This is a great read about SVG icons. They make a good point about scaling graphics:
SVG is great because (as its name suggests), it’s scalable. This means that SVG images, including icons, will be super-crisp at any size, right?
Nope. If you’ve followed our Kickstarter project, you probably know what we’re going to say, so we’ll be brief.
It’s easy to assume that vector images are the salvation for legibility, but that simply isn’t the case. Even if an image is put together as vectors, it still renders on the screen through pixels. Meaning if your vector points land on floating-point numbers, your “crisp” image is going to show up with sub-pixel ugliness. High pixel-density screens will help alleviate this, but it doesn’t need to (nor should it) be a pre-requisite for sharp imagery.
Additionally, icons have optimal legibility ranges—just like typefaces. Meaning an icon designed for 32 pixels will often be illegible at 50% and appear chunky at 300%.
http://www.drawastickman.com/
This fun little adventure uses the Raphael Javascript library – Raphael is a vector graphics library, done using SVG (not bitmap like HTML5 canvas)
Reply
You must be logged in to post a comment.