Unveiling the Artistry: A Journey into SVG Graphics Animation

Create a captivating SVG animation

SVG stands for Scalable Vector Graphics

SVG graphics are often used for icons, logos, illustrations and other graphical elements on websites and applications. They provide a lightweight flexible solution for displaying high-quality graphics that can adapt to different devices and screen resolutions.

While I’ve used SVG images in web projects plenty of times, I’ve never had to actually directly manipulate them in any way.

Then one evening on my Software Engineering bootcamp, we were challenged to do an SVG animation. 😱

It was my first time looking under the hood at an SVG file and there was a lot of brain ache. But I think it worked out well in the end. I learned a lot, anyway. Won a prize too!

On this page, I tell you how I did it.

But first, the basics:

What is SVG?

SVG is an XML-based file format that lets you create sharp scalable graphics at a fraction of the size they’d be if you made them as pixelated rasters like JPG, PNG or GIF.

SVGs are vector graphics.

Vector graphics use mathematical equations to draw out your designs. These mathematical equations are translated into points that are connected by either lines or curves, also known as vector paths, and they make up all the different shapes you see in a vector graphic.

– vectr.com

Vectors graphics are infinitely scalable and don’t lose quality as they scale – useful for responsive web design where graphics need to adapt to different screen sizes and resolutions and remain crisp no matter how big or small you make them.

Creating SVG Graphics

SVG files can be created and edited in graphics software and manipulated dynamically using JavaScript and CSS. In fact, the animation in my seascape is handled entirely by CSS.

Here are some ways to create your own SVG graphics – the generators are the easiest place to start for beginners.

• Vector Graphics Editors: Programs like Adobe Illustrator, Inkscape, CorelDRAW and Sketch provide comprehensive editing capabilities for SVG files. You can manipulate shapes, paths, colours and text from the toolbar and it’s a popular way to create fonts and icons. I did initially try Inkscape and Affinity Designer but soon discovered there’s a reason I gravitate towards traditional art methods rather than digital.
• Text Editors: Only proper boffins would code an SVG purely in text but because these graphics are XML-based, they’re okay to edit with Notepad++ or Visual Studio Code. You’ll open up to a sea of code so you’ll need to be able to read to see how it fits together – I did all the colouring and positioning of my seascape only using VS Code.
• Online Generators: SVG-Edit and Vectr are a couple of sites that let you create vector graphics online. I used the Haikei wave generator to make the waves for my seascape.

How I made my Seascape animation using SVG

You might be wondering why the seascape in my video is not as clear as it should be for a vector.

Well, it’s because my beautiful clean SVG has been rasterised into a video. It’s been pixelated!

I turned it into an MP4 because I wanted to put it on my Instagram page and had to show it as a video because Instagram doesn’t let you render live code.

An interesting point to note is that my video came to 1.5MB after I compressed it. My original SVG animation file comes in at a mere 47KB. That’s the power of SVG!

So here’s what I did:

• I identified a concept of what I wanted to achieve. I wanted a sun and clouds in a bright sky with boats sailing on a calm sea. The fish became a happy addition when things became clearer and I knew what I was doing.
• I tried to draw the individual elements of my seascape in an SVG editor. It was tedious because I was working to a deadline doing something I’d never done before. Time was of the essence and I remembered the main goal of this assignment was to do a creative animation with SVG, not draw a picture from scratch. Always remember the task in hand!
• I got my elements together. I created some from online SVG generators and found others from free SVG download websites.
• Turning these individual elements into an animated seascape is where the creativity kicked up to brain-abuse level. I used VS Code to adjust the colours, positioning and shapes as I wanted.
• If you look at my code, you’ll see the HTML is in layered divs. The sea, the sun, the clouds, the ships. They’re all on their own layers and this means I can handle the CSS keyframes (animation) for each layer individually. I can make the sun swell and recede, the clouds float left and right and the ships sail round and round for eternity.
• The sea and the fish were a bit more complicated. As you know, I generated my waves from an online wave generator and I wanted to put my fish in-between the waves. In VS Code, I isolated the code for each wave and gave each wave its own movement. I then slotted the fish in between two of the waves and made it jump about in excitement. If I’d had time, I’d have added a shark too.

This was a fun challenge.

If you try something like this, let me know because I’d love to see it!