CHAPTER 4: Colors

COLORS - Ways of coloring your shapes
There are many ways of coloring your shapes. The simplest way is to type a predefined color like - RED, BLUE, YELLOW. Here is a chart of predefined colors for SVG as from the primary(RBY), and secondary colors(GREEN, YELLOW, PURPLE).

You can also use the RGB values by using this code:

rgb(<integer>,<integer>,<integer>)

where <integer> be a integer from 0-255.
This uses the RGB values like from the color picker.

GRADIENTS
There are two different ways of making gradient colors for your shapes. They are:

  • Linear Gradients
  • Radial Gradients

Linear Gradients
The <linearGradient> tag is used to define an SVG linear gradient.

The <linearGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.

Linear gradients can be defined as horizontal, vertical or angular gradients:

  • Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
  • Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
  • Angular gradients are created when x1 and x2 differ and y1 and y2 differ 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//
DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" 
x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

Code explanation:

  • The id attribute of the <linearGradient> tag defines a unique name for the gradient
  • The fill:url(#orange_red) property links the ellipse element to the gradient
  • The x1, x2, y1,y2 attributes of the <linearGradient> tag define the starting and ending position of the gradient
  • The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

View this example

You can create two or more gradients by doing this:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//
DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%">
<defs>
<linearGradient id="white_red" x1="0%" y1="0%" 
x2="0%" y2="100%">

<stop offset="0%" 
style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="20%" 
style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="80%" 
style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="100%" 
style="stop-color:rgb(255,0,0);stop-opacity:1"/>

</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#white_red)"/>
</svg>

View this example

TOP

Radial Gradients
This type of gradient is similar to linear gradients. It just replaced x and y coordinates to cx and cy, similar to ellipse's location definition.

The <radialGradient> tag is used to define an SVG radial gradient.

The <radialGradient> tag must be nested within a <defs> tag. The <defs> tag is short for definitions and it allows definition of special elements such as gradients.

Copy the following code into Notepad and save the file as "radial1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//
DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%">
<defs>
<radialGradient id="grey_blue" 
cx="50%" cy="50%" r="50%"fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

Code explanation:

  • The id attribute of the <radialGradient> tag defines a unique name for the gradient
  • The fill:url(#grey_blue) property links the ellipse element to the gradient
  • The cx, cy and r attributes define the outermost circle and the fx and fy define the innermost circle
  • The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end

View this example

QUIZ: LEARN SVG -CHAPTER 4
TOP | CHAPTER 5: FILTERS AND OTHERS

powered by BYC