SVG elements are drawn in the order they appear in the SVG markup. If shapes overlap, the shapes that are defined later in the markup will be drawn over the shapes that are defined earlier.
This predictability of overlapping allows us to composite graphics to create new graphics.
The value of the optional stop-opacity attribute of a gradient stop element specifies the opacity of the color of that stop: Zero specifies the color is transparent; One indicates the color is opaque. If this attribute is not specified, the default is 1 (fully opaque).
For this example, first consider a bright green rectangle:
<svg width="100" height="100"
xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="Lime" />
</svg>
Say we want a horizontal band across the middle of the box to be dark green, with a gradual transition between the two colors.
We could draw another box on top of it, with the new box having a single color (dark green) but with different opacity at different stops, to let bright green shine through from behind at the top and bottom of the new box.
To do that, the new box has a linear gradient, with each stop having the same dark green color, but with a different opacity value for each stop:
<svg width="100" height="100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="alphagrad"
x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="15%" stop-color="DarkGreen"
stop-opacity="0" />
<stop offset="25%" stop-color="DarkGreen"
stop-opacity="0.5" />
<stop offset="35%" stop-color="DarkGreen"
stop-opacity="1.0" />
<stop offset="65%" stop-color="DarkGreen"
stop-opacity="1.0" />
<stop offset="75%" stop-color="DarkGreen"
stop-opacity="0.5" />
<stop offset="85%" stop-color="DarkGreen"
stop-opacity="0" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="Lime" />
<rect width="100" height="100" fill="url(#alphagrad)" />
</svg>
In this example, we practice drawing a simple glass sphere by compositing circles. First draw a light green filled circle:
<svg width="120" height="120"
xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50" fill="#00EA00" />
</svg>
To simulate thick glass, draw a horizontal band of a darker green, by drawing a new circle over the previous circle. The new circle is a single color, but has a vertical opacity gradient to allow seeing the poles of the underlying lighter circle.
<svg width="120" height="120"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bandgrad" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="5%" stop-color="#00A800"
stop-opacity="0" />
<stop offset="12%" stop-color="#00A800"
stop-opacity="0.5" />
<stop offset="20%" stop-color="#00A800"
stop-opacity="0.75" />
<stop offset="30%" stop-color="#00A800"
stop-opacity="1.0" />
<stop offset="60%" stop-color="#00A800"
stop-opacity="0.75" />
<stop offset="85%" stop-color="#00A800"
stop-opacity="0" />
</linearGradient>
</defs>
<circle cx="60" cy="60" r="50" fill="#00EA00" />
<circle cx="60" cy="60" r="50" fill="url(#bandgrad)" />
</svg>
Add an inner dark edge to the circle perimeter, to simulate total internal reflection (TIN), with the gradient focal point a little high to reduce TIN at the top:
<radialGradient id="edgegrad" fy="40%">
<stop offset="90%" stop-color="#00A800" stop-opacity="0" />
<stop offset="98%" stop-color="#00A800" stop-opacity="0.5" />
<stop offset="100%" stop-color="#00A800" stop-opacity="1.0" />
</radialGradient>
...
<circle cx="60" cy="60" r="50" fill="url(#edgerad)" />
Then draw an ellipse with vertical opacity gradient to simulate specular reflection:
<linearGradient id="srgrad" fy="30%"
x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="White"
stop-opacity="1.0" />
<stop offset="100%" stop-color="White"
stop-opacity="0" />
</linearGradient>
...
<ellipse cx="60" cy="35" rx="26" ry="22"
fill="url(#srgrad)" />