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
<rdar://problem/20447837>
<rdar://problem/20447838>
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
Created attachment 251985 [details] Patch
Comment on attachment 251985 [details] Patch Clearing flags on attachment: 251985 Committed r183577: <http://trac.webkit.org/changeset/183577>
All reviewed patches have been landed. Closing bug.
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.
(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!