SVG vector-effect Attribute

Last Updated : 31 Mar, 2022

The vector-effect attribute defines the vector effect to use when drawing an object. These effects are applied before the compositing operations of filters, masks and clips. It has effect only on the <circle>, <ellipse>, <foreignObject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> <tspan>, and <use> elements.

Note: This effect can also be used as a CSS property.

Syntax:

vector-effect = none | non-scaling-size | non-scaling-stroke 
                          | fixed-position | non-rotation

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

none: It specifies that no vector effect shall be applied. This is the default value of the attribute.
non-scaling-stroke: It modifies the way an object is stroked. The stroke width is no longer dependent on the transformations of the element and zoom level.
non-scaling-size: It specifies that the scale of the user coordinate system used by the element and its descendants does not change.
non-rotation: It specifies that the rotation and skew of the user coordinate system used by the element and its descendants are suppressed.
fixed-position: It specifies that the position of the user coordinate system used by the element and its descendants is fixed.

Example 1: The example below illustrates the use of the word-spacing attribute using non-scaling-stroke attribute value.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color: green; 
            font-size: 40px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="120 5 1200 940"> 
        <path vector-effect="non-scaling-size"
            transform="translate(100,0)scale(4,1)" 
            d="M10,20L40,100L39,200z"
            stroke="green" stroke-width="2px" 
            fill="none"> 
        </path> 
  
        <path vector-effect="non-scaling-stroke" 
            transform="translate(300,0)scale(4,1)" 
            d="M10,20L40,100L39,200z"
            stroke="green" stroke-width="2px" 
            fill="none"> 
        </path> 
    </svg> 
</body> 
  
</html> 

Output:

Example 2: Below example illustrates the use of the word-spacing attribute using non-scaling-size attribute value.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color: green;  
            text-align: center;"> 
        GeeksforGeeks 
    </h1> 
  
    <div class="geeks" style="text-align: center;"> 
  
        <!-- Here we have not applied 
         vector-effect attribute  -->
        <svg width="200" height="200" 
            viewBox="0 0 50 50"> 
              
            <circle cx="25" cy="25" r="20" fill="none" 
                stroke="green" stroke-width="2" /> 
              
            <path d="M25 15 L 25 35" fill="none" 
                    stroke="green" stroke-width="2" 
                    stroke-linecap="round" /> 
              
            <path d="M15 25 L 35 25" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round" /> 
        </svg> 
  
        <!-- Here we have applied 
         vector-effect attribute  -->
        <svg width="200" height="200" 
            viewBox="0 0 50 50"> 
              
            <circle cx="25" cy="25" r="20" fill="none" 
                stroke="green" stroke-width="2"
                vector-effect="non-scaling-stroke" /> 
              
            <path d="M25 15 L 25 35" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round"
                vector-effect="non-scaling-size" /> 
              
            <path d="M15 25 L 35 25" fill="none" 
                stroke="green" stroke-width="2" 
                stroke-linecap="round"
                vector-effect="non-scaling-stroke" /> 
        </svg> 
    </div> 
</body> 
  
</html> 