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.

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.

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.