Search code examples
colorssvgtransparencyalphafill

SVG fill color transparency / alpha?

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.

Solution

  • 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