Plus souple qu'Illustrator
Plus orienté web que Photoshop
Fonctionnalités moins poussées
Les nouveaux le copient (Vectr, Adobe Experience Design)
Moins cher (licence à 90$)
Scalable Vector Graphics
M,L,H,V,Z - coordonnées absolues
m,l,h,v,z - coordonnées relatives
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
C/c = Cubic Bézier Curve
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
S/s = Smooth Curve To
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
Q,q = Quadratic Bézier Curve
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
T,t = Smooth Quadratic Bézier Curve To
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
A,a = Elliptical Arc
<path d="M230 230 A 45 45, 0, 1, 1, 275 275 Z" fill="blue"/>
CSS
Les animations et transitions n'utilisent le GPU que sur les propriétés suivantes :
JavaScript
const animationID = requestAnimationFrame(animate);
const animate = () => {
// Votre animation
// Appel de la frame suivante
requestAnimationFrame(animate);
};
& Questions