SKETCH

QU'EST CE QUE C'EST ?

• Editeur Graphique Vectoriel
• Résolument orienté web et mobile
• Simple et agréable à prendre en main

Et par rapport aux autres ?

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$)

FONCTIONNALITÉS INTÉRESSANTES

• Un inspecteur (similaire aux navigateurs)
• Système de plugins
• Système d'éléments réutilisables (Symbol)
• Fonctionnalité Mirror / Live Preview

SVG

Scalable Vector Graphics

qu'est-ce que c'est ?

• Format d'image vectoriel basé sur XML
• Premier draft de la W3C en ... ?
• v1.1 - 2011
• v2 RC - Septembre 2016

puis-je l'utiliser ?

QUAND L'UTILISER ?

• Complexité d'image assez faible (pas une photo ou un dessin)
• Besoin d'animation
• Besoin de Scalabilité/Mise à l'échelle
• Image inline (mieux que du Base64)
• Accessibilité à tout ou partie de l'image
• SEO

contenu

• Balises et attributs (viewBox, g..)
• Path
• Shapes (Circle, Triangle, Rectangle, Polygon)
• Fill
• Clipping, Masking, Composition
• Filters
• Links
• Scripting
• Metadata
• (Animation - SMIL)

path en detail

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• Z = closepath

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>

path en detail

C/c = Cubic Bézier Curve

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

path en detail

S/s = Smooth Curve To

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

path en detail

Q,q = Quadratic Bézier Curve

<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

path en detail

T,t = Smooth Quadratic Bézier Curve To

<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

path en detail

A,a = Elliptical Arc

  <path d="M230 230 A 45 45, 0, 1, 1, 275 275 Z" fill="blue"/>

ANIMATION

qu'est-ce qu'une animation ?

ET DANS UN NAVIGATEUR ?

CSS

Les animations et transitions n'utilisent le GPU que sur les propriétés suivantes :

• transform
• filter
• opacity

JavaScript

• setInterval()
• setTimeout()
• requestAnimationFrame()

RAF

const animationID = requestAnimationFrame(animate);

const animate = () => {
    // Votre animation




    // Appel de la frame suivante
    requestAnimationFrame(animate);
};

ALLER PLUS LOIN:

Les 12 principes de l'animation

Démo

CONCLUSION

& Questions