SVG examples

You are in: Example: Gradient color

Example: Gradient color

Cathegory

Example

Result

Explanation

The ramp of colors to use on a gradient is defined by the 'stop' elements that are child elements to the gradients. Are defined by the attributes:

  • 'offset': A number or a percent which indicates where the gradient stop is placed.
  • 'stop-color': Indicates what color to use at that gradient stop.
  • 'stop-opacity': defines the opacity of a given gradient stop.

Further information:

http://www.w3.org/TR/SVG11/pservers.html#GradientStops

Code

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="100" height="80"  xlink:href="image.jpg"/>
</svg>