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
This SVG consists of one single
path with an animated color-gradient as
stroke-attribute as SVG animation. 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.