I'd like to use Illustrator to generate a set of assets for use in web. The idea is that I would define one or more defs that could be called upon late.

It seems this is not the intended use, and to do so, I would have to use a custom script or create the SVG asset file by hand.

Is there a way to handle defs with Illustrator, if not (likely) are there any alternatives or accepted workflows that would make this most consistent and painless?

3 Answers 3


We use Icomoon at work. It's a good tool for storing assets you intend to use on the web. It allows minor edits within the app for things like grid size, color and positioning/scaling. You can also export as a font or svg sprite. There are also a few options for calling the icons. I think you would probably need to save multiple variations of your svg and call the specific one you want in your code for the intended purpose.


If the icons inside the Illustrator document are all turned into symbols, this will trigger the usage of <defs>, I believe.



I've been using gravit lately. It's nowhere as feature-rich as adobe illustrator, but it's the most feature rich web alternative, and much better at handling export for web, from the standpoint of requiring minimal work to use in a web app.

I've come across a resource I thought I'd share - boxy svg

it's a free chrome app that allows svg editing, as well as defining symbols in defs. One drawback I found is that it makes a mess of your svg if you do any edits. I've changed the line width, and it in-lined all the styles, which with a lot of lines lead to a hefty file size increase.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.