Switch from feGaussianBlur to filter:blur axe312ger#335

xerc · Feb 8, 2024 · b4371d5 · b4371d5
1 parent 91f9928
commit b4371d5
Showing 1 changed file with 2 additions and 6 deletions.
diff --git a/packages/sqip-plugin-blur/src/sqip-plugin-blur.ts b/packages/sqip-plugin-blur/src/sqip-plugin-blur.ts
@@ -43,7 +43,7 @@ export default class SVGPlugin extends SqipPlugin {
         alias: 'b',
         type: Number,
         description:
-          'Set the stdDeviation value for the GaussianBlur SVG filter. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur',
+          'Set the radius value [pixel] for the GaussianBlur CSS filter. See: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur#syntax',
         defaultValue: 12
       }
     ]
@@ -87,11 +87,7 @@ export default class SVGPlugin extends SqipPlugin {
     }
     const patchedSVG = patchSVGGroup(svg)
     const $ = loadSVG(patchedSVG)
-    const blurFilterId = 'b'
-    $('svg > g').attr('filter', `url(#${blurFilterId})`)
-    $('svg').prepend(
-      `<filter id="${blurFilterId}"><feGaussianBlur stdDeviation="${this.options.blur}" />`
-    )
+    $('svg > g').attr('filter', `blur(${this.options.blur}px)`)
 
     return $.html()
   }