Are you using SVGs in your web projects? Scalable vector graphics can be used as background patterns, icons, logos and illustrations. They look nice and sharp at all screen resolutions. SVGs can have a small file size which helps you to keep your website size smaller and work better.

How do I get started?

It depends. Are you planning on creating your own or using pre-made SVGs? If you want to create your own, check out SVG on the Web. It is a practical guide for creating and manipulating scalable vector graphics. CSS-Tricks walks you through creating a simple SVG and manipulating it using CSS in Using SVG.

Where can I get SVGs to use?

• SVG For Backgrounds lets you customize and apply a selection of backgrounds.
• HeroPatterns has a collection of svg background patterns that you can customize for your web projects.
• HeroIcons creates scalable vector graphic icons that you can customize with CSS.

Add Animation to Your Scalable Vector Graphics

People react and respond to movement. You can animate svgs to draw attention to a specific area. Animate your graphics with CSS or JavaScript.

You can start with the basics and learn how to use CSS to animate your graphics.

Or you can use SVGator, an online tool, that helps you animate scalable vector graphics.

If you prefer JavaScript, you can use Snap.svg, a JavaScript library, for animating your vector graphics.