Open In App

CSS shape-rendering Property

Last Updated : 13 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The shape-rendering property is used to hint the renderer about the tradeoffs that have to be made while rendering shapes like circles, rectangles or paths. The renderer can be told to make the shape geometrically precise or optimize the shape to speed up rendering in certain situations. 

Syntax:

shape-rendering: auto | optimizeSpeed | crispEdges | geometricPrecision | initial | inherit

Property Values:

  • auto: It is used to indicate that the user agent would automatically make the decision to balance the speed, have crisp edges or have good geometric precision. Generally, good precision is given more importance than speed and crisp edges. This is the default value. 
  • optimizeSpeed: It is used to indicate that the shape will be rendered in a manner to emphasize speed over geometric precision or crisp edges. This may cause the user agent to turn off anti-aliasing for all shapes. 
  • crispEdges: It is used to indicate that the shape will be rendered with an emphasis given to the contrast of clean edges over geometric precision or speed. The user agent may turn off anti-aliasing for shapes and adjust the line positions and widths to align with the pixels of the device.
  • initial: It is used to set the property to its default value. 
  • inherit: It is used to set the property to inherit from its parent element.
  • geometricPrecision: It is used to indicate that the shape will be rendered with geometric precision rather than focusing on the speed or crisp edges. 

Example: In this example, we are using the above-explained property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | shape-rendering property
    </title>
    <style>
        .shape-crisp {
            /* Assume the crispEdges
    value for demonstration */
            shape-rendering: crispEdges;
 
            fill: green;
        }
 
        .shape-auto {
            shape-rendering: auto;
 
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-rendering
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <circle class="shape-crisp"
                    cx="100"
                    cy="125"
                    r="100" />
            <circle class="shape-auto"
                    cx="350"
                    cy="125"
                    r="100" />
        </svg>
    </div>
</body>
</html>


Output: Comparing the crispEdges value with the auto value 

auto

Example: In this example, we are using the above-explained property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | shape-rendering property
    </title>
    <style>
        .shape-auto {
            /* Assume the auto
    value for demonstration */
            shape-rendering: auto;
 
            fill: green;
        }
 
        .shape-optimizespeed {
            shape-rendering: optimizeSpeed;
 
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-rendering
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <circle class="shape-auto"
                    cx="100" c
                    y="125"
                    r="100" />
            <circle class="shape-optimizespeed"
                    cx="350"
                    cy="125"
                    r="100" />
        </svg>
    </div>
</body>
</html>


Output: Comparing the auto value with the optimizeSpeed value 

optimizeSpeed

Example: In this example, we are using the above-explained property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | shape-rendering property
    </title>
    <style>
        .shape-auto {
            /* Assume the auto
    value for demonstration */
            shape-rendering: auto;
 
            fill: green;
        }
 
        .shape-crisp {
            shape-rendering: crispEdges;
 
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-rendering
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <circle class="shape-auto"
                    cx="100"
                    cy="125"
                    r="100" />
            <circle class="shape-crisp"
                    cx="350"
                    cy="125"
                    r="100" />
        </svg>
    </div>
</body>
</html>


Output: Comparing the auto value with the crispEdges value 

crispEdges

Example: In this example, we are using the above-explained property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | shape-rendering property
    </title>
 
    <style>
        .shape-auto {
            /* Assume the auto
            value for demonstration */
            shape-rendering: auto;
            fill: green;
        }
 
        .shape-crisp {
            shape-rendering: geometricPrecision;
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-rendering
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
 
            <circle class="shape-auto"
                    cx="100"
                    cy="125"
                    r="100" />
 
            <circle class="shape-crisp"
                    cx="350"
                    cy="125"
                    r="100" />
        </svg>
    </div>
</body>
</html>


Output: Comparing the crispEdges value with the geometricPrecision value 

geometricPrecision

Example: In this example, we are using the above-explained property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | shape-rendering
    </title>
 
    <style>
        .shape-crisp {
            /* Assume the crispEdges
    value for demonstration */
            shape-rendering: crispEdges;
 
            fill: green;
        }
 
        .shape-initial {
            shape-rendering: initial;
 
            fill: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-rendering
    </b>
    <div class="container">
        <svg height="250px"
             width="500px"
             xmlns="http://www.w3.org/2000/svg"
             version="1.1">
            <circle class="shape-crisp"
                    cx="100"
                    cy="125"
                    r="100" />
            <circle class="shape-initial"
                    cx="350"
                    cy="125"
                    r="100" />
        </svg>
    </div>
</body>
</html>


Output: Comparing the round value with the initial value 

initial

Supported Browsers: The browsers supported by the shape-rendering property are listed below:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9


Similar Reads

Server Side Rendering vs Client Side Rendering vs Server Side Generation
In the world of web development, there are several approaches to rendering web pages: server-side rendering, client-side rendering, and server-side generation. Each approach has its own advantages and disadvantages, and choosing the right one for your project depends on your specific needs and goals. In this blog, we’ll explore the differences betw
4 min read
Explain lifecycle of component re-rendering due to re-rendering of parent component
React is a javascript library that renders components written in JSX. You can build and render any component as per your usage. States can be updated accordingly using the setState method. Props can be updated only by the parent component. Updating of state and props leads to the rendering of UI. Different lifecycle methods are called during these
2 min read
How does SSR(Server-Side Rendering) differ from CSR(client-side rendering) ?
Server-Side Rendering (SSR) and Client-Side Rendering (CSR) are two different approaches used in web development to render web pages to users. Each approach has its own set of advantages and disadvantages. In this article, we will learn about the difference between SSR and CSR with examples and features. Table of Content Server-Side Rendering (SSR)
4 min read
SVG shape-rendering Attribute
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: &lt;circle&gt;, &lt;ellipse&gt;, &lt;line&gt;, &lt;path&gt;, &lt;polygon&gt;, &lt;polyline&gt;, and &lt;rect&gt;. Syntax: shape-rendering = auto | optimizeSpeed | c
2 min read
CSS image-rendering Property
The image-rendering property is used to set the type of algorithm used for image scaling. This property can be used to modify the scaling behavior when the user scales the image above or below the original dimensions. Syntax: shape-rendering: auto | crisp-edges | pixelated | initial | inherit Property Values: auto: It is used to indicate that the s
3 min read
CSS | shape-outside Property
The shape-outside property is used to define the shape that the adjacent inline content may wrap around. It can be used to define complex shapes including images that can be used to wrap text around instead of simple boxes. Syntax: shape-outside: &lt;basic-shape&gt; | &lt;shape-box&gt; | &lt;image&gt; | none | initial | inherit Property Values: bas
4 min read
CSS | shape-image-threshold Property
The shape-image-threshold property is used to set the threshold of the alpha channel used to extract the shape when using an image for shape-outside. Syntax: shape-image-threshold: &lt;alpha-value&gt; Property Values: alpha-value: It is used to set the threshold for extracting the shape. The pixels which are greater than the threshold value would b
3 min read
CSS | shape-margin Property
The shape-margin property is used to set the margin of a shape created by the shape-outside property. This margin is used to adjust the space between the edges of the shape and the surrounding content. Syntax: shape-margin: &lt;length&gt; | &lt;percentage&gt; Property Values: length: It is used to set the margin in measurement units. It can also ta
2 min read
CSS text-rendering
Text-rendering is a property that allows you to choose what to optimize when rendering text. It sends the information to the rendering engine about what to optimize for while rendering text. It's actually not a CSS property and is not defined in any CSS standard. It's an SVG property but Gecko and Webkit browsers allow you to apply this property to
2 min read
jQWidgets jqxScheduler rendering Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxScheduler widget is used to show a set of appointments in a day, week, month, timeline day, timeline week as well as timeline month views. The rendering prope
2 min read