Notes: Animating an SVG File

November 29, 2019

Figuring out a simple animation using a SVG file. The purpose with flash not being useable on several devices and various security concerns with flash files that people will have this feature turned off on their browsers this is a simple, small way to replace simple flash files.

Link to CodePen Sample

SVG files are Scalable Vector Graphics, that can be created in programs like Illustrator. These instruction are from using Adobe Illustrator 2020.

WORKING NOTES:

Create the file like you would any other Illustrator file at the final size you want it.
Name the Layers where you would remember the names and understand them.
Save as an Illustrator file as you go, when you’re ready to save for the web go to File > Export to..
For this one I used these options:
Styling: Internal CSS
Font: SVG
Images: Preserve
Object IDs: Layer Names
Decimal: 2
I had unchecked Minify (this left the code longer but easier to read, see codepen sample)
I unchecked Responsive
Then I clicked ‘Show Code’ and copy and pasted that code into a basic HTML File template.

I think went through the code and did a bit of clean up. Because of how simple this SVG file is I went through and put comments above the style areas, these had names like class = .cls-5  when you go down into the SVG file you’ll see an ID that has your layer name. since I wasn’t going to do a lot I would add my code to the .cls file. Any wording such as the ‘Look a…’ had a few different styles to it, I went through and removed the extra styles between to keep it easier to manage.

I then added the keyframes to the HTML Header style area, for a big project where you’ll share keyframes or have the file on more than one page you’ll want to add the CSS to an external file.

Related Articles

Python – Birthday List

Python – Birthday List

Birthday List Python Program Worked on a project for a publication to pull the birthdays of their members quickly. To help demonstrate what they were working with; they had two Word files containing tables of birthday months, the dates for the month were not in order...

read more
Microsoft Certified: Azure AI Fundamentals

Microsoft Certified: Azure AI Fundamentals

Passed the Microsoft Certified: Azure AI Fundamentals Certification:https://learn.microsoft.com/api/credentials/share/en-us/LynnAmacher-1690/4DB4563B79AA3C11?sharingId=9196330BBB36EAF4 The graphic was created in Microsoft Image creator with DALL-E where I added the...

read more
AI as your assistant

AI as your assistant

With all the talk of AI will be taking your job and articles like you don’t need to learn coding AI will do it all for you. I’ve been playing around with AI, decided to try to see how much of what AI can be done for me. I use AI generical throughout the post and not...

read more

Pin It on Pinterest

Share This