Examples of Scalable Vector Graphics (SVGs) in Web Design

SVG (Scalable Vector Graphics) images offer web designers a flexibility with imagery they have not previously known. Now compatible with all current web browsers and most mobile device platforms, here is another technique that is threatening the popularity of Flash.

SVG images are small in file size and they scale pretty much to any size without losing quality. Some software programs that support .svg files are: Adobe Illustrator, CorelDRAW, Inkscape and Serif DrawPlus. There are also some online .svg editors, such as Google's SVG-edit. You can learn more about why and how you should use SVGs in our recent article Designing for Changing Technology: Font Icons vs SVG. Here we have collected some examples of SVGs in use in web design.

SVGs in Web Design

Albino Tonnina

This site has some very nice scrolling animations on the vertically scrolling page. A modern design style that is becoming more and more popular.

Albino Tonnina

Charles-Axel Pauwels

No bells and whistles in this design, just some tasteful little animations where key words from the changing sub-heading are highlighted.

Charles-Axel Pauwels

Your Power

This site is owned by the WWF, and is rallying for natural fuel. You scroll down and read the story, then at the end there is a call-to-action button that asks you to 'Seize Your Power Now' – when you click on that, you are presented with a form that will pledge that you want a world powered by nature.

Your Power

Brut Magazin

This site has some creative animations that lead you from one screen to the next.

Brut Magazin

Kevin Lagier

This is the portfolio site of an aspiring art director. Most of the horizontal scrolling pages have an animation, some automatic, some scrolling animations. Very well presented site.

Kevin Lagier

VT Creative

As you scroll down this page, the illustrations are drawn as you reach them.

VT Creative

CreativeMob

Some very nice animations as you scroll down this site.

CreativeMob

Vins Saint-Aubin

On this site, you scroll up, and there are some wonderful scrolling animations along the way.

Vins Saint-Aubin

Sequence – Six Nations

This site gives you the results of all Six Nations rugby matches played between any 2 teams. The map of circles are links that expand to a match containing the result and the date played. They go back a long way... the oldest match I found was France v England in 1906 – score was 8-35.

Sequence - Six Nations

Carl Philippe Brenner

This is a grid-style layout design with a nice little animation on mouseover of any element. If you click on the category there is another opening animation on each page.

Carl Philippe Brenner

Kaipoche

This site that is dedicated to a kite flying festival that took place in Goa in January 2014 has some beautiful scrolling animations.

Kaipoche

Alee Foroughi

There are some very nice, sophisticated scrolling effects on this portfolio site.

Alee Foroughi

Tiempo de Vender Más

This is an interactive one pager introducing Google AdWords marketing and info from the Chilean market. The clock with Google-colored hands works, and the links in the sidebar bring portions of the circle into focus. When you click on a link the clock is replaced by a round, animated image for the category.

Google Adwords

Chango

This site has some subtle and appropriate scrolling animations as you make your way down the page. Very tastefully done.

Chango

Midori Aoyama

There appear to be quite a few things wrong with this Japanese DJ's portfolio site, but the animations are not among them – they are relevant and smooth.

Midori Aoyama

Make Your Money Matter

This project is a collaboration of a few US credit union companies. The scrolling animations, scrolling on a path and excellent illustrations tell Americans the benefits of keeping their savings in a credit union rather than in a bank.

Make Your Money Matter

Fixate

Although the eyes of the cat(?) are animated, the unique thing about this site is that amazing illustration.

Fixate

Get Response

This site celebrates Get Response's 15th birthday. As you scroll down, there is a 15 year timeline. Most entries include something that happened in the world and a milestone for Get Response. All screens have a little mouseover animation.

Get Response

A Guide to Making Things

This site was created by Fieldwork, a digital agency, to celebrate their first birthday. Each screen has a small animation.

A Guide to Making Things

The Girl Effect – 2015 & Beyond

This side is dedicated to African girls who currently have little control over their own lives. The tags swing as you navigate left and right by clicking and dragging. Each tag has a statement by a girl, in her own writing on one side and in English on the other side. Good animation effects.

The Girl Effect

Wrist

This site is owned, perhaps strangely, by a designer and developer. The site is an illustrative exercise to explore typography, colors, clock mechanics and everything else that goes into watch design. The watches work and show your local time.

Wrist

Conclusion

The flexibility of adding animations and scrolling animations can add more interest to a design. Chris Coyier has written a tutorial on using SVG on his CSS-Tricks site, that you may find very helpful.

Have you designed a site using SVG images? Are you up with the trend of SVG usage, or do you not see the need? Please share your links, comments and opinions with us in the section below.