rick@tillitsdone.com

+66824564755

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.

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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-content-visibility.png

CSS content-visibility Boost Performance with Visibility Control Learn about the CSS content-visibility property, which helps control the rendering of elements. Discover its use cases and available options like visible, hidden, and auto.

css_property_cover/css-property-will-change.png

CSS will-change Optimizing Web Performance Learn how to use the CSS will-change property to optimize web performance. This property helps browsers anticipate changes, improving animations and transitions. Discover available options like auto, scroll-position, and contents.

css_property_cover/css-property-mix-blend-mode.png

Mastering CSS mix-blend-mode for Dynamic Designs Learn how to use the CSS mix-blend-mode property to blend elements with backgrounds or other elements for stunning visual effects. Explore the available blend modes and optimize your designs for performance.

css_property_cover/css-property-stroke-dashoffset.png

Mastering CSS stroke-dashoffset for Dynamic SVG Graphics Learn how to use the CSS stroke-dashoffset property to create dynamic and visually appealing SVG graphics. Explore various options and examples for enhancing your web designs.

css_property_cover/css-property-background-attachment.png

CSS Background-Attachment Enhance Web Design Learn how to use CSS background-attachment for parallax effects and fixed backgrounds. Options include scroll, fixed, and local for dynamic designs.

css_property_cover/css-property-background-repeat.png

CSS Background-Repeat A Comprehensive Guide Discover how to use CSS background-repeat for web design. Control image repetition with options like repeat, no-repeat, space, and round.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.