DEV Community

Cover image for SVG essentials. Gradients and patterns
Julia Shlykova
Julia Shlykova

Posted on

SVG essentials. Gradients and patterns

Gradient in SVG

  • Each gradient must have id attribute for future reference.
  • Color transitions are defined by a series of color stops.

Linear gradient 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid">
   <stop offset="0" stop-color="black" />
   <stop offset="1" stop-color="orange" />
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid)" />
</svg>
Enter fullscreen mode Exit fullscreen mode
  • stop element sets color at certain positions using:
    • offset defines the position;
    • stop-color defines color;
    • stop-opacity defines opacity.

Linear gradient fill

We can apply the gradient also to a stroke:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid">
   <stop offset="0" stop-color="green" />
   <stop offset="1" stop-color="yellow" />
  </linearGradient>
 </defs>
 <rect
  x="10"
  y="10"
  width="80"
  height="80"
  rx="10" fill="none"
  stroke="url(#vivid)"
  stroke-width="10"
 />
</svg>
Enter fullscreen mode Exit fullscreen mode

Linear gradient stroke

Since we refer to gradient later, it should be defined inside defs element.

Gradient vector

The gradient vector sets boundaries for gradient stops.

  • x1, y1 (default 0) define starting point for a gradient vector;
  • x2, y2 (default 1) define the ending point for a gradient vector. 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid" x2="0.2">
   <stop offset="0" stop-color="darkred" />
   <stop offset="1" stop-color="darksalmon" />
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

gradient vector

Our gradient ends at 20% of the rectangle, the rest is filled with the last gradient stop color.

We can even change the direction of the gradient using this vector:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="diag" x1="0" y1="0" x2="1" y2="1">
   <stop offset="0" stop-color="turquoise" />
   <stop offset="1" stop-color="black" />
  </linearGradient>
 </defs>
<rect width="90" height="90" x="5" y="5" fill="url(#diag)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

gradient diagonal direction

Important: x1, y1, x2, y2 are not presentation attributes and they are not overridden by CSS styles.

Radial gradient 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <radialGradient id="glare" cx="0.7" cy="0.2" r="0.7">
   <stop offset="0" stop-color="powderblue" />
   <stop offset="1" stop-color="steelblue" />
  </radialGradient>
 </defs>
 <ellipse  cx="50" cy="50" rx="50" ry="25" fill="url(#glare)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

radial gradient

  • cx, cy, r set the end circle for the radial gradient (default values are 0.5). The 100% gradient stop is at the perimeter of the end circle.
  • fx(default is cx), fy(default is cy), fr(default is 0) set the start circle. The 0% gradient stop is at the perimeter of the start circle. See an example below: 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <radialGradient id="moon" fx="0.6" fr="0.4">
   <stop offset="0" stop-color="black" />
   <stop offset="1" stop-color="mintcream" />
  </radialGradient>
 </defs>
 <circle  cx="50" cy="50" r="50" fill="url(#moon)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

focal point usage

Here, we have black circle with the center at (60%, 50%) and radius 40%. After the ending of that circle, the gradient starts.

Gradient attributes

spreadMethod

If the gradient doesn't fill the whole shape, we can define how the rest of it is filled by spreadMethod that takes the following values:

  • pad (default) fills the remainder with the stop color.
  • reflect 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <linearGradient id="vivid" x2="0.1" spreadMethod="reflect">
   <stop offset="0" stop-color="darkslateblue" />
   <stop offset="1" stop-color="floralwhite" />
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

spread method reflect

  • repeat 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <radialGradient id="rose" r="0.1" spreadMethod="repeat">
   <stop offset="0" stop-color="maroon" />
   <stop offset="1" stop-color="salmon" />
  </radialGradient>
 </defs>
 <circle  cx="50" cy="50" r="50" fill="url(#rose)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

spread method repeat

href

This attribute comes in handy when we want to use some template gradient:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
 <defs>
  <linearGradient id="template" x2="0.5" spreadMethod="reflect">
   <stop offset="0" stop-color="teal" />
   <stop offset="1" stop-color="floralwhite" />
  </linearGradient>
  <linearGradient id="vivid1" href="#template">
  </linearGradient>
  <linearGradient id="vivid2" href="#template" y2="0.5">
  </linearGradient>
 </defs>
 <rect x="10" y="10" width="80" height="80" fill="url(#vivid1)" />
 <rect x="110" y="10" width="80" height="80" fill="url(#vivid2)" />
</svg>
Enter fullscreen mode Exit fullscreen mode

gradient href attribute

Pattern in SVG

Patterns consist of pre-defined graphic objects that are replicated to fill areas.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern
     id="grid"
     x="0" y="0" width="0.1" height="0.1"
     viewBox="0 0 10 10"
    >
     <rect width="7" height="7" fill="darkgreen" />
    </pattern> 
  </defs>
  <circle cx="10" cy="10" r="10" fill="url(#grid)" />
  <circle cx="60" cy="40" r="40" fill="url(#grid)" />   
</svg>
Enter fullscreen mode Exit fullscreen mode

pattern in two circles

Each pattern tile takes occupies 10% of the object width and height. Since each tile contains one rectangle with width and height 7 "px" inside coordinate system of 10 x 10 "px" dimensions, the blank space occures.

  • x, y, width, height define how pattern tile is placed. They are not presentation attributes and can't be defined by CSS styles.
  • patternUnits takes the following values:
    • objectBoundingBox (default) set units for x, y, width, height relative to the object, on which the pattern is applied.
    • userSpaceOnUse sets "absolute" units for x, y, width, height: 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern
     id="grid"
     x="0" y="0" width="10" height="10"
     viewBox="0 0 10 10"
     patternUnits="userSpaceOnUse"
    >
     <rect width="7" height="7" fill="darkslateblue" />
    </pattern> 
  </defs>
  <circle cx="10" cy="10" r="10" fill="url(#grid)" />
  <circle cx="60" cy="40" r="40" fill="url(#grid)" />   
</svg>
Enter fullscreen mode Exit fullscreen mode

absolute pattern in two circles

  • href works the same way as for gradients; only keep in mind that the reference must be a different pattern.

Top comments (0)