Merge stop-opacity and fill-opacity with existing fill/stop-color attribute

[SethFalco]

⚠️ This optimization should not be enabled by default. The change is not supported in SVG 1.1 or in some editors like Inkscape. It does work in Firefox, Chromium, Safari, Eye of GNOME, ImageMagick, etc.

In most clients, and in the SVG 2 spec, the following are equivalent:

fill="#ffffff" fill-opacity="0.5"
→
fill="rgba(255,255,255,0.5)"

stop-color="#ffffff" stop-opacity="0.5"
→
stop-color="rgba(255,255,255,0.5)"

In most clients, even the following works, but it's not compliant with the SVG/CSS specifications:

fill="#ffffff" fill-opacity="0.5"
→
fill="#ffffff80"

stop-color="#ffffff" stop-opacity="0.5"
→
stop-color="#ffffff80"

SVG follows the CSS 3 spec, which doesn't officially support RGBA through the hex representation. So while this works, we probably shouldn't use it.

Unlike RGB values, there is no hexadecimal notation for an RGBA value.

— https://www.w3.org/TR/css-color-3/#rgba-color

See the CSS Color Module Level 3 specification for the definition of color. [css-color-3]

— https://svgwg.org/svg2-draft/painting.html#ColorProperty

The RGBA hex version is only perceivably lossless for all intents and purposes, but we'll prioritize the spec here.

We should create a plugin for this, and when we have a preset for inlining in an HTML5 document, perhaps named preset-html5, this optimization should be enabled for that preset.

We've tested this optimization on SVGO.dev by applying it manually, and it seems to behave fine in all major browsers.

Related

• chore: hand-optimize svgs svgo.dev#36