SVG’s or scalable vector graphics can be used in an array of animations and interactive designs. The great feature of SVG filters is that they allow you to manipulate text by applying multiple borders, different colors, add patterns, textures, and 3D effects, and so much more. Additionally, they allow you to manipulate images and bring them to life. Basically, SVG’s are used to add tons of cool effects to any HTML element.
There are countless awesome designs you can come up and incorporate into a website or any other design project by using SVG’s, like rotating clocks, timers, jigsaw puzzles, animated lyrics, animated icons and vectors, animated hamburger buttons, checkboxes and loading buttons, interactive maps and diagrams, and so much more.
Loading icons and small animations built with pure SVG. Icon Hover Effects. A set of simple round icon hover effects with CSS transitions and animations for your inspiration. Collection of 12 small, elegant pure css spinners for your website loading animation. 150 Animated SVG Icons. SVG isn't a supported image format, so there's not a whole lot you can do other than convert to a supported format. As long as you have access to Illustrator then the easiest option is to simply open and re-save as an.ai file. That will obviously retain the vector data so you can animate paths etc. Over the last year it has grown to a neat collection of avatars, but I have always wanted to do something extra with themadding animation. After Effects seemed like a logical choice, but to make sure the loading time would be as minimal as possible it was clear they should be animated SVG’s.
Also, do you want to see how you can use SVG to create amazing, beautifully animated website designs? Scroll down and see our hand-picked collection of SVG-powered websites.
Synchronised animation and audio
With the help of SVG’s, you can literally create anything, whether it’s for fun, aesthetic or educational purposes. Here’s a tutorial that shows you how to create a synchronized animation and audio with the help of SVGs.
Path-tracing map routes with SVG and Raphael
The SVG format is superior to raster images, such as GIF’s, due to its powerful animation capabilities, however, it has to be used with the proper images, as bigger files, like photographs or complex vector illustrations, will be too big for SVG, and thus work better in a raster image format. This project is a perfect example of the capabilities of SVG. Here’s how you can create path-tracing map routes with SVG.
Applying SVG effects to HTML content
SVG effects can be used for a variety of purposes and will surely enhance the look and usability of a website, as they are highly interactive and fun. Here’s how you can apply SVG effects to HTML content.
Here’s another application of SVG in web design. You can use them to create interactive websites and even games!
Animated SVG clock
Check out this moving animated SVG clock that show you the capabilities of SVGs!
Adding a third dimension to SVG graphics
An interactive SVG jigsaw
The images that are most compatible with the SVG format are non-complex, vector-based illustrations, UI controls, logos and icons, and infographics. You can manipulate them any way you want. Here’s for example how you can create an SVG jigsaw.
Applying SVG masks over HTML5 video
SVG (or Scalable Vector Graphics) is an XML-based file format which contains two-dimension vectors and allows developers to create amazing graphics and graphical applications that are dynamic and animated. In this tutorial, you will learn how to apply SVG masks over HTML5 videos.
Deconstructing Trajan columns with SVG
SVG is a powerful image format that can be manipulated with code, either in a text editor or with CSS / JS and it is used more and more in web design. Here’s a unique way you can use it. Bet you didn’t think about this!
Animated lyrics in SVG
Yes, you can even create animated lyrics in SVG. Imagine the customization possibilities!
The creepy mouth in SVG
One of the biggest pluses SVG has is that it can look sharp on all screen resolutions. It can contain very small file sizes and can be easily edited and modified. Here’s how you can use SVGs to create awesome animations on websites!
Animated line drawing in SVG
SVG images offer so much more freedom when it comes to the size of the images used, as well as the way they interact with your final design. Here’s a great example!
The Art Of SVG Filters And Why It Is Awesome
Learn everything there is to learn about the art of SVG filters and why they are so awesome, in this comprehensive article by Smashing Magazine.
Animated SVGs: Custom easing and timing
You can also use SVGs to create interactive, animated charts and graphs. Here’s a great example!
SVG Drawing Animation
Imagine presenting your app design concepts to your clients like this!
Animated SVG Icons with Snap.svg
This article explores what you can do with SVG and teaches you how to animate some SVG icons as a practical example. How to get default gateway.
This site also comes with a “Try it Yourself” editor, so you can edit the SVG, and click on a button to view the result!
The Ultimate Guide to SVG
This guide teaches you so many useful things about the power of SVG. Learn how to use SVGs to embed an image in a web page, scale that page to any size, and never lose image quality!
This is an SVG primer for everyone, created by Mijingo. You can learn a lot from this!
How to work with SVG icons
There are many ways to use SVG icons in HTML and CSS and this tutorial will teach you how to work with SVG icons.
Optimising SVG for Web Use — Part 1
This 2-parts article covers the basic concepts of SVG path optimisation, important to know by any web designer and web developer.
Inline SVG vs Icon Fonts
Read this tutorial before building an icon system for a site. It will be very useful to you!
Pro tips for using scalable vector graphics
This tutorial will give you some pro tips for using SVGs. You will learn how scalable vector graphics can be used for much more than just creating and animating shapes.
The Practical Beginner’s Guide to SVG
Why are SVGs so popular? Learn everything there is to learn about them in thi cool SVG guide.
SVG powered website designs
Let us take a moment to focus on some of the most inspirational and exciting websites that use the power of SVG. Enjoy!
Cavalier: Conqueror of Excellence
These series of games were created using SVG for animation and graphics. Posture & Balance is the first game created for a platform called Cavalier that was designed with innovative technologies.
Poignée de main virile
This animated and photographic new website was built for the France-based graphic design & digital creative studio Poignée de main virile. The result is incredible!
When FLY KLM Magazine celebrated its fiftieth edition, it designed a vividly animated site for the ultimate travel collection. In this way, there were presented the 50 most beautiful, fascinating places on Earth.
The ARK: Star Citizen Starmap
Using an incredible ARK interface, this website presents Robert’s Space Industries, a spacecraft manufacturer, within the game “Star Citizen”. This is a portal for information, updates, and purchases of your very own spacecraft with which you can protect the citizens of Star Citizen.
Keep Earthquakes Weird
Keep Earthquakes Weird is a platform created with stunning SVG graphic effects which were built with the goal of preparing the population of Portland in case of an earthquake. The content is very educative.
30u is an e-shop that sells shoes on a site created by developers that put attention on style and used some interesting SVG features.
QED GROUP site has amazing suggestive illustrations which will offer you a great navigation experience. The layout of the site is classy and smart.
Melanie Daveid’s website is one of the nicest portfolio sites that can be found on the web. The site includes smooth transitions and gorgeous hand illustrations
WWF France – Earth Hour Paris
This animated site was created for WWF France and was used to announce that on March 19th, the lights of the Eiffel Tower will be switched off for Earth Hour.
Nerisson aka Jimmy Raheriarisoa is a French art director specialized in web/mobile design, illustration & motion design. This is a great portfolio site, with nice illustrations and graphic features.
One Design Company
One Design Company is an experienced and enthusiast team of designers, developers, project managers, writers, and artists. Their site is a vivid and interactive one, based on crisp SVG images.
LIX – The smallest 3D printing pen in the world
LIX is the smallest and smarter 3D printing pen on the market. With the help of a suggestive animation placed on the site’s homepage, you can experience how interesting 3D printing is.
Midori Aoyama is a Tokyo-based DJ and producer. He has launched his own party “EUREKA!” that is still one of the best house music parties in Japan. His site is also innovative, an interesting example of SVG and how you can benefit from it as a user.
You may also like:
Using SVGs in web design opens up a whole new world of possibilities. It’s a great way to make your design unique and enhance the user experience.
SVG files are vector, so they scale without losing any quality and are super lightweight if done correctly and optimized.
I don’t have too much experience using SVGs in real projects yet, but I started using them on my own site, and we used them for our illustrations in the recent StudioPress.com redesign.
So, today I wanted to share with you what I’ve learned so far about creating and using your own SVGs.
For the purpose of this article, I created a simple checkmark icon and animated it with CSS:
Let’s get started!
The easiest way to make your SVG is by writing the code; for example:
Of course, that’s a really hard way if you want to make more complicated shapes, so I would recommend using apps to draw your vector images and then export them to SVG files.
I use both Adobe Illustrator and Sketch for creating my SVG files, but there is a ton of other apps available (InkScape is free) and you can even find some online tools (vectr.com or editor.method.ac).
Adobe Illustrator is my favorite app for any vector work and most of the client logos or illustrations come as AI files, so I can easily open them and export to SVG if I need to.
Let me show you how to create your own vector image in Illustrator.
First, create a new regular web document:
The canvas size is 400x400px. The size doesn’t really matter because it’s vector, but I would keep it around the dimensions that you expect it to be in the browser. It’ll be easier to maintain your stroke sizes and scale it down or up from the base size.
Then, you can create your icon using any shapes you want. I created my checkmark icon for the purpose of this tutorial:
A good rule of thumb: the fewer points, the better!
Your SVG code will be cleaner and much lighter. I made many mistakes by making my shapes too complicated, especially when I used hand-drawn illustrations. Be smarter than me! 😉
It’s OK to use strokes, different colors, and even gradients. It’ll all be exported into SVG code.
If you’re planning to animate individual elements of your icon, you can name layers and groups:
When you export it, those names will be turned into IDs. It can be really helpful for more advanced illustrations.
However, I would recommend changing IDs to classes for internal elements. You can still use ID for your main <svg> element, but it’ll be easier to manage if all of your paths and shapes have classes.
I’ll explain exporting options and dealing with the SVG code more in the next steps.
Exporting and optimizing your SVGs
Once you have your icon ready, let’s export it to SVG.
Go to File -> Export -> Export As…
If you want your SVG canvas to be exactly the size of your artboard or if you’re exporting multiple icons from one document, check the “Use Artboards” box. Otherwise, Illustrator will crop the canvas to the size of your content and will ignore the artboard size.
I would recommend always using your artboard size. It’ll be easier to maintain if your image has a specific size. Especially if you need to change or update your icon. You can simply export it again within the same artboard size.
Next, you’ll see a little box with some SVG code specific options:
In the first dropdown you can choose the way how CSS should be generated. If you have only a few elements, then “Inline Style” will probably be your best option. For more complicated illustrations, you can go with “Internal CSS.”
If you don’t want to use your layer and group names as IDs, change the “Object IDs” dropdown to “Minimal.”
You definitely want to “Minify” your SVG code for production. The only reason you may want to uncheck it is when you’re working on your animations and want to have a cleaner code to work with. Once you’re done, export the SVG again and minify it.
After choosing my options, this is what my icon’s exported code looks like:
Like I mentioned before, I’m going to change the internal element IDs to classes, and add some attributes for better accessibility (learn more here). So, my final SVG code is:
SVGs don’t take much space and when used inline as a code, it doesn’t require an HTTP request, which can improve your page load speed. If you want to optimize your SVG files even more, you can try this great tool: SVGOMG.
You can upload your SVG file there and have a bunch of extra options to optimize it even more:
Just be careful because it can break your design if you go too far.
Also, if you already have some styling or animations, make sure you don’t lose any of your classes and elements after optimization.
Free Svg Animation
Animations and CSS manipulations
After adding your SVG code to your page, you can style it like any other HTML element, for example:
You can find many JS libraries (SVGJS, Snap SVG) that can help you with making some advanced animations. However, I found that for most of the cases you can achieve some interesting effects by using only opacity, scale, translate, and colors.
So, let’s see how I did it for the previously created icon.
First, I created a simple animation for the circle:
It’s a simple scale animation combined with opacity. If you have more icons that have a similar circle, you can reuse the same code, which will save you a lot of time and effort. That’s why using classes for individual elements is better than unique IDs.
Now, let’s see the checkmark icon animation:
Ok, this one is a bit more complicated. I used stroke-dasharray and stroke-offset to create an effect of icon drawing. Chris Coyier wrote a great tutorial on exactly how it works.
Svg Animation After Effects Software
I also used some scaling and changed the color of the stroke. As you can see, the code is very simple but the effect can be interesting.
Here’s the final icon and code when combined together:
After Effects Export Svg Animation
This is a very simple example, but it shows you the potential of using SVGs in your designs. There are also many different ways how you can use your SVGs and animate them. I showed you only probably the easiest way to do it.
If you want to learn more, here are some great resources:
Svg Animation After Effects Projects