Skip to content

Switch from feGaussianBlur to filter:blur #335 #336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Switch from feGaussianBlur to filter:blur #335 #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b4371d5
Switch from `feGaussianBlur` to `filter:blur` #335
xerc Feb 8, 2024
cab6619
Adapt info/link within README @ sqip-plugin-blur
xerc Feb 8, 2024
c26b99d
Adapt unit-test snapshots @ sqip-plugin-blur
xerc Feb 8, 2024
22288de
Adapt jest-test snapshots @ sqip-cli
xerc Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/sqip-cli/__tests__/e2e/__snapshots__/sqip-cli-e2e.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,11 @@ exports[`cli api --help shows help screen to user 1`] = `
ffffff00
--primitive-cores number number of parallel workers
(default uses all cores)
-b, --blur-blur number Set the stdDeviation value for
the GaussianBlur SVG filter. See:
-b, --blur-blur number Set the radius value [pixel] for
the GaussianBlur CSS filter. See:
https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/feGaussianBlur
US/docs/Web/CSS/filter-
function/blur#syntax

Examples

Expand Down
7 changes: 4 additions & 3 deletions packages/sqip-plugin-blur/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
# `sqip-plugin-blur`

> TODO: description

##### Options
| command | Description |
| ------------- | ------------- |
|-b, --blur-blur *number* | Set the stdDeviation value for the GaussianBlur SVG filter. See: https://developer.mozilla.org/en- US/docs/Web/SVG/Element/feGaussianBlur
| command | Description |
| ----------------------- | ----------- |
|-b, --blur-blur *number* | Set the radius value [pixel] for the [GaussianBlur CSS filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur#syntax). |

## Usage

Expand Down
4 changes: 2 additions & 2 deletions packages/sqip-plugin-blur/__tests__/unit/__snapshots__/sqip-plugin-blur.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

exports[`applies blur filter do nothing when no blur is given 1`] = `"<svg viewBox=\\"0 0 1024 768\\"><rect fill=\\"#bada55\\"/><g><path fill=\\"#C0FFEE\\" d=\\"M51.5 17.5l4 18 15 1z\\"/></g></svg>"`;

exports[`applies blur filter svg with group and blur 1`] = `"<svg viewBox=\\"0 0 1024 768\\"><filter id=\\"b\\"><feGaussianBlur stdDeviation=\\"5\\"/></filter><rect fill=\\"#bada55\\"/><g filter=\\"url(#b)\\"><g><path fill=\\"#C0FFEE\\" d=\\"M51.5 17.5l4 18 15 1z\\"/></g></g></svg>"`;
exports[`applies blur filter svg with group and blur 1`] = `"<svg viewBox=\\"0 0 1024 768\\"><rect fill=\\"#bada55\\"/><g filter=\\"blur(5px)\\"><g><path fill=\\"#C0FFEE\\" d=\\"M51.5 17.5l4 18 15 1z\\"/></g></g></svg>"`;

exports[`applies blur filter svg without group and blur 1`] = `"<svg viewBox=\\"0 0 1024 768\\"><filter id=\\"b\\"><feGaussianBlur stdDeviation=\\"5\\"/></filter><rect fill=\\"#bada55\\"/><polygon points=\\"0,100 50,25 50,75 100,0\\"/></svg>"`;
exports[`applies blur filter svg without group and blur 1`] = `"<svg viewBox=\\"0 0 1024 768\\"><rect fill=\\"#bada55\\"/><polygon points=\\"0,100 50,25 50,75 100,0\\"/></svg>"`;

exports[`does prepare problematic svgs properly for blurring svg with group 1`] = `"<svg viewBox=\\"0 0 1024 768\\"><rect fill=\\"#bada55\\"/><g><path fill=\\"#C0FFEE\\" d=\\"M51.5 17.5l4 18 15 1z\\"/></g></svg>"`;

Expand Down
8 changes: 2 additions & 6 deletions packages/sqip-plugin-blur/src/sqip-plugin-blur.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
]
Expand Down Expand Up @@ -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()
}
Expand Down