504

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.

1

7 Answers 7

799

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
5
  • 3
    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/…
    – t-mart
    Feb 15, 2014 at 22:30
  • 4
    you can also put these in the style attribute: <rect style="fill:#044B94;fill-opacity: 0.4;" /> Jul 26, 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).
    – mermaldad
    Jun 6, 2020 at 19:46
  • 2
    @mermaldad 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. Jun 8, 2020 at 0:30
  • 1
    @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.
    – mermaldad
    Jun 11, 2020 at 0:49
87

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.

12
  • 3
    Looking at w3.org/TR/SVG/painting.html#FillProperties (scroll down a bit for fill-opacity); that looks pretty fully standardized to me. May 19, 2011 at 5:56
  • 10
    @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. May 19, 2011 at 8:40
  • 8
    Just want to mention, one place where this does not seem to work is in Inkscape Jul 16, 2012 at 15:26
  • 2
    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.
    – Hanna
    Apr 21, 2014 at 16:28
  • 3
    Can I get some clarification what browsers actually support rgba in inline svgs? Dec 9, 2016 at 0:17
12

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.

3
11
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

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!
    – Mariodiar
    Aug 16, 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".
    – bkausbk
    Jan 24, 2018 at 14:16
  • This does not work in Inkscape, neither in my other image viewers. But it does work in Firefox, Chrome, Edge
    – mihca
    Aug 14, 2022 at 18:08
2

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.

2

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.

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.