Hey everyone! Great discussion. As someone who works with SVG I really dig ideas listed by @pbrosset.
Lately, I had a debugging/optimizing session with our graphic designer. She was frustrated by the tools she was using (AI, Sketch) because:
- they do not play well with each other (e.g. AI doesn’t seem to understand some masks created by Sketch),
- have some strange limitations (she had a hard time putting two shapes in the right Z-order in Sketch)
- and produce SVG code that has to be optimized manually (SVGOMG is never enough).
I showed her, using Chrome DevTools, how I’m changing styles, attributes, removing and moving nodes around - it allowed us to do most of the debugging and cleanup. Seeing her tools and comparing them with mine, made me realize couple of things:
- SVG renderers differ (AI, Sketch, browser), editing in the browser makes you certain that WYSIWYG,
- “Elements” tab in Devtools is easy enough for non-developer to understand right away,
- DevTools give much better control, and understanding, of the file you are working on, but take away visual editing.
Visual editing part was what we really missed to do all the cleanup work using devtools. Because there is no path/shape editor in the browser we had to switch couple of times between Sketch and DevTools to get the desired result.
I’ve created a mockup of how such an editor can look in devtools . What I really like about this approach is ability to focus on a single path/shape you are editing. Inline editing (like the Razvan’s shape editor does) would be far less useful IMO. Note that shapes can cover each other, be very small or have a color that makes them hard to see. What I don’t like about this mockup is the fact that the popup may be a bit too small to edit complex shapes. I also think that the final solution should have the point highlighting (as shown by Anna Tudor) to embrace the understanding of the file being edited.