YouTip

* * * ## SVG Gradients A gradient is a smooth transition from one color to another. Additionally, multiple color transitions can be applied to the same element. SVG gradients mainly come in two types: * Linear gradient - `` * Radial gradient - `` * * * ## SVG Linear Gradient - `` The `` element in SVG is used to create linear gradients, enabling a smooth color transition along a straight line from one color to another. Linear gradients can be applied to fill or stroke SVG graphic elements, giving them rich color variations. ### Basic Syntax <!-- More elements --> **Parameter Description:** * The `id` attribute defines a unique identifier for the linear gradient, used to reference this gradient within the SVG image. * The `x1` and `y1` attributes define the coordinates of the gradient’s starting point. * The `x2` and `y2` attributes define the coordinates of the gradient’s ending point. * The `` element specifies colors and their positions within the gradient. Linear gradients can be defined as horizontal, vertical, or angular: * A horizontal gradient is created when y1 and y2 are equal but x1 and x2 differ. * A vertical gradient is created when x1 and x2 are equal but y1 and y2 differ. * An angular gradient is created when both x1 and x2 differ, and y1 and y2 differ. The following code defines a horizontal linear gradient from red to blue, then applies it to a filled rectangle, producing a gradient-filled effect. ## Example ### Example 1 Define a horizontal linear gradient from yellow to red for an ellipse: Below is the SVG code: ## Example [Try it yourself »](#) Click to view: (#). **Code Explanation:** * The `id` attribute of the `` tag defines a unique name for the gradient. * The `x1`, `x2`, `y1`, and `y2` attributes of the `` tag define the start and end positions of the gradient. * The gradient color range may consist of two or more colors. Each color is specified by a `` tag. The `offset` attribute defines the start and end positions of the gradient. * The `fill` attribute links the ellipse element to this gradient. ### Example 2 Define a vertical linear gradient from yellow to red for an ellipse: Below is the SVG code: ## Example [Try it yourself »](#) Click to view: (#). ### Example 3 Define an ellipse with a horizontal linear gradient from yellow to red, and add text inside the ellipse: Below is the SVG code: ## Example SVG [Try it yourself »](#) Click to view: (#). **Code Explanation:** * The `` element is used to add text. ### Notes * A gradient may contain multiple `` elements; each `` element represents a color and its position within the gradient. * The start and end points of a gradient can be placed anywhere; interpolation occurs along the straight line between the defined start and end points. * Coordinate values for gradients may be expressed either as percentages or absolute length values; percentage values are relative to the size of the graphic element. * Linear gradients can be applied to fill or stroke SVG graphic elements.