removeUselessStrokeAndFill is back. Checks for inherited attrs and references.

.svgo.yml

@@ -20,6 +20,7 @@ plugins:
   - removeMetadata
   - removeEditorsNSData
   - cleanupAttrs
+  - cleanupIDs
   - convertStyleToAttrs
   - removeRasterImages
   - cleanupNumericValues
@@ -41,7 +42,6 @@ plugins:
   - removeEmptyAttrs
   - removeEmptyContainers
   - mergePaths
-  - cleanupIDs
   - removeUnusedNS
   - transformsWithOnePath
   - sortAttrs

lib/svgo/jsAPI.js

@@ -84,10 +84,13 @@ JSAPI.prototype.isElem = function(param) {
  JSAPI.prototype.computedAttr = function(name, val) {
     if (!arguments.length) return;
 
-    for (var elem = this; elem && !elem.hasAttr(name); elem = elem.parentNode);
+    for (var elem = this; elem && (!elem.hasAttr(name) || !elem.attr(name).value); elem = elem.parentNode);
 
-    if (elem && elem.hasAttr(name, val))
+    if (val != null) {
-        return elem.attrs[name];
+        return elem ? elem.hasAttr(name, val) : false;
+    } else if (elem && elem.hasAttr(name)) {
+        return elem.attrs[name].value;
+    }
 
 };
 

plugins/_path.js

@@ -7,7 +7,7 @@ var regPathInstructions = /([MmLlHhVvCcSsQqTtAaZz])\s*/,
     transformsMultiply = require('./_transforms').transformsMultiply,
     collections = require('./_collections.js'),
     referencesProps = collections.referencesProps,
-    defaultStrokeWidth = { value: collections.attrsGroupsDefaults.presentation['stroke-width'] },
+    defaultStrokeWidth = collections.attrsGroupsDefaults.presentation['stroke-width'],
     cleanupOutData = require('../lib/svgo/tools').cleanupOutData,
     removeLeadingZero = require('../lib/svgo/tools').removeLeadingZero;
 
@@ -222,7 +222,7 @@ exports.applyTransforms = function(elem, path, applyTransformsStroked, floatPrec
         return path;
       }
       if (sx !== 1){
-        var strokeWidth = (elem.computedAttr('stroke-width') || defaultStrokeWidth).value;
+        var strokeWidth = elem.computedAttr('stroke-width') || defaultStrokeWidth;
 
         if (elem.hasAttr('stroke-width')){
           elem.attrs['stroke-width'].value = elem.attrs['stroke-width'].value.trim()

plugins/removeUselessStrokeAndFill.js

@@ -2,15 +2,16 @@
 
 exports.type = 'perItem';
 
-exports.active = false;
+exports.active = true;
 
 exports.params = {
     stroke: true,
     fill: true
 };
 
-var regStrokeProps = /^stroke/,
+var shape = require('./_collections').elemsGroups.shape,
-    regFillProps = /^fill/;
+    regStrokeProps = /^stroke/,
+    regFillProps = /^fill-/;
 
 /**
  * Remove useless stroke and fill attrs.
@@ -23,28 +24,41 @@ var regStrokeProps = /^stroke/,
  */
 exports.fn = function(item, params) {
 
-    if (item.isElem()) {
+    if (item.isElem(shape) && !item.computedAttr('id')) {
+
+        var stroke = params.stroke && item.computedAttr('stroke'),
+            fill = params.fill && !item.computedAttr('fill', 'none');
 
         // remove stroke*
         if (
             params.stroke &&
-            (!item.hasAttr('stroke') ||
+            (!stroke ||
-             item.hasAttr('stroke-opacity', '0') ||
+                stroke == 'none' ||
-             item.hasAttr('stroke-width', '0')
+                item.computedAttr('stroke-opacity', '0') ||
+                item.computedAttr('stroke-width', '0')
             )
         ) {
+            var parentStroke = item.parentNode.computedAttr('stroke'),
+                declineStroke = parentStroke && parentStroke != 'none';
+
             item.eachAttr(function(attr) {
                 if (regStrokeProps.test(attr.name)) {
                     item.removeAttr(attr.name);
                 }
             });
+
+            if (declineStroke) item.addAttr({
+                name: 'stroke',
+                value: 'none',
+                prefix: '',
+                local: 'stroke'
+            });
         }
 
         // remove fill*
         if (
             params.fill &&
-            item.hasAttr('fill', 'none') ||
+            (!fill || item.computedAttr('fill-opacity', '0'))
-            item.hasAttr('fill-opacity', '0')
         ) {
             item.eachAttr(function(attr) {
                 if (regFillProps.test(attr.name)) {
@@ -52,12 +66,17 @@ exports.fn = function(item, params) {
                 }
             });
 
-            item.addAttr({
+            if (fill) {
-                name: 'fill',
+                if (item.hasAttr('fill'))
-                value: 'none',
+                    item.attr('fill').value = 'none';
-                prefix: '',
+                else
-                local: 'fill'
+                    item.addAttr({
-            });
+                        name: 'fill',
+                        value: 'none',
+                        prefix: '',
+                        local: 'fill'
+                    });
+            }
         }
 
     }

test/plugins/removeUselessStrokeAndFill.01.svg

@@ -1,15 +1,41 @@
 <svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <g id="test">
+            <rect stroke-dashoffset="5" width="100" height="100"/>
+        </g>
+    </defs>
     <circle fill="red" stroke-width="6" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
     <circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
     <circle fill="red" stroke="#000" stroke-width="0" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
     <circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+    <g stroke="#000" stroke-width="6">
+        <circle fill="red" stroke="red" stroke-width="0" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+        <circle fill="red" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+    </g>
+    <g stroke="#000">
+        <circle fill="red" stroke-width="0" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+        <circle fill="red" stroke="none" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+    </g>
 </svg>
 
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <g id="test">
+            <rect stroke-dashoffset="5" width="100" height="100"/>
+        </g>
+    </defs>
     <circle fill="red" cx="60" cy="60" r="50"/>
     <circle fill="red" cx="60" cy="60" r="50"/>
     <circle fill="red" cx="60" cy="60" r="50"/>
     <circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+    <g stroke="#000" stroke-width="6">
+        <circle fill="red" cx="60" cy="60" r="50" stroke="none"/>
+        <circle fill="red" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
+    </g>
+    <g stroke="#000">
+        <circle fill="red" cx="60" cy="60" r="50" stroke="none"/>
+        <circle fill="red" cx="60" cy="60" r="50" stroke="none"/>
+    </g>
 </svg>

test/plugins/removeUselessStrokeAndFill.02.svg

@@ -1,13 +1,31 @@
 <svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <g id="test">
+            <rect fill-opacity=".5" width="100" height="100"/>
+        </g>
+    </defs>
     <circle fill="none" fill-rule="evenodd" cx="60" cy="60" r="50"/>
-    <circle fill="red" fill-opacity="0" cx="60" cy="60" r="50"/>
+    <circle fill="red" fill-opacity="0" cx="90" cy="90" r="50"/>
+    <circle fill-opacity="0" fill-rule="evenodd" cx="90" cy="60" r="50"/>
     <circle fill="red" fill-opacity=".5" cx="60" cy="60" r="50"/>
+    <g fill="none">
+        <circle fill-opacity=".5" cx="60" cy="60" r="50"/>
+    </g>
 </svg>
 
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <circle cx="60" cy="60" r="50" fill="none"/>
+    <defs>
-    <circle cx="60" cy="60" r="50" fill="none"/>
+        <g id="test">
+            <rect fill-opacity=".5" width="100" height="100"/>
+        </g>
+    </defs>
+    <circle fill="none" cx="60" cy="60" r="50"/>
+    <circle fill="none" cx="90" cy="90" r="50"/>
+    <circle cx="90" cy="60" r="50" fill="none"/>
     <circle fill="red" fill-opacity=".5" cx="60" cy="60" r="50"/>
+    <g fill="none">
+        <circle cx="60" cy="60" r="50"/>
+    </g>
 </svg>