⚠️ 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
In most clients, and in the SVG 2 spec, the following are equivalent:
In most clients, even the following works, but it's not compliant with the SVG/CSS specifications:
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.
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