Getting Started with SVG in a few pens
Another post on getting started, this time with SVG ( scalable vector graphics)
Note: These SVG pens resize and look better while reading this if you open the CSS,JS or HTML along the Result
Simple SVG Elements
The first thing you might want to do is add some basic shapes, most of the know-how is in the comments in the pens:
There are a few ways of making SVG responsive, here are a few detailed in the comments, also check out the further reading bits inside the pens for more:
Currently (Mid 2016) there are quite a few ways of animating SVG, some are on the way out, some are popular, easy or a combination, let's start with a few of the more obvious:
1. Animating SVG with Vanilla JS
2. Animating SVG with <animate>
<animate> is a cool way of animating SVG, right inside the SVG element : ), unfortunately, there is no support on ie :(
3. Animating SVG with <animate> & Js
4. Animating SVG with CSS
CSS is another way of animating svg,you are mostly animating the element through transforms and translations on a style sheet, so this approach might not be the best for more complex animations, still it has wide browser support, and keyframe support, we are also adding an svg filter to sass it up.
Selecting & Interacting with SVG via CSS
And since SVG is another DOM element you can interact with it via CSS:
And That's it for now, I hope these pens help you get started with SVG graphics.