Tillitsdone
down Scroll to discover
CSS shape-rendering Optimize SVG Rendering
Learn how to use the CSS shape-rendering property to control SVG rendering.

Optimize for speed, precision, or crisp edges with available options.
thumbnail

Introduction

The shape-rendering CSS property helps you control how shapes like paths, circles, or rectangles are drawn on the web, especially for SVG elements. It lets you prioritize rendering speed, edge sharpness, or geometric precision, making your web designs look just the way you want.

Specification

The shape-rendering property is part of the Scalable Vector Graphics (SVG) 2 specification. It gives the browser hints about how to render shapes, balancing speed, precision, and edge crispness. You can find the specifications in the SVG 2 ShapeRendering section.

Syntax

Here’s how to use the shape-rendering property in your CSS:

shape-rendering: auto;
shape-rendering: crispEdges;
shape-rendering: geometricPrecision;
shape-rendering: optimizeSpeed;
/* Global values */
shape-rendering: inherit;
shape-rendering: initial;
shape-rendering: revert;
shape-rendering: revert-layer;
shape-rendering: unset;

Each value tells the browser to prioritize different aspects of shape rendering:

  • auto: Balances speed, edge crispness, and geometric precision, with a slight emphasis on precision.
  • crispEdges: Emphasizes crisp edges over speed and geometric precision, often turning off anti-aliasing.
  • geometricPrecision: Focuses on geometric precision at the expense of speed and crisp edges.
  • optimizeSpeed: Prioritizes rendering speed over precision and crisp edges, potentially skipping anti-aliasing.

Additionally, global values like inherit, initial, revert, revert-layer, and unset can be used to manage the property’s value based on the CSS cascade and inheritance rules.

Values

The shape-rendering property has several values that dictate how shapes should be rendered. Each value emphasizes different aspects of rendering:

  • auto: Balances speed, edge crispness, and geometric precision, with a slight emphasis on precision. This is the default value.
  • crispEdges: Emphasizes crisp edges over geometric precision or speed. The browser may turn off anti-aliasing.
  • geometricPrecision: Prioritizes geometric precision over speed or crisp edges. The browser may use anti-aliasing.
  • optimizeSpeed: Focuses on rendering speed over geometric precision or edge crispness.
  • inherit: Inherits the shape-rendering value from the parent element.
  • initial: Sets the property to its default value, which is auto.
  • revert: Reverts the property to the user agent’s default stylesheet value.
  • revert-layer: Reverts the property to the value specified in the next outer layer of cascading.
  • unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Examples

Let’s look at some examples to see how the shape-rendering property affects SVG shapes.

Example 1: Comparing crispEdges and auto

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-rendering property</title>
<style>
.shape-crisp {
shape-rendering: crispEdges;
fill: green;
}
.shape-auto {
shape-rendering: auto;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">Website</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>

Example 2: Comparing auto and optimizeSpeed

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-rendering property</title>
<style>
.shape-auto {
shape-rendering: auto;
fill: green;
}
.shape-optimizespeed {
shape-rendering: optimizeSpeed;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">Website</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-optimizespeed" cx="350" cy="125" r="100"/>
</svg>
</div>
</body>
</html>

Example 3: Comparing auto and geometricPrecision

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-rendering property</title>
<style>
.shape-auto {
shape-rendering: auto;
fill: green;
}
.shape-crisp {
shape-rendering: geometricPrecision;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">Website</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>

Example 4: Comparing crispEdges and initial

<!DOCTYPE html>
<html>
<head>
<title>CSS | shape-rendering property</title>
<style>
.shape-crisp {
shape-rendering: crispEdges;
fill: green;
}
.shape-initial {
shape-rendering: initial;
fill: green;
}
</style>
</head>
<body>
<h1 style="color: green">Website</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>

These examples show how the shape-rendering property can be used to control the appearance of SVG shapes, helping you optimize for different rendering scenarios.

Browser Compatibility

The shape-rendering property is widely supported across modern web browsers, making it a valuable tool for web developers. Here’s an overview of the browser compatibility:

  • Chrome: Full support.
  • Firefox: Full support.
  • Safari: Full support.
  • Opera: Full support.
  • Internet Explorer: Supported from version 9 onwards.

For the most up-to-date information on browser compatibility, you can refer to resources like Can I Use or the MDN Web Docs.

See Also

For further reading and related topics, check out these resources:

  • SVG shape-rendering Attribute: Learn more about the shape-rendering attribute in SVG.
  • CSS image-rendering Property: Controls how images are scaled and rendered, similar to shape-rendering for shapes.
  • CSS vector-effect Property: Applies vector effects to SVG shapes.
  • MDN Web Docs: Comprehensive documentation on web technologies.
  • Can I Use: Check the compatibility of CSS properties across browsers.
  • W3C SVG Specification: Official specification for Scalable Vector Graphics (SVG).

These resources can help you deepen your understanding of web development and design, providing you with the tools and knowledge you need to create high-quality, optimized web content.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.