10 astuces SVG qui vont vous sauver la vie

#SVGtips

Vincent De Oliveira · @iamvdo

10 astuces SVG dans un talk de 20 minutes alors qu’il aurait fallu 3 bonnes heures

Hello, c'est @iamvdo

Vincent De Oliveira
Formateur web ENSG Géomatique
Je fais du CSS
- CSS3Create, iamvdo, Pleeease
- Livre CSS3 Le design web moderne

Pourquoi SVG ?

Scalable Vector Graphics

HD ready

Parfait pour icones, logos

XML = facile à modifier, accessible

Astuce 1.
Apprenez SVG

Apprendre SVG

C’est facile !
Vous l’avez fait pour HTML.

Objectif Comprendre (et modifier) ce qui sort de Illustrator, de Sketch ou autre

Les bases SVG

Structure minimale
Éléments classiques
Principes de bases
Bon sens
- arrondi, viewBox absurdes, matrices de transformations, etc.

Dans tous les cas Utiliser un outil d’optimisation : SVGOMG (SVGO), workflow, etc.

Astuce 2.
Définissez toujours un `viewBox`

Le SVG, le viewport et le `viewBox`

Le `viewBox`

Avec un B majuscule
Définit :
- le système de coordonnées
- l’aspect ratio (géré ensuite avec preserveAspectRatio)
Permet le redimensionnement

Indispensable !

Et notamment pour IE

C’est plus facile si le viewBox est carré.

Et si le viewport l’est aussi !

Astuce 3.
Définissez (quasiment) toujours `width` et `height`

`width` et `height`

N’apporte rien en soit
Mais fixe un bug d’aspect ratio sur IE
Quasiment toujours :
- en fonction de la méthode d’inclusion
- si vous voulez un SVG responsive

Beaucoup déconseille, moi je conseille. #avisContraire

Cas d’utilisation

Empêcher un SVG trop gros pendant le chargement du CSS

Avec viewBox, SVG responsive sans CSS
Utilisez CSS
Fixez aussi width et height
Et même 0 !

Fonctionne ainsi grâce à la cascade SVG

Les attributs de présentation sont toujours surclassés par CSS

Cascade des styles SVG

Attributs de présentation (width, height, fill, stroke, etc.)
Feuille de style externe <?xml-stylesheet type="text/css" href="styles.css"?>
Styles externes <style type="text/css">…</style>
Styles internes <style type="text/css">…</style>
Styles inline style="…"

Astuce 4.
Utilisez la méthode d’inclusion adaptée à vos besoins

	Cache	Req. HTTP	CSS embed	CSS anim	CSS interaction	JS embed
`<img>`	✓	✓	✓	✓	X	X
`background-image`	✓	✓	✓	✓	X	X
inline (HTML)	X	X	✓	✓	✓	✓
`<use>` interne	X	X	✓	~	~	~
`<use>` externe	✓	✓	~	~	~	~
`<object>`, `<embed>`, `<iframe>`	✓	✓	✓	✓	✓	✓

Ça dépend^™

Astuce 5.
Oubliez tout ce que vous savez sur CSS

Pas de box-model CSS en SVG

Tout est en position absolue (canvas SVG)
Pas de position relative
Pas de z-index
Pas de flux de positionnement
Pas vraiment de relations entre les éléments
Pas d’alignement
Pas de marges
Pas toujours les mêmes propriétés CSS : background = fill, border = stroke, etc.

Pas plein de trucs cools en fait !

Mais c’est pas grave

Éditeur graphique : dessinez !

Sinon : transform, x/y, viewBox

Mais c’est pas grave

<svg viewBox="0 0 100 100">
  <rect width="50" height="50" x="50%" y="50%" transform="translate(-25 -25)" />
</svg>

<!-- SVG imbriqués -->
<svg viewBox="0 0 100 100">
  <svg viewBox="-25 -25 100 100">
    <rect width="50" height="50" />
  </svg>
</svg>

<!-- identique mais avec symbol+use -->
<svg viewBox="0 0 100 100">
  <symbol id="symbol" viewBox="-25 -25 100 100">
    <rect width="50" height="50" />
  </symbol>
  <use xlink:href="#symbol" />
</svg>

Astuce pour `<text>`

<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle"> HELLO </text>

Astuce 6.
N’utilisez pas les transformations CSS
à mon grand regret :(

Le mec, il s’appelle «On»

Transform SVG != Transform HTML
Différence d’origines de transformation
- HTML == transform-origin: 50% 50% (de l’élément)
- SVG == transform-origin: 0 0 (du canvas)
Ensuite
- Origine en pourcentages : relative à l’élément
- Origine absolue : relative au canvas SVG
Longtemps, y’avait un bug dans Firefox avec les %
Mais, ça c’était avant
Le bug Firefox est corrigé (FF41)
Enfin, ce n’est pas si simple
Il y a eu un changement de spec…
Maintenant
- origine dépend de transform-box: border-box | fill-box | view-box
Firefox supporte transform-box: border-box | fill-box | view-box
Et donc, Firefox est OK, c'est un bug Chrome
Quoique, pour l’instant il faut activer un flag dans Firefox
Donc on est pas encore sorti d’affaire
Alors, on fait comment ?
IE n’aurait-il pas la solution ?
Je crois bien…

Pas de support du tout dans IE/Edge

#merciIE

Utilisez les transformations SVG (mais pas de pourcentage en SVG)

Utilisez JavaScript (GSAP, SnapSVG, etc.)

Ni les animations ?

Meilleur support
Animation CSS
- Support depuis Edge
SMIL : pas de support IE, deprecated Chrome

Utilisez JavaScript (WebAnimations, librairies, etc.)

d’autres outils

Astuce 7.
Creéz des sprites comme avant

Good ol’ days

Créez une image SVG

background-image

background-position

icons.svg

Fonctionne partout IE9+ !

.Icon { background-image: url(icons.svg); background-size: cover; background-position: 0 0; } .Icon:hover { background-position: 0 -100%; }

Astuce 8.
Obtenez des bordures bien nettes

C’est du SVG, mais c’est flou ‽

C’est flou ça !

Le problème

Les bordures d’un élément SVG sont dessinées à cheval sur le bord. Des bordures non multiple de 2 sont donc floues (ou en fonction du ratio Pixel CSS vs Pixel physique)

Les solutions

Bordure floue

Non multiple de 2, etc.

Décaler d’½ pixel votre forme

transform=translate(.5 .5)

shape-rendering: crispEdges

mais pas de support IE/Edge

Bordure x2 + clip-path

mais crée bordure interne

Bordure x2 + paint-order

mais crée bordure externe

mais pas de support IE/Edge

stroke-alignment prévu pour SVG2
(pas de support actuellement)

Astuce 9.
Gérez la taille des bordures

stroke-width, -dasharray, etc.

5

=viewBox

5%

=viewport

Les solutions

Avec vector-effect: non-scaling-stroke (mais pas de support IE/Edge)

Astuce 10.
Créez un SVG fluide, même inline, cross-browser

Rien à faire, normalement

Mais quand même !

En fonction de la méthode d’embed :
- background-image: 100%, cover/contain ou fixes
- <img> : width: 100%
- <object>/<embed> : width: 100%
- Inline SVG, <iframe> : Padding Hack

Padding Hack

SVG
- Supprimer les attributs width et height
Créez conteneur
- width: xx, height: 0
- padding en % = ratio hauteur/largeur du SVG
- position: relative
SVG embed (inline ou <iframe>)
- position: absolute
- top: 0, left: 0, width: 100%, height: 100%

Responsive SVG

Merci, questions?

Vincent De Oliveira · @iamvdo

slides.iamvdo.me/kiwiparty16

10 astuces SVG qui vont vous sauver la vie

#SVGtips

10 astuces SVG dans un talk de 20 minutes alors qu’il aurait fallu 3 bonnes heures

Hello, c'est @iamvdo

Astuce 1. Apprenez SVG

Apprendre SVG

Les bases SVG

Astuce 2. Définissez toujours un viewBox

Le SVG, le viewport et le viewBox

Le viewBox

Astuce 3. Définissez (quasiment) toujours width et height

width et height

Cas d’utilisation

Empêcher un SVG trop gros pendant le chargement du CSS

Cascade des styles SVG

Astuce 4. Utilisez la méthode d’inclusion adaptée à vos besoins

Astuce 5. Oubliez tout ce que vous savez sur CSS

Pas de box-model CSS en SVG

Mais c’est pas grave

Astuce pour <text>

Astuce 6. N’utilisez pas les transformations CSS à mon grand regret :(

Le mec, il s’appelle «On»

Ni les animations ?

Astuce 7. Creéz des sprites comme avant

Astuce 8. Obtenez des bordures bien nettes

Le problème

Les solutions

Astuce 9. Gérez la taille des bordures

stroke-width, -dasharray, etc.

Les solutions

Astuce 10. Créez un SVG fluide, même inline, cross-browser

Padding Hack

Responsive SVG

Merci, questions?

Astuce 1.
Apprenez SVG

Astuce 2.
Définissez toujours un `viewBox`

Le SVG, le viewport et le `viewBox`

Le `viewBox`

Astuce 3.
Définissez (quasiment) toujours `width` et `height`

`width` et `height`

Astuce 4.
Utilisez la méthode d’inclusion adaptée à vos besoins

Astuce 5.
Oubliez tout ce que vous savez sur CSS

Astuce pour `<text>`

Astuce 6.
N’utilisez pas les transformations CSS
à mon grand regret :(

Astuce 7.
Creéz des sprites comme avant

Astuce 8.
Obtenez des bordures bien nettes

Astuce 9.
Gérez la taille des bordures

Astuce 10.
Créez un SVG fluide, même inline, cross-browser