Getting started with SVG graphics

June 26, 2016

Preface

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:

See the Pen Simple SVG Elements by Eugenio - Keno - Leon (@k3no) on CodePen.

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:

See the Pen Responsive SVG by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

See the Pen Animating SVG with Vanilla JS by Eugenio - Keno - Leon (@k3no) on CodePen.

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 :(

See the Pen Animating SVG with < animate > by Eugenio - Keno - Leon (@k3no) on CodePen.

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…

See the Pen Animating SVG with < animate > & JS by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

See the Pen Animating SVG with CSS by Eugenio - Keno - Leon (@k3no) on CodePen.

Selecting & Interacting with SVG via CSS

And since SVG is another DOM element you can interact with it via CSS:

See the Pen Selecting SVG elements with CSS by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

See the Pen Selecting SVG elements with Javascript by Eugenio - Keno - Leon (@k3no) on CodePen.

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

Best,

Keno