Related Articles

Related Articles

SVG shape-rendering Attribute
  • Last Updated : 18 Nov, 2020

The shape-rendering attribute hints the renderer about the tradeoff’s to be made while rendering shapes like paths, circles, or rectangles. It has effect only on the following elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>.

Syntax:

shape-rendering = auto | optimizeSpeed | crispEdges 
                       | geometricPrecision

Attribute Values: The shape-rendering attribute accepts the values mentioned above and described below:

  • auto: This value lets the user agent to make automatic decision to balance the speed, have crisp edges or have good geometric precision. When nothing is specified then this value acts as the default value.
  • optimizeSpeed:This value lets the user agent to specify that the shape will be rendered in a manner to emphasize speed over geometric precision or crisp edges.
  • crispEdges:This value lets the user agent to specify that the shape will be rendered with an emphasis given to the contrast of clean edges over geometric precision or speed.
  • geometricPrecision: This value lets the user agent to specify that the shape will be rendered with geometric precision rather than focusing on the speed or crisp edges.

Example 1: Below examples illustrate the use of shape-rendering attribute using geometricPrecision attribute value.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <div style="color: green; 
             margin-left: 50px;">
        <h1>
            GeeksforGeeks
        </h1>
  
        <svg viewBox="0 0 420 100" 
            xmlns="http://www.w3.org/2000/svg">
              
            <polygon points="26, 86 11.2, 40.4 50, 
                12.2 88.8, 40.4 74, 86" fill="green"
                shape-rendering="geometricPrecision" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:



Example 2: Below examples illustrate the use of shape-rendering attribute using crispEdges attribute value.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <div style="color: green; 
               margin-left: 50px;">
  
        <h1>GeeksforGeeks</h1>
  
        <svg viewBox="0 0 420 100" 
            xmlns="http://www.w3.org/2000/svg">
              
            <polygon points="26, 86 11.2, 40.4 
                50, 12.2 88.8, 40.4 74, 86" 
                fill="green" 
                shape-rendering="crispEdges" />
        </svg>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :