Jump to content
Search Community

Tell me: how do you clean up your SVG files (and use class-es instead of id's)?

studioalloy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm a designer by trade but also get designs from others that I want to transform into animations. The problem that I am having is that all the design programs (Adobe Illustrator, Affinity Designer, Gimp) export SVG with `id`'s but it would be much easier to work with `class`-es.

 

I found a lot of tools to optimize SVGs like [SVGO](https://github.com/svg/svgo), which in turn has a lot of options to optimize your files with all kinds of settings and all kinds of platforms, but I don't really see a easy way of transforming just the `id`'s to `class`-es. My current workflow is also converting the design file withint the design program (I prefer is Affinity Designer) and than exporting as SVG, I usually than open it in my code editor and start working on the animation. When I than find something that is wrong in the design I go back to the design program, fix it and export the SVG again. This can happen multiple times a design file and somewhere in there I would love to convert the SVG code to classes.

 

I was thinking of writing my own tool that transforms the file, but I would first love to hear how others do these kinds of steps or have other tips that could improve my workflow. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...