SVG fill color transparency / alpha?

Asked 18/5, 2011 at 9:29 Answered 24/9, 2021 at 5:7

Solved colors svg transparency alpha fill

513

Is it possible to set a transparency or alpha level on SVG fill colours?

I've tried adding two values to the fill tag (changing it from fill="#044B94" to fill="#044B9466"), but this doesn't work.

Chenopod answered 18/5, 2011 at 9:29 Comment(1)

For anyone interested, to receive clicks over an empty fill: see SVG Detect Onclick events on “fill: none” – i.e. the possibility to use fill="none" with pointer-events="visible". – Completion 8/2, 2020 at 14:42

809

You use an addtional attribute; fill-opacity: This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.

For example:

<rect ... fill="#044B94" fill-opacity="0.4"/>

Additionally you have the following:

stroke-opacity attribute for the stroke
opacity for the entire object

Wilmott answered 18/5, 2011 at 9:32 Comment(5)

MDN provides a good overview of the this and other related attributes in their SVG Tutorial, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/… – Fernald 15/2, 2014 at 22:30

you can also put these in the style attribute: <rect style="fill:#044B94;fill-opacity: 0.4;" /> – Kerman 26/7, 2016 at 21:35

In the above, "fill-opacity" and "stroke-opacity" should be replaced with "fill_opacity" and "stroke_opacity" (that is, replace hyphens with underscores). – Colemancolemanite 6/6, 2020 at 19:46

@Colemancolemanite That is incorrect; see the specification. In some languages that don't allow names to contain hyphens, libraries for working with SVG use names like fill_opacity, but in SVG and CSS, it's fill-opacity. – Wilmott 8/6, 2020 at 0:30

@WillihamTotland, thanks for the correction. I jumped mentally straight to "how do I implement this using svgwrite in Python". There you need to replace the hyphens with underscores. – Colemancolemanite 11/6, 2020 at 0:49

As a not yet fully standardized solution (though in alignment with the color syntax in CSS3) you can use e.g fill="rgba(124,240,10,0.5)". Works fine in Firefox, Opera, Chrome.

Here's an example.

Calico answered 18/5, 2011 at 16:31 Comment(12)

Looking at w3.org/TR/SVG/painting.html#FillProperties (scroll down a bit for fill-opacity); that looks pretty fully standardized to me. – Wilmott 19/5, 2011 at 5:56

@williham: yes fill-opacity is in the SVG recommendation, and there's no problem with using that. The CSS3 syntax is in CSS3 Color, which is one step away from becoming a w3c recommendation. SVG 1.1 doesn't reference CSS3 Color because it wasn't available at the time, a future version of SVG probably will. – Motherofpearl 19/5, 2011 at 8:40

Ah. I seem to have misread your answer as "there's no fully standardized solution, but:…"; which would be wrong. Still; using rgba() seems kind of pointless when you have a free-standing opacity value to adjust. – Wilmott 19/5, 2011 at 8:58

If you're doing mostly CSS you probably expect the same colors to "just work" in SVG too, right? Alignment is a good thing, plus it brings a little bit more functionality with the hsla() syntax (which should also work in the browsers that support rgba() in svg). – Motherofpearl 19/5, 2011 at 13:13

Just want to mention, one place where this does not seem to work is in Inkscape – Intosh 16/7, 2012 at 15:26

I used this solution on Highcharts, and it worked. It converted rgba to rgb and automatically added the fill-opacity attribute to it. I'm not sure if this is how it works in normal SVGs too, but that's how it worked there. Either way, thanks. – Accolade 21/4, 2014 at 16:28

Can I get some clarification what browsers actually support rgba in inline svgs? – Hutch 9/12, 2016 at 0:17

@Hutch Chrome 66 isn't doing so at the moment. – Tartlet 16/5, 2018 at 6:15

@Brandito the example works fine in Chrome 66, not sure what you mean. – Motherofpearl 21/5, 2018 at 16:41

This doesn't seem to be working for me. (Version 74.0.3729.131 (Official Build) (64-bit) (cohort: 74_131_Win) running on Windows 7 Service Pack 1 Build 7601.24411) – Twibill 4/5, 2019 at 23:51

This should be the accepted answer in 2021. – Kevenkeverian 14/12, 2021 at 23:19

At least in chrome, if you specify "stroke" and try to use a :hover css selector to reactively change the stroke opacity, it doesn't work. But if you use stroke with a separate stroke-opactity attribute, then it does work. That is, use this: <... stroke="rgb(124,240,10)" stroke-opacity="0.5" ...> not <... stroke="rgba(124, 240, 10, 0.5)" ...> – Hance 28/12, 2022 at 7:13

To make a fill completely transparent, fill="transparent" seems to work in modern browsers. But it didn't work in Microsoft Word (for Mac), I had to use fill-opacity="0".

Update

As per the comment below from Alex Henrie, fill="none" might be a better choice.

Evslin answered 14/5, 2019 at 8:30 Comment(3)

For Inkscape vector graphics editor 0.92.4.0, fill="none" works, but fill="transparent" doesn't. – Sambar 27/5, 2020 at 15:46

fill="none" is the standard way to do it and it works in Inkscape, Firefox, Chrome, or any other SVG application. See w3.org/TR/SVG2/painting.html#SpecifyingPaint – Therein 17/10, 2020 at 1:13

Be careful - fill:none won't respond to pointer events. Think of it as an "open window" - whereas fill:transparent or fill-opacity:0 would be a perfectly clean window (any bird will still bump into it) codepen – Invent 6/1, 2023 at 21:39

fill="#044B9466"

This is an RGBA color in hex notation inside the SVG, defined with hex values. This is valid, but not all programs can display it properly...

You can find the browser support for this syntax here: https://caniuse.com/#feat=css-rrggbbaa

As of August 2017: RGBA fill colors will display properly on Mozilla Firefox (54), Apple Safari (10.1) and Mac OS X Finder's "Quick View". However Google Chrome did not support this syntax until version 62 (was previously supported from version 54 with the Experimental Platform Features flag enabled).

As of April 2021, Inkscape version 1.0.2 cannot read this format in SVG files, and instead converts any RGBA color to opaque black. The bug report is here: https://gitlab.com/inkscape/inbox/-/issues/1195

Filmer answered 7/8, 2017 at 10:7 Comment(3)

Do you know if they changed something recently? I had a working chrome application that used fill:rgb(...) and now it is completely broken. I woul apprecciate your help! – Durden 16/8, 2017 at 3:32

Qt SVG library (Qt 5.9.3) also can not handle RGBA colors so far neither as "#00000000" hex form nor as "rgba". – Buonarroti 24/1, 2018 at 14:16

This does not work in Inkscape, neither in my other image viewers. But it does work in Firefox, Chrome, Edge – Edy 14/8, 2022 at 18:8

Use attribute fill-opacity in your element of SVG.

Default value is 1, minimum is 0, in step use decimal values EX: 0.5 = 50% of alpha. Note: It is necessary to define fill color to apply fill-opacity.

See my example.

References.

Artiodactyl answered 14/5, 2018 at 17:45 Comment(0)

To change transparency on an svg code the simplest way is to open it on any text editor and look for the style attributes. It depends on the svg creator the way the styles are displayed. As i am an Inkscape user the usual way it set the style values is through a style tag just as if it were html but using svg native attributes like fill, stroke, stroke-width, opacity and so on. opacity affects the whole svg object, or path or group in which its stated and fill-opacity, stroke-opacity will affect just the fill and the stroke transparency. That said, I have also used and tasted to just use fill and instead of using#fff use instead the rgba standard like this rgba(255, 255, 255, 1) just as in css. This works fine for must modern browsers.

Keep in mind that if you intend to further reedit your svg the best practice, in my experience, is to always keep an untouched version at hand. Inkscape is more flexible with hand changed svgs but Illustrator and CorelDraw may have issues importing and edited svg.

Example

<path style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Example 2

<path style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Example 3

<path style="fill:rgba(255, 0, 0, .5);stroke:rgba(242, 242, 242, .5);stroke-width:2px" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Notice that in the last example the fill-opacity and stroke-opacity have been removed as rgba standard covers both color and alpha channel in both cases.

Permit answered 8/2, 2021 at 18:38 Comment(0)

I am sharing a related tip that you might come across when you want the SVG to inherit the container's styles like normal state, hover state and visited state : use fill='currentColor' on the path. This is how the SVG's produced by font awesome icons could take any fore color applied to fonts!

Omegaomelet answered 24/9, 2021 at 5:7 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags