CSS shape-rendering Property
Last Updated :
13 Jun, 2023
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
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
.
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
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
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
Supported Browsers: The browsers supported by the shape-rendering property are listed below:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer 9
Similar Reads
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 Proper
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: <length> | <percentage> Property Values: length: It is used to s
2 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: <basic-shape> | <shape-box> | <image
4 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 W
2 min read
CSS mask-repeat property
CSS mask-repeat sets how the mask images are placed after they have been sized and positioned. The mask image can be repeated along the vertical or horizontal or both axes or not repeated. Syntax: mask-repeat: One-values /* Or */ mask-repeat: Two-values /* Or */ mask-repeat: Multiple values /* Or */
2 min read
CSS border-right-style Property
The border-right-style property in CSS is used to change the appearance of the right line segment of the border of an element. Default Value: none Syntax: border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit; Property Values: none: It is the default value and
6 min read
CSS border-right Property
The border-right Property is a shorthand property used for all the three Properties that are given below-border-right-widthborder-right-style(if required)border-right-colorSyntax:border-right: border-width border-style border-color|initial|inherit;Property Values:Â border-width border-style border-co
2 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: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>.
2 min read
CSS border-radius Property
The CSS border-radius property allows you to round the corners of an element’s outer border, giving it a smooth, curved appearance. You can specify one, two, three, or four values to individually control the radius of each corner. By using this property, you can create visually appealing designs, su
5 min read
CSS box-sizing Property
The CSS box-sizing property controls how an element's size is calculated. When using the border-box model, the padding and border are included in the element’s total width and height, making it easier to manage the layout.Syntaxbox-sizing: content-box | border-box;Property ValuesHere is a descriptio
3 min read