521

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.

Improve this question
1

7 Answers 7

Reset to default
817

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
Improve this answer
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
    Commented Feb 15, 2014 at 22:30
  • 4
    you can also put these in the style attribute: <rect style="fill:#044B94;fill-opacity: 0.4;" />
    – PeterVermont
    Commented 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
    Commented 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.
    – Williham Totland
    Commented 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
    Commented Jun 11, 2020 at 0:49
88

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.

Improve this answer
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.
    – Williham Totland
    Commented 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.
    – Erik Dahlström
    Commented May 19, 2011 at 8:40
  • 9
    Just want to mention, one place where this does not seem to work is in Inkscape
    – George Mauer
    Commented 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
    Commented Apr 21, 2014 at 16:28
  • 3
    Can I get some clarification what browsers actually support rgba in inline svgs?
    – redanimalwar
    Commented Dec 9, 2016 at 0:17
14

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.

Improve this answer
3
  • For Inkscape vector graphics editor 0.92.4.0, fill="none" works, but fill="transparent" doesn't.
    – samm
    Commented May 27, 2020 at 15:46
  • 4
    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
    – Alex Henrie
    Commented Oct 17, 2020 at 1:13
  • 2
    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
    – herrstrietzel
    Commented Jan 6, 2023 at 21:39
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

Improve this answer
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
    Commented 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
    Commented 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
    Commented 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.

Improve this answer
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.

Improve this answer
1

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!

Improve this answer

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