Shape-rendering - Propriété CSS

shape-rendering

Résumé des caractéristiques de la propriété shape-rendering

Description rapide
Définit si la priorité doit être donnée à la précision ou bien au temps de calcul, lors du tracé d'une forme en SVG.
Statut
Standard
S'applique à
Formes géométriques.
Utilisable sur
SVG
Valeurs prédéfinies
auto | optimizeSpeed | crispEdges | geometricPrecision
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété shape-rendering passe d'une valeur à l'autre sans transition.
Module W3C
SVG (Scalable Vector Graphics)
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma syntaxique de shape-rendering.

shape-rendering - Syntax DiagramSyntax diagram of the shape-rendering CSS property. See stylescss.free.fr for details. auto auto optimizeSpeed optimizeSpeed crispEdges crispEdges geometricPrecision geometricPrecisionshape-rendering:;shape-rendering:;
Schéma syntaxique de la propriété shape-rendering
Description des valeurs

Description de la propriété shape-rendering.

shape-rendering définit si une forme dessinée en SVG doit être la plus lissée possible, ou, au contraire, nécessiter le moins de calculs. Autrement dit shape-rendering permet de choisir entre la précision du tracé ou la vitesse de calcul.

Les formes reconnues par SVG sont :

  • Les lignes simples ou multiples : balises line et polyline.
  • Les cercles et ellipses : balises circle et ellipse.
  • Les rectangles et autres polygones : balises rect et polygon.
  • Les tracés par chemin : balise path.

Remarque de syntaxe : les différentes valeurs acceptées par shape-rendering adoptent le mode d'écriture camel-case couramment utilisé en SVG, et non pas le mode d'écriture en kebab-case plus courant en CSS.

Pour définir comment doit être tracés les textes, une propriété équivalente existe : text-rendering.

Valeurs pour shape-rendering.

  • shape-rendering: auto;

    Valeur par défaut. auto demande au navigateur de faire un compromis entre une tracé lissé et un temps de calcul réduit.

    L'exemple ci-dessous (et tous les suivants) présent une droite très légèrement inclinée, et un arc de cercle très peu courbé. C'est sur ce genre de formes que l'effet de la propriété shape-rendering est le plus visible.


    shape-rendering: normal;

  • shape-rendering: optimizeSpeed;

    optimizeSpeed demande au navigateur de donner la priorité à la vitesse de rendu, au détriment du lissage des tracés et de la précision géométrique. Cette valeur provoque généralement la désactivation de l'anticrénelage de forme.


    shape-rendering: optimizeSpeed;

  • shape-rendering: crispEdges;

    Cette valeur donne la priorité à la netteté des contours. Cela s'obtient avec les compromis suivants :

    • Désactivation de l'anti-crénelage, ce dernier ajoutant des pixels intermédiaires pour lisser les tracés.
    • Recalage des tracés sur des valeurs de pixels entières.


    shape-rendering: crispEdges;

  • shape-rendering: geometricPrecision;

    La valeur geometricPrecision donne la priorité à la précision des tracés, au détriment du temps de calcul et de la netteté des traits.


    shape-rendering: geometricPrecision;

Valeurs globales
(communes à toutes les propriétés)

shape-rendering: initial (auto) shape-rendering: inherit shape-rendering: revert shape-rendering: revertLayer shape-rendering: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Animation de la propriété shape-rendering.

L'animation de la propriété shape-rendering est possible de façon discrète (passage brutal d'une valeur à une autre), mais l'effet visuel est insignifiant.

Exemple interactif avec la propriété shape-rendering.

Les trois lignes ci-dessous permettent de visualiser l'effet de la propriété shape-rendering. Les deux premières sont des lignes ondulées, avec des épaisseurs respectivement de 1 et 3 pixels. La troisième est une ligne horizontale positionnée entre deux pixels : y="50.5".

shape-rendering :

Prise en charge par les navigateurs (compatibilité).

1
Propriété
shape-rendering
Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra

Samsung Internet

Opéra Mobile

QQ Browser

Baidu Browser

Safari sur IOS

Safari

Firefox

Edge

Chrome

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la propriété shape-rendering.

Voir aussi, à propos du SVG.

Le dessin des formes en SVG, est décrit par le module Scalable Vector Graphics (SVG) . On retrouve dans ce module la propriété shape-rendering, ainsi que les descriptions suivantes :

Propriétés :

r
Définit le rayon d'un cercle en SVG.
rx
Définit le rayon horizontal d'une ellipse, en SVG.
ry
Définit le rayon vertical d'une elliipse, en SVG.
stop-color
Définit la couleur d'un point de stop dans un dégradé.
stop-opacity
Définit l'opacité de la couleur d'un point de stop dans un dégradé.
text-anchor
Définit si un texte en SVG s'ancre par le milieu, le départ ou la fin.
text-rendering
Active ou désactive le traitement de la typographie évoluée (ligatures, crénage...)
⚠
vector-effect
Définit comment les transformations (rotations, changements d'échelle, etc.) agissent.