Apr 13

Overview of SVG Animation in Web Design

Mon, 04/13/2015 - 11:18 — julie

Animated effects for the web have come a long way. With most browsers now supporting SVG image types it’s a lot easier to dynamically animate vector artwork. Newer CSS3 specs also make animation a breeze where JavaScript isn’t even a full requirement anymore.

But while many designers are familiar with CSS3 animation, the topic of SVG animation is slightly more nebulous. The following article covers a large swath of SVG animation tips and resources for web designers. You’ll learn how SVG images are created and why they’re great for websites. You’ll also find a collection of SVG animation tutorials and open source code to help new designers come to terms with building unique SVG animations from scratch.


SVG Fundamentals

Scalable Vector Graphics are vector file formats which have recently found their way into mainstream web design. SVGs are really popular because they can be scaled to any size and still look crisp. Smartphones, desktops and retina laptops all use a wide variety of screen resolutions – but an SVG looks resplendent on all of them.

SVG files can be exported from almost any vector editing program. Adobe Illustrator is the most popular but Inkscape and Sketch are two other fantastic choices.

inkscape vector program

All SVG files are written using XML. This means SVGs can be embedded into a webpage as an SVG file or as raw XML code. The syntax can be a little confusing but the more you play with it the more familiar it’ll become. Take a peek at this introductory post from Tuts+ if you want to learn more about SVGs in web design.

Some of you may be questioning why SVG hasn’t been used up until recently. Web browsers have only just adopted this standard as a serious image format on the web. The compatibility chart from Can I Use SVG clearly demonstrates modern browser support for this image format.

svg support browsers

Internet Explorer 8 and below are the worst troublemakers. If you’re not concerned about supporting those browsers then SVG images are worth adding into your project work. Beyond the vector scalability they’re also traditionally smaller in filesize and easy to create using pure XML code.

But another fascinating point is that SVGs can be animated dynamically using CSS and/or JavaScript code. Since SVGs are rendered using mathematical functions rather than pixels they can take on motion effects right in the browser window.


SVG Animation in Websites

If we simplify the idea of an SVG it’s basically just some XML code rendered onto the page as an HTML element. These graphics can be seen as lines, shapes, fills, and other properties of traditional vectors.

SVG animation relies on this relationship between vector elements and CSS/JavaScript. Take a peek at David Walsh’s SVG animation article which covers some live examples with quick explanations for each one. He recommends using a library such as Velocity.js to create quicker and simpler animations when first getting started.

monster energy svg logo

Animation can be applied to logos, icons, and even SVG text. Once you learn the basics of creating SVG graphics you’ll have a much easier time animating them. CSS3 properties tend to have less overall support than JavaScript but they’re both perfectly valid methods for testing your ideas.

bjango svg animated navigation

One of my favorite examples can be found on the Bjango homepage. All the navigation links and the logo are created using SVG images. When you hover any of the links you’ll notice a small elastic bounce effect. The SVG graphics display a hover state on mouseover, and CSS is used to create the bouncing effect.

Most website animation is used for aesthetic purposes. Of course a user experience can be improved through animation but the style should match the website and look ravishing.


Responsive Layouts

The other area where SVG animation can be rather prudent is with responsive design. Mobile responsive websites stretch to fit any monitor regardless of resolution or screen size. SVG images fit this exact same description to a T.

You should still use pixel-based image formats(JPEG, PNG) when appropriate for photographs, screenshots, or anything which can’t be vectorized. SVGs are best used for dynamic logos/text, icons, or background content.

responsive icons open source homepage

Two articles worth reading are SVG resolution independence and rethinking responsive SVG both from Smashing Magazine. Not only can SVG images be scaled naturally, but they can also be swapped out with more-detailed or less-detailed versions based on screen resolution.

When it comes to responsive web design & animation there’s no better companion than SVG images.


SVG Animation Tutorials

If you’re eager to learn more about pragmatic SVG animation then take a peek at the following articles. Each one covers a different style of animation which is perfect for those just delving into the subject. Once you get started using vector graphics on the web you’ll be amazed at how much is possible with just a few lines of code.


Animating SVG with CSS

CSS Tricks may honestly be the best free website for learning modern CSS techniques – and this article is no different. Chris Coyier explains the basics of SVG graphics, how they work on the web, and how to animate them with CSS.

animating svg css tricks


SVG From Illustrator to the Web

Learn how to export vector graphics from Adobe Illustrator into SVG files for the web. The process might seem complicated but this guide clears up everything from start to finish.

svg from illustrator to web


Animate Festive SVG Icons

Here’s another tutorial from Tuts+ which explains how you can animate SVG icons using CSS. This tutorial uses christmas light bulbs which light up via CSS3 animation.

festive svg lights animation


SVG Icons

If you’re curious about SVG icon animation look no further than MediaLoot’s fantastic guide. It teaches how to export customized SVG icons from Illustrator and then animate them using the CSS3 transform property.


SVG Checkboxes & Radio Buttons

Myself along with many other designers simply adore the content on Codrops. This particular tutorials explains how to customize radio buttons and checkboxes with SVG animation. It’s a powerful technique that pushes the boundaries of modern web development – just what you’d expect from a Codrops article.

animated svg checkboxes radios


SVG Shape Hover

Hover animation can rely solely on CSS3 using the :hover pseudo-class. This post explains the process of adding SVG hover animations via CSS to create unique shapes in div elements.

shape hover effect svg


Animate Icons with Snap.svg

Vector icons can be animated manually or with pre-built code libraries. Snap.svg is a free JS library popular with frontend developers. This tutorial explains how you can incorporate Snap into your website for animating SVG icons from scratch.

snap svg animation tutorial


Introduction to SVG Motion

Although this post is more of a “beginner” tutorial it does cover a lot of fundamental SVG knowledge. The author Jon McPartland explains how to edit SVG XML code and customize the file for animated effects.

svg animation code intro


Libraries & Code Snippets

Along with free tutorials I’ve also cataloged a handful of open source code libraries & snippets for SVG animation. Libraries will save time during the development process by reducing the amount of code you need to write. Snippets can be just as helpful offering live examples that you can study from and even duplicate into a project.


Snap.SVG

Snap.svg is undoubtedly one of the most popular libraries for manipulating SVG images. It’s a JavaScript library made for creating resolution-independent vector graphic animations. The library is 100% open source and even provides a handy getting started guide.

snap svg free open source library


Two.js

A lesser-known alternative for rendering SVGs is the Two.js library. Flat vector shapes can be created and manipulated at will through JavaScript. Two.js is seen as more of a motion graphics library for the web & it’s phenomenal when used in the right context.

two js svg library


Vivus.js

Line drawn animation effects take on the motion of graphics being drawn from start to finish. Vivus.js is a free JavaScript library made for recreating this type of animation with SVG images. There are no dependencies but it will take a bit of reading to understand the setup process.

vivus js library svg animation


D3.js

The D3 library was mentioned briefly in our JS charting library collection. D3 stands for data-driven documents which can be any type of data display(charts, graphs, tables, etc). The whole library runs on HTML/CSS/SVG for rendering compatible and scalable data in all modern web browsers.

d3 js data svg animation


Vue.js

On the topic of website data, Vue.js is another brilliant open source library. Vue generates SVG graphs through JavaScript and JSON code.

vuejs javascript chart library svg


Pure SVG Arrows

These two arrow icons have been created using pure SVG code as buttons on a webpage. Each arrow lights up on hover and works just like any typical HTML button.

svg animated arrow buttons


Animated SVG Border

Hover animation is a popular choice with SVG image types. This border effect is attached onto a block of page text which animates a box border on hover.

svg box border animation effect


Scrolling Animation Effect

To incorporate scroll animation on the web you’ll need to rely on JavaScript. This small SVG/CSS/JS code snippet elucidates how scrolling animation works in a live open source demo.

line drawn svg image scroll


Wrap-Up

Scalable Vector Graphics are the perfect file type for basic icons and vector web graphics. Along with their low filesize they can also be quickly manipulated and updated with ease. Controllable SVG animation only increases the value of this modern image filetype. I certainly hope these tips & resources can help web designers understand the fundamentals of SVG animation for website design.

If you’re looking for a quick tutorial for getting started with inline SVG, you should have a look at this tutorial, and if you’re looking for some tools to help boost your SVG workflow, check out this round-up.

The post Overview of SVG Animation in Web Design appeared first on Market Blog.

Copyright 2009. E-mail Me
Auto Spare Parts