SVG tableValues Attribute

Last Updated : 03 May, 2022

The tableValues attribute declares a list of numbers. These numbers are defining a lookup table of values for a color component transfer function. The elements that are using this attribute includes: <feFuncA>, <feFuncB>, <feFuncG>, and <feFuncR>.

Syntax:

tableValues = "list-of-numbers"

Attribute Values: The tableValues attribute accepts the values mentioned above and described below

list-of-numbers: It holds a comma-separated or/and space-separated list of number/numbers, which declares a lookup table for the color component transfer function. Each number can be between 0 and 1.

Below examples illustrate the use of the tableValues attribute.

Example 1:

html

<!DOCTYPE html>
<html>
 
    <body>
        <h1 style="color: green;
            font-size: 25px; 
            margin-left: 15px;">
            GeeksforGeeks
        </h1>
 
        <svg viewBox="0 0 1020 200" 
          xmlns="http://www.w3.org/2000/svg">
 
          <defs>
            <linearGradient id="gradient" 
                gradientUnits="userSpaceOnUse"
                x1="0" y1="0" x2="200" y2="0">
              <stop offset="0" 
                stop-color="green"/>
              <stop offset="0.5" 
                stop-color="#cacfbc"/>
              <stop offset="1" 
                stop-color="#d0d957"/>
            </linearGradient>
          </defs>
         
          <filter id="geek1" x="0" y="0" 
                width="100%" height="100%">
            <feComponentTransfer>
              <feFuncR type="table" 
                tableValues="0 1"/>
              <feFuncG type="table" 
                tableValues="0 1"/>
              <feFuncB type="table" 
                tableValues="0 1"/>
            </feComponentTransfer>
          </filter>
         
          <rect x="0" y="0" width="200" 
              height="200" fill="url(#gradient)"
              style="filter: url(#geek1);"/>
        </svg>
    </body>
    
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
 
    <body>
        <h1 style="color: green;
            font-size: 25px; 
            margin-left: 15px;">
            GeeksforGeeks
        </h1>
 
        <svg viewBox="0 0 1020 200" 
          xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="gradient" 
                gradientUnits="userSpaceOnUse"
                x1="0" y1="0" x2="200" y2="0">
              <stop offset="0" 
                stop-color="#2de00d"/>
              <stop offset="0.5" 
                stop-color="#c5e4e6"/>
              <stop offset="1" 
                stop-color="#cf7281"/>
            </linearGradient>
          </defs>
           
 
          <filter id="geek2" 
                x="0" y="0" 
                width="100%" height="100%">
            <feComponentTransfer>
              <feFuncR type="table" 
                tableValues="1 0"/>
              <feFuncG type="table" 
                tableValues="1 0"/>
              <feFuncB type="table" 
                tableValues="1 0"/>
            </feComponentTransfer>
          </filter>
 
          <rect x="0" y="0" width="200" 
              height="200" fill="url(#gradient)"
              style="filter: url(#geek2);"/>
        </svg>
    </body>
    
</html>