SVG the most versatile image format

Inlined SVG (scalable vector graphics) elements are probably the most flexible way for including graphical elements of all kinds on a web page. The code of the SVG is directly inlined in a svg element. With this method you can even target and edit g or path elements of the image with Javascript and CSS. I have prepared some examples to show its flexibility.

Animating SVG

This SVG consists of one single path with an animated color-gradient as stroke-attribute as SVG animation. The d-attribute which describes the way of the path is then added and animated with Javascript. Within the requestAnimationFrame-Loop the attribute is set every new frame.

Character animation with SVG

For this example I used the free and open source vector software Inkscape to create the graphic.

I have created two sepearate layers for the different look of the eyes and the eyebrows. I cleaned up the saved SVG file a bit and pasted it into the HTML document.

The actual animation then is purely made with CSS. Styling the :hover state the named layers are being hidden or shown.
This example is more a proof-of-concept than a full-fledged character creation, that’s why the graphic is kept rather simple.

SVG in layout

The most practical usage of SVG in website is probably for general layout elements. Curvy or skewed layouts were only possible with background-images until recently. With SVG any kind of shapes are doable without any problems.
Thanks to its versatility even responding to media queries is possible. That way a graphic can be totally dependent on the features of the displaying device.