hide-if-svg-contains

The hide-if-svg-contains snippet hides any HTML element matching a CSS selector if it contains a SVG image with the given visible text.

Parameters

Name	Description	Mandatory
search	Text or regex pattern to match within SVG visible content.	Yes
selector	CSS selector identifying which elements to hide.	Yes
searchSelector	Target specific elements containing the matched text. Defaults to `selector`.	No
optionalParameters	Any number of `key:value` pairs that change how the snippet decides whether text is visible. Each pair is wrapped in its own single quotes and separated by spaces, in any order — for example `'-font-size-threshold:4' 'opacity:1'`. A value may be a regex if it starts and ends with `/`. See the defaults below.	No

Default parameters

Even with no optional parameters, the snippet already applies the checks below when deciding whether text counts as visible. Pass any of them as an optional parameter to override the default.

Name	Description	Default
`-position-threshold`	Text nodes within this many pixels of the image root count as inside the viewport. Anything further out counts as invisible.	`500`
`-disable-contained-check`	Set to `true` to stop counting text that is not contained within the image as invisible.	`false`
`-opacity-alpha-threshold`	Text at or below this `opacity`, or this alpha value in `color` / `fill`, counts as hidden. This is a range check, so it catches anything below the value, and it takes precedence over the exact `opacity` and `fill` entries below. Set it to `0` to fall back to those exact checks.	`0.1`
`-font-size-threshold`	Text at or below this `font-size` counts as hidden. This is a range check and takes precedence over the exact `font-size` entry below. Set it to `0` to fall back to that exact check.	`1`
`-wait-until`	Delays running the snippet until the given state is reached. Accepts `loading`, `interactive`, `complete`, `load`, or any event name.	empty, runs immediately
`display`	Text with this computed `display` value counts as invisible.	`none`
`visibility`	Text with this computed `visibility` value counts as invisible.	`hidden`
`opacity`	Text with this computed `opacity` value counts as invisible. `-opacity-alpha-threshold` takes precedence.	`0`
`fill`	Text with this computed `fill` value counts as invisible. `-opacity-alpha-threshold` takes precedence over its alpha component.	`none`
`font-size`	Text with this computed `font-size` value counts as invisible. `-font-size-threshold` takes precedence.	`0`

Examples

hide-if-svg-contains Sponsored div.parent div.child — scans div.child elements and hides div.parent if the background image contains "Sponsored"
hide-if-svg-contains Sponsored div.parent div.child '-opacity-alpha-threshold:0.5' — treats text as hidden at any opacity or alpha at or below 0.5, rather than the default 0.1. Use when the site fades the label instead of making it fully transparent
hide-if-svg-contains Sponsored div.parent div.child '-font-size-threshold:4' — treats text as hidden at any font size at or below 4
hide-if-svg-contains Sponsored div.parent div.child '-wait-until:load' — delays the snippet until the load event, for sites that inject the SVG late
hide-if-svg-contains /.*/ div.parent 'div.parent div.label' 'color:rgb(255, 255, 255)' — hides any div.parent containing a div.label whose background image matches, and whose font colour is not white. The descendant selector is quoted because it contains a space