Scalable vector gradients can be either linear gradients or radial gradients.

Gradients can be applied to any svg element. For this scalable vector graphics gradient example we begin by creating a basic rectangle shape.

See the Pen svgRectBeforeLinearGradientAdded by Daniel (@Parsons) on CodePen.

SVG Linear Gradient

To add a linear gradient to the ‘rect’ svg the following needs to be done:

  • An opening ‘<defs> tag and closing <defs> is required inside the svg.
  • An opening <linearGradient> and closing <linearGradient/> tag is placed inside the ‘defs’ tags.
  • The ‘id’ attribute with a unique name value is placed inside the opening ‘linearGradient‘ tag.
  • Two svg ‘<stop/>’ elements are placed inside the ‘linearGradient’ tags. The svg ‘stop‘ element defines the ramp of colours.
  • The ‘offset’ and ‘stop-color’ is placed inside each ‘stop’ tag. The ‘offset’ attribute determines where the color is placed and the ‘stop-color’ set which color the ‘stop’ element is.
  • And finally inside the ‘rect’ element a ‘fill’ attribute is added with the unique value set in the ‘linearGradient’ id attribute.

Here is the result.

See the Pen svgIntroductionGradient by Daniel (@Parsons) on CodePen.

Radial Gradient

To add a radial gradient to the svg ‘rect’ element svg can be achieved by simply replacing the ‘linearGradient’ inside the ‘defs’ tags with ‘radialGradient‘.

See the Pen svgGradientsRadialGradient by Daniel (@Parsons) on CodePen.

Scalable Vector Graphic Gradients – Ellipses

Next the same linearGradient and radialGradient is applied to an ellipse element instead of a rect element.

First of all here is the basic svg ellipse element.

See the Pen svgEllipse by Daniel (@Parsons) on CodePen.

The linearGradient element is now added to the ellipse element.

See the Pen svgEllipseLinearGradient by Daniel (@Parsons) on CodePen.

And here the radialGradient element is added to the ellipse element.

See the Pen svgEllipseRadialGradient by Daniel (@Parsons) on CodePen.

Scalable Vector Graphic Gradients on Text

Another popular use of svg gradients is to apply them to a text element.
First of all here is a text element with a few styles applied.

See the Pen svgTextElementBeforeGradient by Daniel (@Parsons) on CodePen.


Applying the svg linearGradient effect produces the following result:

See the Pen svgTextElementLinearGradient by Daniel (@Parsons) on CodePen.

And finally here is the same example with a radialGradient.

See the Pen svgTextRadialGradient by Daniel (@Parsons) on CodePen.


More on SVG (Scalable Vector Graphics)

SVG logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *