Bug 143476 - [GTK] Web Inspector: Optimize SVG images
Summary: [GTK] Web Inspector: Optimize SVG images
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Andres Gomez Garcia
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-04-07 04:32 PDT by Andres Gomez Garcia
Modified: 2015-04-30 02:08 PDT (History)
11 users (show)

See Also:


Attachments
Patch (1.47 MB, patch)
2015-04-29 13:42 PDT, Andres Gomez Garcia
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Andres Gomez Garcia 2015-04-07 04:32:44 PDT
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
Comment 1 Radar WebKit Bug Importer 2015-04-07 04:33:08 PDT
<rdar://problem/20447837>
Comment 2 Radar WebKit Bug Importer 2015-04-07 04:33:08 PDT
<rdar://problem/20447838>
Comment 3 Andres Gomez Garcia 2015-04-29 13:25:33 PDT
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
Comment 4 Andres Gomez Garcia 2015-04-29 13:42:48 PDT
Created attachment 251985 [details]
Patch
Comment 5 WebKit Commit Bot 2015-04-29 14:44:50 PDT
Comment on attachment 251985 [details]
Patch

Clearing flags on attachment: 251985

Committed r183577: <http://trac.webkit.org/changeset/183577>
Comment 6 WebKit Commit Bot 2015-04-29 14:44:56 PDT
All reviewed patches have been landed.  Closing bug.
Comment 7 Joseph Pecoraro 2015-04-29 14:56:33 PDT
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.
Comment 8 Andres Gomez Garcia 2015-04-30 02:08:20 PDT
(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!