SVG - Opacity (Transparency)

> Data Visualization (vis|viz|graphic|image) > Scalable Vector Graphics (SVG)

1 - About

Transparency can be applied by setting:

Advertising

3 - Example

3.1 - With Rgba

.myFirstBeautifulCircle  { fill: rgb(213,216,203); } /* #D5D8CB */
.mySecondBeautifulCircle { fill: rgba(236,220,198,0.6) /* #ECDCC6 is 60% opaque */
<svg height="120">
    <circle cx="60" cy="60" r="50" class="myFirstBeautifulCircle" />
    <circle cx="100" cy="60" r="50" class="mySecondBeautifulCircle" />
</svg>

3.2 - With the Opacity attribute

.myFirstBeautifulCircle  { 
             fill: rgb(213,216,203); /* #D5D8CB */
             } 
.mySecondBeautifulCircle { 
             fill: rgb(236,220,198); /* #ECDCC6 */
             opacity: 0.6} /* 60% opaque */
<svg height="120">
    <circle cx="60" cy="60" r="50" class="myFirstBeautifulCircle" />
    <circle cx="100" cy="60" r="50" class="mySecondBeautifulCircle" />
</svg>