This month, I faced a new challenge: creating animated SVGs. I had never done this before. Initially, we thought of hiring a freelancer, but the results they provided were not up to our standards. As someone who can’t sleep if something is unfinished and unclear about how to complete it, I decided to take matters into my own hands.

The Initial Struggle

After my work hours, I started researching how to animate SVGs. I found a bunch of videos that looked complicated, and considering our tight timeline of two weeks to go live with 9 SVGs and 3 PNGs, I knew I had to find a more straightforward solution.

Discovering SVGator

After a while, I stumbled upon a tool called SVGator. It seemed overwhelming initially since their documentation wasn’t very user-friendly. I signed up for a free trial and began exploring all their features. I took a demo SVG and started applying different animations. The next day, I demonstrated the tool to my boss, who was quite pleased with it and approved the purchase of the paid version.

The Battle Begins

Armed with SVGator, I began animating the first SVG based on the brief. I learned about stroke color, fill color, stroke offset, and dash offset in an SVG. Here are the definitions of these terms according to ChatGPT:

– Stroke Color: The color of the outline or border of an SVG shape.
– Fill Color: The color used to fill the interior of an SVG shape.
– Stroke Offset: The distance by which the stroke is drawn inside or outside the original path.
– Dash Offset: The starting point of a dash pattern along the path of an SVG stroke.

In all the SVGs I had to animate, these four variables were the main focus. It was either playing with their opacity or values.

I completed my first SVG in three hours. From there, the process became easier and faster. My creation time reduced by 50% for the second SVG, and by the fourth SVG, it took me only 30-40 minutes per SVG. All SVGs got approved by the client and went live on the site.

The PNG Challenge

As mentioned earlier, there were 9 SVGs (which got animated) and 3 PNGs. The next challenge was to convert these PNGs to SVGs and then animate them. With only two days left to make the project live, I looked for tools online but couldn’t find any reliable ones. After much searching, I found a Chrome extension called SVG Screenshot that takes a screenshot and converts it to an SVG.

The Silver Lining

Using SVG Screenshot, I took screenshots of the 3 PNGs, converted them to SVGs, edited them a bit in Figma, and then animated them. All animated SVGs got approved by the client and went live on time. Battle won!

Lessons Learned

1. Never give up: Persistence is key.
2. Everything is possible: Even if it seems daunting at first.
3. Don’t be scared to try new technology: It might just be what you need.

Example SVG Animation

Here’s an example of one of the SVGs I animated on SVGator. The brief was for the branches to come out one by one on each feature, then be highlighted in green or red.

To do this in SVGator:

1. I created a path for each branch.
2. Used stroke offset and dash offset to control the animation of the branches.
3. Applied fill color changes to highlight them in green or red.

In conclusion, this experience taught me a lot about perseverance and the value of learning new tools. If you’re ever in a similar situation, remember these lessons and don’t be afraid to dive into new technologies. Who knows? You might just surprise yourself with what you can achieve!

Stay curious, keep learning, and never give up!