• Post Reply Bookmark Topic Watch Topic
  • New Topic

Practical SVG: toolchain  RSS feed

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65900
135
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Chris, what are some of your favorite tools for creating, editing and optimizing SVG icons for the web?

Illustrator seems to be the de facto SVG editor, but I find that its output usually needs hand-twerking before being usable. Are there better tools? (Or am I just being klutzy with Illustrator?)
 
Chris Coyier
Author
Greenhorn
Posts: 7
5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Howdy!

If you haven't used Illustrator in a while, that's probably worth exploring again. Illustrator can do multiple artboards, which is kinda perfect for icons. Also pretty new (maybe the 2017 release?) is the Asset Export panel. It's a panel just like Layers and the Pathfinder or whatever else. You drag things onto it, and they become individually exportable in different formats and sizes. It's fairly perfect for managing an icon set. You can click on one and export it individually, or any combination of them, or all of them at once. The output from it is surprisingly great. The file is named just how you named the icon in the Asset Export panel. More importantly, the code is pretty darn clean. Almost no Illustrator cruft that you might be used to seeing. It still might not be totally perfect. Sometimes I get some useless `<g>` tags, maybe some fairly useless `data-name` attributes, and a `<title>` you'll almost certainly want to change. But all in all, very useable. You may still wanna pass it through SVGO though.



Sketch is also quite good for managing an icon set. Multiple artboards are a classic feature of it, and each can easily be made accessible. Even better, SVGO can be added as a plugin right to Sketch, so the output can be rather perfect.

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65900
135
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Great information! Thanks, Chris.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!