MOTION USING .SVG ANIMATION TECHNIQUES
Currently working on a logo for a client. He requested animation for part of his business name. He wanted the business name to appear as if it was being handwritten. Here is my test work in progress in using text animation with a .svg file.
SVG files (Scalable Vector Graphics) are vector graphics instead of pixel-based images, and therefore you can resize them without losing image quality. These graphics also have a crisper and cleaner appearance.
For this project, I created the original .svg file in Adobe Illustrator and manipulated the file to perform the animation. I set the duration of the animation, the direction, the iteration count as well as holding the last keyframe. Took a few tries, but seems to work on Chrome. Still having trouble with Safari.
I will update you soon on my progress.
My inspiration and direction originated at from a post on Stack Overflow that pointed me to this codepen example.
UPDATES- RENDERING ON SAFARI (solved)
After trying several suggested methods from Stackoverflow and other online support forums, the animated .svg now fully renders on Safari.
I realized Safari doesn’t recognize multiple paths combined into one clip-path. By separating the letters into their own clip-path and labeling each with its own id name, the animation works when viewed in Safari on my desktop as well as my iPhone 11XR.
I did include the -webkit-clip-path and the -webkit-transform: translateZ(1px) attributes. One of the contributors mention, “It forces hardware acceleration (essentially the browser pays more attention to rendering it) by putting it on the GPU.”
This image shows only a portion of the .svg animation code using my original code. If you look closely, one can slightly see the tops of the text. Glad I figured out how to make the text animation render successfully. The animation works on Firefox as well.
Still tweaking the code … I will continue to provide my progress.
CHROME
SAFARI
