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:

Responsive SVG

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:

Animating SVG

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

Vanilla (or plain) javascript is perhaps the most robust option, but it does need you to code eveything, so more complex animations might be hard to make.

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

Still no ie support for this one, but you could do slightly more complex things involving javascript, try clicking on the pen...

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:

Selecting & Interacting with SVG via Javascript

But more likely than not, you wwill be interacting with SVG through Javascript, here's a very basic example with Vanilla Javascript.

And That's it for now, I hope these pens help you get started with SVG graphics.

-K


429 0 2