How to Style and Animate SVG Elements with CSS

Styling SVG icons with css

Intro to Scalable Vector Graphics

What is SVG?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

Why Use SVG?

SVGs have small file sizes that compress well and can scale to any size without losing clarity. It looks great on retina displays and you can maintain design control, like with interactivity and filters.

Step 1: Set Up the Icons in Illustrator

Choose 3 different icon states.

To use these next to an input field in a web form, we could use different states of emoticons to show the user if he’s correctly filling out the field or the field contains an error. To do this, we will start with a neutral blue state emoticon. The success emoticon will turn green, and the failure will turn red.

Choose 3 different icon states.
Choose 3 different icon states.

Step 2: Set Up Your Workspace

Create different artboards for the three different states.

For each icon, create a separate artboard. Create the first artboard at 64x64px and name it Neutral and place the neutral icon in the center of this artboard. Create an artboard with the same dimensions (64x64px) for the Success icon and name it Success, and finally create an artboard at the same diensins for the Failure icon.

Create different artboards for the three different states.
Create different artboards for the three different states.

Step 3: Save As and Optimize the SVG

Once the icon artboards are ready, we can save them to SVG. Select the first artboard by selecting it in the Artboard Panel and go to File > Save As and select SVG in the drop down list. You will see this window pop-up. Leave the values as in the example and choose a location to store the icons. Do this for the rest of the artboards as well.

Save As and Optimize the SVG
Save As and Optimize the SVG

Step 4: Optimize the SVG Code

The SVG code is ready to be optimized.

Once the SVG is saved, go to your text editor and double click the SVG file. The code will pop-up and you will see that a lot of redundant code like the doctype definition, so the file can be optimized before we start editing the SVG file. There are a number of online optimizers. I use SVGO, a Nodejs-based tool for optimizing SVG vector graphics files. It has a GUI and is easy to use on your desktop. Download it to optimize your SVG code.

The SVG code is ready to be optimized
The SVG code is ready to be optimized

Step 4: Style the SVG Code with CSS

Use CSS to style the icons.

You can use the SVG element in the HTML code (more info on how to do this here). There's a whole list of properties that you can use to style SVG through CSS.

  • neutral (#007AFF)
  • success (#5AD427)
  • failure (#FF4981)

Also style the SVG hover states with CSS.

You have endless possibilities to style SVG’s with CSS. SVG can be animated through the use of CSS or with SMIL.

Animate the SVG with CSS: Change the color state of the icon

Bonus Tip: Style an Icon Group

The real power of SVG icons and CSS lays in the group styling approach. You can style a group of icons in a specific theme or use a specific color or stroke style.

Advantages of Styling and Theming Icons

Styling SVG icons with css is a challenge as you will have to decide upfront which parts you will style. I spent the most time analyzing all the parts in the SVG shapes and deciding how to theme these parts. These are all tasks a designer should do before digging into the code — it’s a good idea to style the icons first and dive into code mode after you decided the styling phase of the icons.

References

--

--

I’m a web- & graphic designer living in Belgium with over ten years of expertise in creating web & print experiences for institutes and companies

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bene

Bene

281 Followers

I’m a web- & graphic designer living in Belgium with over ten years of expertise in creating web & print experiences for institutes and companies