Animated SVG Icons: A Step-by-Step Guide to Using DrawSVG

Your web pages could not just display information but also tell a vivid story through animated SVG icons. This isn’t just about aesthetics; it’s about engaging your audience in a way that static images never could.

In the realm of web design, the power of SVG (Scalable Vector Graphics) combined with the magic of the DrawSVG plugin unlocks a new dimension of creativity. But how do you harness this power? What secrets lie in the simple yet intricate world of SVG animation?

Setting Up the Environment

Start by creating an index.html file. Insert the standard HTML5 codes into this file to set up the basic structure of your webpage.

To incorporate SVG animations, you’ll need to include two specific scripts:

• jQuery: This script is crucial for simplifying HTML document manipulation and event handling.
• DrawSVG: This is the main plugin we’ll use to animate SVG elements.
  You can access these scripts via online repositories or direct download links.

https://code.jquery.com/jquery-latest.min.js
https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js

Preparing SVG Icons in Illustrator

Using Adobe Illustrator or a similar vector graphics editor, create your SVG icons. Here’s a brief guide:

1. Select Your Vector: Choose a vector graphic that you wish to convert into an SVG.
2. Adjust Appearance: Ensure that your graphic is suitable for conversion. For instance, set the ‘Fill’ value to ‘None’ and adjust the ‘Stroke’ (outline) to your desired color and thickness.

Exporting SVG Code

After finalizing your vector graphic:

1. Go to File > Export > Export As.
2. Choose the SVG format and click ‘Export’.
3. In the export settings, opt for ‘Convert to Outlines’ for fonts and ‘Embed’ for images.
4. Click the ‘Show Code’ button to generate the SVG code

Incorporating SVG into HTML

1. Create a Wrapper Div: Insert a div in your HTML to contain the SVG code.
2. Paste SVG Code: Place the copied SVG code inside this div.
3. Add Styling: If necessary, add CSS styles directly or link to an external stylesheet. Set background colors and positioning to make the SVG visible and aesthetically pleasing.

body {
  background: #1e075f;
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
}

Adding Animation with JavaScript

1. Insert JavaScript Code: Beneath the div containing your SVG, add JavaScript code to animate the SVG using DrawSVG.
2. Source DrawSVG: Ensure you source DrawSVG from a reliable CDN like JS Deliver for effective loading.
3. Customize the Animation: Modify the JavaScript as needed to achieve the desired animation effect.

var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');

Conclusion

Animating SVG icons with the DrawSVG plugin can significantly enhance the visual appeal of your website. This tutorial provided a step-by-step guide to implementing this technique.