Very new to Lottiefiles and trying to upload an SVG logo to animate. When I do this the holes (counters) in the letters fill in. I have tried to save this SVG out a few different ways from illustrator but am still having the same issue. Any ideas?
Hello there. I’ll see if I can help. What do you mean “upload SVG to animate”? How are you trying to animate the SVG?
Apologies for the confusion. I’m attempting to upload an SVG logo file for animation purposes, but I’m encountering a problem where the ‘holes’ in the text are getting filled in. The text has been outlined in Illustrator.
Are you using after effects to animate it? Is your SVG logo an AI file type or is it SVG?
I had planned to animate it with Lottiefiles. It started as a logo in Figma that I exported as an SVG file. After opening it in Illustrator, I saved it in multiple SVG formats. However, when I uploaded it to the Lottiefiles stage, it appeared as though the holes were filled in!
1 Like
Alright thanks for help with answering my questions now I understand it better. I’ve never animated anything using LottieFiles, I only use After Effects. It sounds like the problem is happening once you import into LottieFiles. I’ll have to look into this further
@Keith It could just be a bug. I did a test using the Lottie Creator using the exact same letter as you, a B shape and noticed that the filled in parts are empty when exporting, they are only filled in while using the Lottie creator
Oh, strange! Thank you so much for lookining into that sir!
1 Like
No problem at all! I really enjoy trying to help others, it’s fun learning something new
1 Like
hi Keith and IIO—
i’ve just had a similar issue with Illustrator text looking fine when brought into After Effects, but with text apertures appearing filled in once exporting my JSON file. (i.e. the letter “O” does not appear like a donut, but like a solid circle.)
my solution in After Effects was to look at the two masks for letters such as “O.” both masks are set to “Difference” by default. to fix the problem I set the first mask to “Add” and the second mask to “Subtract.” the resulting JSON file looked correct.
I believe Illustrator is doing something similar with your letterforms. I would try a few alternate methods with your aperture letters, like O or B. try to make or release a Compound Shape setting. also, consider selecting the smaller, inner aperture strokes and then use Pathfinder to Subtract a hole from the larger shape. this might mimic the logic that worked for me in After Effects.
I trust you’ve solved your problem in the past months, but hopefully the above can help someone out.