[GTK] Web Inspector: Optimize SVG images

• Component: Web Inspector
• Status: RESOLVED FIXED

[Andres Gomez Garcia]

GTK's own SVG images for the WebInspector have a lot of unneeded XML (unused attributes, tags, etc) generated by Inkscape.

We would like to slim them down.

Inkscape has some own methods to do so:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html


There are, also, a number of alternative tools that could help in this task:
https://github.com/svg/svgo
https://github.com/RazrFalcon/SVGCleaner
https://github.com/preciousforever/SVG-Cleaner

[Radar WebKit Bug Importer]

<rdar://problem/20447837>

[Radar WebKit Bug Importer]

<rdar://problem/20447838>

[Andres Gomez Garcia]

I'm finally using a customized script which mainly makes use of the scour tool (http://www.codedread.com/scour/)

This customized script can be found at:
https://github.com/tanty/design-hodgepodge/blob/master/WebKit/WebInspector/sandbox/optimizing.sh

The original SVG files that I used to create material can be found at:
https://github.com/tanty/design-hodgepodge/tree/master/WebKit/WebInspector

[Andres Gomez Garcia]

Created attachment 251985 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 251985 [details]
Patch

Clearing flags on attachment: 251985

Committed r183577: <http://trac.webkit.org/changeset/183577>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Joseph Pecoraro]

Comment on attachment 251985 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=251985&action=review

Awesome! This is a real improvement on the readability of the SVGs!

> Source/WebInspectorUI/UserInterface/Images/gtk/BackArrow.svg:4
> + <path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none" d="m6.3438 0c-0.1429 0.034005-0.2751 0.11116-0.375 0.21875l-3.75 3.75-0.5 0.53125 0.5 0.53125 3.75 3.75c0.1398 0.1379 0.3348 0.2182 0.5312 0.2188h0.03125 0.0625 0.65625v-0.5625-0.09375c0.0359-0.2367-0.048-0.4885-0.2188-0.6563l-3.1874-3.1875 3.1874-3.2188c0.1389-0.139 0.2195-0.33465 0.2188-0.5312v-0.15625-0.59375h-0.5938-0.0937-0.0625-0.0938z"/>

A lot of these have style attributes that I don't think apply. For example here: text-transform and text-indent. Do they apply if this is just a path without text?

> Source/WebInspectorUI/UserInterface/Images/gtk/CloseLarge.svg:4
> + <path style="block-progression:tb;text-indent:0;color:#bebebe;enable-background:new;text-transform:none" d="m4 4h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l2.2812 2.2813 2.312-2.2813c0.266-0.2305 0.447-0.3055 0.688-0.3125h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-2.2812 2.2812 2.25 2.25c0.188 0.188 0.281 0.454 0.281 0.719v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-2.281-2.2815-2.2812 2.2815c-0.1882 0.188-0.4535 0.281-0.7188 0.281h-1v-1c-0.000003-0.26529 0.09306-0.53058 0.28125-0.71875l2.2813-2.2498-2.2813-2.2812c-0.2107-0.1946-0.3031-0.4692-0.2812-0.75v-1z"/>

Here is another one that is confusing. "enable-background:new". I don't think WebKit supports that, so it can probably be removed from all these SVGs.

[Andres Gomez Garcia]

(In reply to comment #7)
> Comment on attachment 251985 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=251985&action=review
> 
> Awesome! This is a real improvement on the readability of the SVGs!

Thanks!

> > Source/WebInspectorUI/UserInterface/Images/gtk/BackArrow.svg:4
> > + <path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none" d="m6.3438 0c-0.1429 0.034005-0.2751 0.11116-0.375 0.21875l-3.75 3.75-0.5 0.53125 0.5 0.53125 3.75 3.75c0.1398 0.1379 0.3348 0.2182 0.5312 0.2188h0.03125 0.0625 0.65625v-0.5625-0.09375c0.0359-0.2367-0.048-0.4885-0.2188-0.6563l-3.1874-3.1875 3.1874-3.2188c0.1389-0.139 0.2195-0.33465 0.2188-0.5312v-0.15625-0.59375h-0.5938-0.0937-0.0625-0.0938z"/>
> 
> A lot of these have style attributes that I don't think apply. For example
> here: text-transform and text-indent. Do they apply if this is just a path
> without text?

You are right. Those are dead styles from some previous work with text, until I transformed it into a path. Clearly, we still can do the SVG simpler.

> > Source/WebInspectorUI/UserInterface/Images/gtk/CloseLarge.svg:4
> > + <path style="block-progression:tb;text-indent:0;color:#bebebe;enable-background:new;text-transform:none" d="m4 4h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l2.2812 2.2813 2.312-2.2813c0.266-0.2305 0.447-0.3055 0.688-0.3125h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-2.2812 2.2812 2.25 2.25c0.188 0.188 0.281 0.454 0.281 0.719v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-2.281-2.2815-2.2812 2.2815c-0.1882 0.188-0.4535 0.281-0.7188 0.281h-1v-1c-0.000003-0.26529 0.09306-0.53058 0.28125-0.71875l2.2813-2.2498-2.2813-2.2812c-0.2107-0.1946-0.3031-0.4692-0.2812-0.75v-1z"/>
> 
> Here is another one that is confusing. "enable-background:new". I don't
> think WebKit supports that, so it can probably be removed from all these
> SVGs.

Same than above. I suppose, this is some dead style from Inkscape.

I will open a new bug to further optimize the SVGs and keep checking the available tools to automatize this.

Thanks for your comments, Joseph!