We’ve taken an in-depth look at how SVG line drawing works before. It’s a clever trick where you use dashed lines for the stroke, but the gap in the dash is so long it covers the entire path. Then you …
The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist blogging about them myself several times. Much better …
The following is a guest post by Sarah Drasner (@sarah_edo). Sarah has been researching and giving talks about animation lately. I jumped at the chance to have her share some of that research here, this time focusing on …
The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5. Amelia and I both will be …
Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. …
I’ve talked a good bit about SVG’s <use></use> around here and using it to build an icon system. The beauty of <use></use> is that you can reference just a part of some SVG defined elsewhere and draw just that …
JavaScript is the last of the ways we’ll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can’t do a number of SVG properties that you might want to animate. Then we looked …
While animating SVG with CSS is easy and comfortable, CSS can’t animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren’t possible to change or animate …
Perhaps you’ve heard of data URIs. It’s a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it …
There are a couple of different (rational) approaches to SVG artboard sizing.
The term “Artboard” here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in …
