Les nouveautés SVG2
Rapide présentation de la deuxième version de SVG qui verra peut-être le jour. Les fonctionnalités listées ci-dessous pourront faire l'objet d'un retrait, en voici quelque unes.
Nouveaux éléments :
Effet avancé avec le rendu de maillage de dégradé avec les éléments meshgradient, meshrow et meshpatch.
En savoir plus avec cet article (EN).
Effet avancé avec le rendu de hachures avec les éléments suivants hatch et hatchpath.
Les éléments remplacés HTML tels que video, audio, canvas ou encore iframe peuvent désormais s'insérer dans un document SVG sans avoir recours à l'élément foreignObject. De même que les éléments link, base, style, meta ou encore script peuvent être inclus dans le SVG.
Nouveaux attributs :
Attributs tabindex et role sur tous les éléments de rendu.
Les attributs géométriques peuvent être utilisés en tant que propriétés de style (exemples : x, y, cx, d...).
L'attribut xlink: href devient href.
L'attribut xml: lang devient lang.
Nouvelles propriétés de style :
Prise en charge de la propriété z-index :
<svg>
<rect z-index="-1" x="0" y="10" width="100" height="100" fill="#7A5FFF"/>
<rect z-index="1" x="40" y="20" width="100" height="100" fill="#01FF89"/>
</svg>
<svg>
<rect z-index="1" x="0" y="20" width="100" height="100" fill="#7A5FFF"/>
<rect z-index="-1" x="40" y="10" width="100" height="100" fill="#01FF89"/>
</svg>
Prise en charge de la propriété paint-order pour le contrôle de l'ordre du tracé, du remplissage et du dessin du marqueur :
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="300" viewBox="0 0 800 300">
<style>
text {
font: 3rem bold sans-serif;
stroke-linejoin: round;
text-anchor: middle;
fill: #01FF89;
stroke: #7A5FFF;
}
</style>
<text class=paint x="150" y="100" style="stroke-width: 6px;">Sans paint-order</text>
<text class=paint x="150" y="200" style="stroke-width: 12px; paint-order: stroke;">Avec paint-order</text>
</svg>
Prise en charge de la propriété vector-effect :
<svg width="200" height="200" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="#7A5FFF" stroke-width="2"/>
<g transform="rotate(45,25,25)">
<path d="M25 15 L 25 35" fill="none" stroke="#7A5FFF" stroke-width="2" stroke-linecap="round"/>
<path d="M15 25 L 35 25" fill="none" stroke="#7A5FFF" stroke-width="2" stroke-linecap="round"/>
</g>
</svg>
<svg width="200" height="200" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="#7A5FFF" stroke-width="2" vector-effect="non-scaling-stroke"/>
<g transform="rotate(45,25,25)">
<path d="M25 15 L 25 35" fill="none" stroke="#7A5FFF" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
<path d="M15 25 L 35 25" fill="none" stroke="#7A5FFF" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
</g>
</svg>
Vous pouvez retrouver toutes les nouveautés dans cet article🔗.