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.