Scalable Vector Graphics – Ou svg, c'est plus simple

View Github Repository Open presentation in a new window

EricDupertuis

See all presentation from EricDupertuis

Scalable Vector Graphics – Ou svg, c'est plus simple

0 0

svg-talk

A simple svg talk for my webdesign class

On Github EricDupertuis / svg-talk

Scalable Vector Graphics

Ou svg, c'est plus simple

Par Eric Dupertuis / @dupertuiseric

1

C'est quoi le svg ?

Wikipedia
2

Pourquoi utiliserle SVG ?

  • Vectorielle, scalabilité à l'infini
  • Image légère
  • Peut être utilisée comme une image bitmap (img, object, background image, etc.)
  • Manipulable avec du CSS et du Javascript
3

A quoi ça ressemble ?

<svg viewBox="0 0 100 100">
<path fill="#BE1637" stroke="#fff" d="M96.333,18.385c-2.396-6.01-7.205-11.064-13.857-14.194
C76.595,1.423,70.26,1.09,64.501,2.782
C58.743,4.472,53.566,9.081,50,14.408
c-3.565-5.327-8.743-9.936-14.5-11.626
C29.743,1.09,23.406,1.423,17.526,4.191
c-6.652,3.128-11.46,8.184-13.858,14.194
c-2.396,6.01-2.407,12.987,0.614,19.927
C10.743,53.154,49.795,87.993,50,88.588
c0.205-0.595,39.258-35.434,45.718-50.276
C98.74,31.371,98.729,24.395,96.333,18.385z"></path>
</svg>

Avec du css

  .coeur:hover {
	  fill: #fff;
	  stroke: #BE1637;
  }
4

Utilisation du SVG

texte animé

hack the planet

Masques

Des logos animés

Icônes

Et autres...

admettons-le

Whoa...

5

Et niveau support ?

6

Comment joueravec le svg ?

  • Illustrator, Photoshop, Inkscape
  • Librairies Javascript
    • Snap.js
    • Svg.js
    • Raphaël.js
    • Vivus
  • Manuellement... pour les fous
7

Finalement

Le SVG,

C'est bon,

Mangez en

Scalable Vector Graphics Ou svg, c'est plus simple Par Eric Dupertuis / @dupertuiseric