feat(cleanupStyleAttributes): minify opacities in properties. (#85)

svg-utils · Nov 16, 2024 · 339f2e3 · 339f2e3
1 parent 810d78a
commit 339f2e3
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/plugins/cleanupStyleAttributes.js b/plugins/cleanupStyleAttributes.js
@@ -1,5 +1,6 @@
 import { getStyleDeclarations } from '../lib/css-tools.js';
 import { LengthOrPctValue } from '../lib/lengthOrPct.js';
+import { OpacityValue } from '../lib/opacity.js';
 import { writeStyleAttribute } from '../lib/svgo/tools.js';
 import { visitSkip } from '../lib/xast.js';
 import {
@@ -130,6 +131,14 @@ export const fn = (root, params, info) => {
                 newValue.value = minified;
               }
               break;
+            case 'fill-opacity':
+            case 'opacity':
+            case 'stop-opacity':
+            case 'stroke-opacity':
+              {
+                newValue.value = OpacityValue.getOpacityObj(v.value);
+              }
+              break;
           }
           newProperties.set(p, newValue);
         }

diff --git a/test/plugins/cleanupStyleAttributes.18.svg.txt b/test/plugins/cleanupStyleAttributes.18.svg.txt
@@ -0,0 +1,21 @@
+Minify opacities.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+  <rect width="20" height="6" style="fill:blue;fill-opacity:0.5"/>
+  <rect y="8" width="20" height="6" style="stroke:blue;stroke-opacity:0.2"/>
+  <g style="opacity:0.1">
+    <rect y="16" width="20" height="6"/>
+  </g>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+    <rect width="20" height="6" style="fill:blue;fill-opacity:.5"/>
+    <rect y="8" width="20" height="6" style="stroke:blue;stroke-opacity:.2"/>
+    <g style="opacity:.1">
+        <rect y="16" width="20" height="6"/>
+    </g>
+</svg>