SlideShare une entreprise Scribd logo
pour le web
Frédéric Bisson – Ville de Rouen
08.05.2013
Sommaire
●
Qu’est-ce que le SVG ?
●
SVG et navigateurs web
●
Optimisation du SVG pour le web
●
Bonus
●
Conclusion
●
Quelques liens
Qu’est-ce que le SVG ?
●
Le format
●
Historique du SVG
●
SVG vs JPEG/PNG
●
Les logiciels
Le format − Définition
Le SVG, ou Scalable Vector Graphics,
est un format de données
conçu pour décrire des ensembles
de graphiques vectoriels,
basé sur XML et spécifié par le W3C
Wikipédia
Le format – Du code XML
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="320" height="240">
<rect x="10" y="10"
width="300" height="220"
stroke="black" fill="none" />
<text x="70" y="130"
font-family="Ubuntu"
font-size="36">
NWXTech6
</text>
</svg>
Le format − Fonctionnalités
●
Chemins
●
Formes basiques
●
Texte
●
Remplissage
●
Dégradés et motifs
●
Masque et découpe
●
Filtres
●
Interactivité
●
Hyperliens
●
Script
●
Animation
●
Fontes
●
Métadonnées
●
Images matricielles
Historique du SVG
●
1998 lancement du groupe de travail SVG
●
2001 SVG 1.0
●
2003 SVG 1.1 (profils)
●
2008 SVG Tiny 1.2
●
2010 indexation du SVG par Google
●
2011 SVG 1.1 second edition
●
2014 SVG 2.0
Historique du SVG − Support
SVG vs JPEG/PNG
●
Redimensionnable à
l’envie
●
Modifiable
dynamiquement
●
Indexable
●
~Accessible
●
Poids=nombre
d’éléments
●
Peu consommateur
de ressources CPU
●
Support universel
(lecture/écriture)
●
Poids=résolution
Les logiciels
●
Adobe Illustrator
●
Adobe Fireworks
●
Xara Xtreme
●
CorelDRAW
●
Inkscape
●
Navigateurs web
●
LibreOffice
●
Scribus
●
The Gimp
●
Blender
●
Gnome
SVG et navigateurs web
●
Le profil Basic
●
Intégration
●
Hyperliens
●
CSS embarqué
●
SVG responsif
●
JavaScript
●
SVG paramétré
Le profil Basic
●
SVG 1.1 ajoute la notion de profil à SVG 1.0
●
3 profils sont définis :
●
Tiny
●
Basic
●
Full
●
Les navigateurs supportent le profil Basic
certaines fonctionnalités du profil Full
Le profil Basic − Fonctionnalités
●
Hyperliens
●
Ressources externes
●
Texte sur un chemin
●
Profil de couleurs
●
Dégradé simple
●
Événements
●
Filtres classiques
●
Animations
●
Masque
●
Découpe
●
Motifs
Intégration
●
Il y a 3 manières d’utiliser un fichier SVG :
●
la balise <object>,
●
la balise <img>,
●
la propriété background-image du CSS.
●
La balise <object> est la seule permettant :
●
l’interactivité,
●
les hyperliens,
●
les scripts,
●
la dégradation gracieuse.
Hyperliens − Principe
●
À l’instar d’HTML, SVG dispose de la balise <a>
●
Elle s’adapte à la forme de l’élément !
●
L’attribut target doit être positionné à _top
<a href="http://www.example.com/"
target="_top"
xlink:title="Exemple de lien">
<g>
<rect x="10" y="10" width="20" height="20"
stroke="#4d5555" fill="#feeddd"/>
<rect x="30" y="30" width="20" height="20"
stroke="#000" fill="none"/>
<text x="100" y="50">NWXTech6</text>
</g>
</a>
Hyperliens − Zone active
Zone de lien active
CSS embarqué
●
Balise <style>, comme en HTML
●
Propriétés spécifiques et adaptées au SVG
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<style>
#test {
fill: red;
stroke-width: 10%;
stroke: blue;
cursor: crosshair;
}
</style>
<circle id="test"
cx="50" cy="50"
r="40" />
</svg>
SVG responsif − ViewBox
●
Astuce de l’attribut viewBox
●
Adaptation de l’image à son conteneur
●
Attribut non géré par les logiciels d’édition
<svg width="200px" height="100px">
<svg viewBox="0 0 200 100">
SVG responsif − Utilisation
●
Côté HTML, la même astuce que pour <img>
<object data="test.svg"
style="width: 100%; height: auto"
type="image/svg+xml">
...
</object>
SVG responsif − CSS Media Queries
●
CSS Media Queries
●
Adaptation de l’image à son conteneur
●
Non géré par les logiciels d’édition
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<style>
circle { display: inherit; }
rect { display: none; }
@media all and (max-aspect-ratio: 1/1) {
circle { display: none; }
rect { display: inherit; }
}
</style>
<circle cx="50" cy="50"
r="40" fill="red" />
<rect x="10" y="10" fill="blue"
width="80" height="80" />
</svg>
JavaScript
●
JavaScript permet d’ajouter de l’interactivité
●
SVG dispose d’un DOM manipulable
exactement comme le HTML
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
onload="init(evt)">
<circle id="test" onclick="clic(evt)"
cx="50" cy="50" r="40" fill="blue"/>
<script>
function init(evt) {
elt = evt.target.ownerDocument.getElementById("test");
elt.setAttribute("fill", "red");
}
function clic(evt) {
evt.target.setAttribute("fill", "yellow");
}
</script>
</svg>
SVG paramétré − Principe
●
Le SVG peut accéder au DOM du document HTML le
contenant
●
Il peut ainsi récupérer les balises <param> de la balise
<object> le contenant
<svg onload="init(evt)">
<script>
function init(evt) {
var doc = evt.target.ownerDocument;
var params = doc.defaultView.frameElement.getElementsByTagName("param");
for(var i = 0; i > params.length; i++) {
name = params[i].getAttribute('name' );
value = params[i].getAttribute('value');
...
}
}
</script>
</svg>
Récupération du document SVG
Récupération de la balise <object> Récupération des balises <param>
Analyse et traitement des paramètres
Exécute le JavaScript une fois le SVG chargé
SVG paramétré − Exemple
<object type="image/svg+xml" data="carteinfochantiers.svg">
<param name="nombre-co" value="4" />
<param name="nombre-p" value="9" />
<param name="nombre-vmc" value="27"/>
<param name="nombre-gj" value="7" />
<param name="nombre-clls" value="3" />
<param name="nombre-gm" value="2" />
<param name="nombre-gvssh" value="2" />
<param name="nombre-cvrg" value="24"/>
<param name="nombre-scjdp" value="16"/>
<param name="nombre-g" value="5" />
<param name="nombre-smcdpsn" value="11"/>
<param name="nombre-mg" value="4" />
</object>
Optimisation du SVG pour le web
●
Quoi optimiser ?
●
GZip HTTP vs SVGZ
●
Scour
Optimisation
Les fichiers SVG générés
depuis un logiciel d’édition
sont lourds et peu optimisés
Quoi optimiser ? − Le formatage
●
Suppression de l’indentation
●
Suppression des retours à la ligne
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
width="1000"
height="1000"
viewBox="0 0 3 2"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.46"
sodipodi:docname="21 ans wikipédia.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
sodipodi:docbase="D:Documents and SettingsFlorianBureau">
Quoi optimiser ? − Le spécifique
●
Suppression des balises et attributs
spécifiques au logiciel d’édition
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
width="1000"
height="1000"
viewBox="0 0 3 2"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.46"
sodipodi:docname="21 ans wikipédia.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
sodipodi:docbase="D:Documents and SettingsFlorianBureau">
Quoi optimiser ? − Les identifiants
●
Suppression des attributs id non utilisés
●
Inkscape crée un id pour chaque balise
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
width="1000"
height="1000"
viewBox="0 0 3 2"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.46"
sodipodi:docname="21 ans wikipédia.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape"
sodipodi:docbase="D:Documents and SettingsFlorianBureau">
Quoi optimiser ? − La précision
●
La précision des logiciels est superflue pour le web
●
Les chemins sont très consommateurs de chiffres
<linearGradient
y2="29.848793"
x2="35.462624"
y1="11.839182"
x1="35.686672"
gradientTransform="matrix(0.9285552,0,0,0.8997031,-13.681016,-51.311905)"
gradientUnits="userSpaceOnUse"
id="linearGradient2289"
xlink:href="#linearGradient33382"
inkscape:collect="always" />
Quoi optimiser ? − Factorisation
●
La balise <g> propage ses attributs
<rect height="129" width="10" y="357" x="724" fill="#FF0"/>
<rect height="158" width="10" y="365" x="355" fill="#FF0"/>
<rect height="994" width="77" y="607" x="184" fill="#FF0"/>
<rect height="884" width="13" y="636" x="409" fill="#FF0"/>
<rect height="884" width="39" y="458" x="605" fill="#FF0"/>
<rect height="107" width="84" y="233" x="407" fill="#FF0"/>
<rect height="761" width="68" y="299" x="202" fill="#FF0"/>
<g fill="#FF0">
<rect height="129" width="10" y="357" x="724"/>
<rect height="158" width="10" y="365" x="355"/>
<rect height="994" width="77" y="607" x="184"/>
<rect height="884" width="13" y="636" x="409"/>
<rect height="884" width="39" y="458" x="605"/>
<rect height="107" width="84" y="233" x="407"/>
<rect height="761" width="68" y="299" x="202"/>
</g>
Quoi optimiser ? − Métadonnées
●
Suppression des métadonnées inutiles
<metadata id="metadata13">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
Quoi optimiser ? − Simplification
●
Les fichiers SVG générés
peuvent présenter un
grand nombre de points
pour décrire une figure
●
plans tracés à la main
●
retouches
●
Réduire le nombre de
points accélère le rendu
et diminue le poids du
fichier
De 21 à 11 points
Quoi optimiser ? − Illustrator
●
Le code SVG généré par Illustrator pour un
texte selon un chemin n’est pas optimal !
●
Sous MacOSX, Illustrator utilise ArialMT et non
Arial lorsqu’on utilise cette dernière
Quoi optimiser ? − Fontes
●
Utiliser une police courante (Arial etc.) est une
bonne pratique
●
La police est reconnue partout et les navigateurs
savent comment la remplacer
●
Il n’y a pas à l’incorporer dans le SVG, c’est donc un
poids en moins
A
Quoi optimiser ? − Autre
●
Le SVG généré par un logiciel d’édition pose
les mêmes problèmes que le HTML généré par
un CMS
●
D’autres optimisations sont possibles en
étudiant le contenu lui-même
Scour − Présentation
●
Programme nettoyant et optimisant les
fichiers SVG générés par des logiciels tels que
Inkscape ou Illustrator
●
Disponible en :
●
Ligne de commande
●
Greffon pour Inkscape
Scour − Traitement
●
Suppression
●
Balises vides
●
Identifiants
●
Définitions inutilisées
●
Balises spécifiques
●
Factorisation des
attributs
●
Nettoyage
●
CSS embarqué
●
Chemins
●
Courbes droites
●
Réduction de la
précision
GZip HTTP vs SVGZ
●
Les fichiers XML ont de très bons taux de
compression
●
Activer la compression GZip du serveur web
●
Les fichiers SVG seront compressés à la volée
●
Les navigateurs ne supportant pas GZip recevront la
version non compressée (protocole HTTP)
●
Compresser le SVG en SVGZ
●
Nécessite la modification du .htaccess :
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
●
Futur : EXI (Efficient XML Interchange) ?
Bonus
Bonus
Lissage sous-pixel
Un rendu SVG écran a une meilleure
qualité que son équivalent matriciel
Bonus
FireBug, Developper’s tools…
Le SVG est visible dans l’outil de
parcours du DOM
Bonus
Le SVG utilise XML
Il est donc très facile de le générer par
un programme
Bonus
Les navigateurs sont plus stricts
sur la validité du code XML du SVG
que sur celle du HTML
Conclusion
Conclusion
Qu’attendez-vous pour utiliser SVG ?
Quelques liens − 1/2
●
Scalable Vector Graphics 1.1 (Second Edition)
●
http://www.w3.org/TR/SVG/
●
Minimizing SVG file sizes
●
http://www.w3.org/TR/SVG/minimize.html
●
Pages Wikipédia sur le SVG
●
http://fr.wikipedia.org/wiki/Svg
●
http://en.wikipedia.org/wiki/Svg
●
Add interactivity to your SVG
●
http://www.ibm.com/developerworks/library/x-svgint/
●
Testing CSS in SVG in HTML
●
http://jeremie.patonnier.net/experiences/svg/media-queries/test.html
●
Scour, an SVG scrubber
●
http://www.codedread.com/scour/
Quelques liens − 2/2
●
20 SVG uses that will make your jaw drop
●
http://www.netmagazine.com/features/20-svg-uses-will-make-your-jaw-
drop
●
Scalable Vector Graphics, the powerful XML graphics for the web
●
http://www.itk.ilstu.edu/faculty/javila/SVG/
●
Articles sur le SVG de dev.opera.com
●
http://dev.opera.com/articles/tags/svg
●
How to configure Apache to server SVG/SVGZ the right way
●
http://kaioa.com/node/45
●
Inkscape, draw freely
●
http://inkscape.org/
●
Page info chantiers sur rouen.fr
●
http://www.rouen.fr/infochantiers

Contenu connexe

En vedette

Dirección Pyme
Dirección PymeDirección Pyme
Dirección Pyme
CenproexFormacion
 
Le contrôle de notre vie privée sur internet
Le contrôle de notre vie privée sur internetLe contrôle de notre vie privée sur internet
Le contrôle de notre vie privée sur internet
alcomind
 
SORCIERS ET PSYCHANALYSE
SORCIERS ET PSYCHANALYSESORCIERS ET PSYCHANALYSE
SORCIERS ET PSYCHANALYSE
Daniel Dufourt
 
2012 Modelo eficiente de gestion participativo. Bizitegi
2012 Modelo eficiente de gestion participativo. Bizitegi2012 Modelo eficiente de gestion participativo. Bizitegi
2012 Modelo eficiente de gestion participativo. Bizitegi
Bizitegi Bizitegi
 
Cette petite lumière - This Little Light of Mine
Cette petite lumière - This Little Light of MineCette petite lumière - This Little Light of Mine
Cette petite lumière - This Little Light of Mine
Freekidstories
 
[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...
[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...
[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...
Groupe D.FI
 
Les dix commandement pour ne pas tomber dans
Les dix commandement pour ne pas tomber dansLes dix commandement pour ne pas tomber dans
Les dix commandement pour ne pas tomber dans
pablomontesino
 
Opac raby docrestit1204_v1
Opac raby docrestit1204_v1Opac raby docrestit1204_v1
Opac raby docrestit1204_v1
denisber
 
6ème les prix séquence n°4
6ème les prix séquence n°46ème les prix séquence n°4
6ème les prix séquence n°4
javaudinb
 
62800 photos magnifiques
62800 photos magnifiques62800 photos magnifiques
62800 photos magnifiques
Dominique Pongi
 
Aism Global Presentation Jan 2012 Fr
Aism Global Presentation Jan 2012 FrAism Global Presentation Jan 2012 Fr
Aism Global Presentation Jan 2012 Fr
novecolli
 
Gérer sa e-réputation - 21 mai 2013 - Bénéjacq
Gérer sa e-réputation - 21 mai 2013 - BénéjacqGérer sa e-réputation - 21 mai 2013 - Bénéjacq
Gérer sa e-réputation - 21 mai 2013 - Bénéjacq
Tourisme 64
 
Démo - Marché Cible (chiffres fictifs)
Démo - Marché Cible (chiffres fictifs)Démo - Marché Cible (chiffres fictifs)
Démo - Marché Cible (chiffres fictifs)
Hospitality ON think tank
 
2009 Ciudadanía. Bizitegi
2009 Ciudadanía. Bizitegi2009 Ciudadanía. Bizitegi
2009 Ciudadanía. Bizitegi
Bizitegi Bizitegi
 
Powerpoint sofás estrella
Powerpoint sofás estrellaPowerpoint sofás estrella
Powerpoint sofás estrella
Casiopeaestelar7
 
120 ans violon
120 ans violon120 ans violon
120 ans violon
steckmetal
 
De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...
De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...
De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...
Caféine.Studio
 
Conjuguaisons en francais avec le. .passe simple (adr slt)
Conjuguaisons en francais avec le. .passe simple (adr slt)Conjuguaisons en francais avec le. .passe simple (adr slt)
Conjuguaisons en francais avec le. .passe simple (adr slt)
Dominique Pongi
 

En vedette (20)

Dirección Pyme
Dirección PymeDirección Pyme
Dirección Pyme
 
Le contrôle de notre vie privée sur internet
Le contrôle de notre vie privée sur internetLe contrôle de notre vie privée sur internet
Le contrôle de notre vie privée sur internet
 
SORCIERS ET PSYCHANALYSE
SORCIERS ET PSYCHANALYSESORCIERS ET PSYCHANALYSE
SORCIERS ET PSYCHANALYSE
 
Bone yard31
Bone yard31Bone yard31
Bone yard31
 
2012 Modelo eficiente de gestion participativo. Bizitegi
2012 Modelo eficiente de gestion participativo. Bizitegi2012 Modelo eficiente de gestion participativo. Bizitegi
2012 Modelo eficiente de gestion participativo. Bizitegi
 
Cette petite lumière - This Little Light of Mine
Cette petite lumière - This Little Light of MineCette petite lumière - This Little Light of Mine
Cette petite lumière - This Little Light of Mine
 
[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...
[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...
[Paroles de DSI] NetApp - Comment conjuguer croissance et gestion de données ...
 
Les dix commandement pour ne pas tomber dans
Les dix commandement pour ne pas tomber dansLes dix commandement pour ne pas tomber dans
Les dix commandement pour ne pas tomber dans
 
Opac raby docrestit1204_v1
Opac raby docrestit1204_v1Opac raby docrestit1204_v1
Opac raby docrestit1204_v1
 
6ème les prix séquence n°4
6ème les prix séquence n°46ème les prix séquence n°4
6ème les prix séquence n°4
 
62800 photos magnifiques
62800 photos magnifiques62800 photos magnifiques
62800 photos magnifiques
 
Who mps 07.05_fre
Who mps 07.05_freWho mps 07.05_fre
Who mps 07.05_fre
 
Aism Global Presentation Jan 2012 Fr
Aism Global Presentation Jan 2012 FrAism Global Presentation Jan 2012 Fr
Aism Global Presentation Jan 2012 Fr
 
Gérer sa e-réputation - 21 mai 2013 - Bénéjacq
Gérer sa e-réputation - 21 mai 2013 - BénéjacqGérer sa e-réputation - 21 mai 2013 - Bénéjacq
Gérer sa e-réputation - 21 mai 2013 - Bénéjacq
 
Démo - Marché Cible (chiffres fictifs)
Démo - Marché Cible (chiffres fictifs)Démo - Marché Cible (chiffres fictifs)
Démo - Marché Cible (chiffres fictifs)
 
2009 Ciudadanía. Bizitegi
2009 Ciudadanía. Bizitegi2009 Ciudadanía. Bizitegi
2009 Ciudadanía. Bizitegi
 
Powerpoint sofás estrella
Powerpoint sofás estrellaPowerpoint sofás estrella
Powerpoint sofás estrella
 
120 ans violon
120 ans violon120 ans violon
120 ans violon
 
De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...
De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...
De l’utilité, utilisabilité et acceptabilité d’une technologie “top down” a l...
 
Conjuguaisons en francais avec le. .passe simple (adr slt)
Conjuguaisons en francais avec le. .passe simple (adr slt)Conjuguaisons en francais avec le. .passe simple (adr slt)
Conjuguaisons en francais avec le. .passe simple (adr slt)
 

Similaire à #nwxtech6 Frédéric Bisson - SVG pour le web

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
pefringant
 
Conception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du webConception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du web
SOAT
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
Christophe Villeneuve
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
Solution Linux 2009 - SVG
Solution Linux 2009 - SVGSolution Linux 2009 - SVG
Solution Linux 2009 - SVG
Raphaël Semeteys
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
Horacio Gonzalez
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
Corinne Schillinger
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
Jonathan Levaillant
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
ATL et SVG
ATL et SVGATL et SVG
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
Christian SUMBANG
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
Frédéric Harper
 

Similaire à #nwxtech6 Frédéric Bisson - SVG pour le web (20)

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
Conception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du webConception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du web
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Solution Linux 2009 - SVG
Solution Linux 2009 - SVGSolution Linux 2009 - SVG
Solution Linux 2009 - SVG
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
ATL et SVG
ATL et SVGATL et SVG
ATL et SVG
 
Responsive design, Canvas et SVG
Responsive design, Canvas et SVGResponsive design, Canvas et SVG
Responsive design, Canvas et SVG
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 

Plus de Normandie Web Xperts

#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
Normandie Web Xperts
 
#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline
Normandie Web Xperts
 
#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP
Normandie Web Xperts
 
#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form
Normandie Web Xperts
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
Normandie Web Xperts
 
FlexRox
FlexRoxFlexRox
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdJulien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Normandie Web Xperts
 
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Normandie Web Xperts
 
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Normandie Web Xperts
 
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIIConférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Normandie Web Xperts
 
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Normandie Web Xperts
 
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousConférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Normandie Web Xperts
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Normandie Web Xperts
 
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Normandie Web Xperts
 
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierConférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Normandie Web Xperts
 
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonConférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Normandie Web Xperts
 
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Normandie Web Xperts
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Normandie Web Xperts
 
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetConférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Normandie Web Xperts
 
Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...
Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...
Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...
Normandie Web Xperts
 

Plus de Normandie Web Xperts (20)

#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
 
#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline
 
#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP
 
#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
 
FlexRox
FlexRoxFlexRox
FlexRox
 
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdJulien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
 
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
 
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
 
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIIConférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
 
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
 
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousConférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
 
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
 
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierConférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
 
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonConférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
 
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
 
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetConférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
 
Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...
Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...
Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjam...
 

#nwxtech6 Frédéric Bisson - SVG pour le web

  • 1. pour le web Frédéric Bisson – Ville de Rouen 08.05.2013
  • 2. Sommaire ● Qu’est-ce que le SVG ? ● SVG et navigateurs web ● Optimisation du SVG pour le web ● Bonus ● Conclusion ● Quelques liens
  • 3. Qu’est-ce que le SVG ? ● Le format ● Historique du SVG ● SVG vs JPEG/PNG ● Les logiciels
  • 4. Le format − Définition Le SVG, ou Scalable Vector Graphics, est un format de données conçu pour décrire des ensembles de graphiques vectoriels, basé sur XML et spécifié par le W3C Wikipédia
  • 5. Le format – Du code XML <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="320" height="240"> <rect x="10" y="10" width="300" height="220" stroke="black" fill="none" /> <text x="70" y="130" font-family="Ubuntu" font-size="36"> NWXTech6 </text> </svg>
  • 6. Le format − Fonctionnalités ● Chemins ● Formes basiques ● Texte ● Remplissage ● Dégradés et motifs ● Masque et découpe ● Filtres ● Interactivité ● Hyperliens ● Script ● Animation ● Fontes ● Métadonnées ● Images matricielles
  • 7. Historique du SVG ● 1998 lancement du groupe de travail SVG ● 2001 SVG 1.0 ● 2003 SVG 1.1 (profils) ● 2008 SVG Tiny 1.2 ● 2010 indexation du SVG par Google ● 2011 SVG 1.1 second edition ● 2014 SVG 2.0
  • 8. Historique du SVG − Support
  • 9. SVG vs JPEG/PNG ● Redimensionnable à l’envie ● Modifiable dynamiquement ● Indexable ● ~Accessible ● Poids=nombre d’éléments ● Peu consommateur de ressources CPU ● Support universel (lecture/écriture) ● Poids=résolution
  • 10. Les logiciels ● Adobe Illustrator ● Adobe Fireworks ● Xara Xtreme ● CorelDRAW ● Inkscape ● Navigateurs web ● LibreOffice ● Scribus ● The Gimp ● Blender ● Gnome
  • 11. SVG et navigateurs web ● Le profil Basic ● Intégration ● Hyperliens ● CSS embarqué ● SVG responsif ● JavaScript ● SVG paramétré
  • 12. Le profil Basic ● SVG 1.1 ajoute la notion de profil à SVG 1.0 ● 3 profils sont définis : ● Tiny ● Basic ● Full ● Les navigateurs supportent le profil Basic certaines fonctionnalités du profil Full
  • 13. Le profil Basic − Fonctionnalités ● Hyperliens ● Ressources externes ● Texte sur un chemin ● Profil de couleurs ● Dégradé simple ● Événements ● Filtres classiques ● Animations ● Masque ● Découpe ● Motifs
  • 14. Intégration ● Il y a 3 manières d’utiliser un fichier SVG : ● la balise <object>, ● la balise <img>, ● la propriété background-image du CSS. ● La balise <object> est la seule permettant : ● l’interactivité, ● les hyperliens, ● les scripts, ● la dégradation gracieuse.
  • 15. Hyperliens − Principe ● À l’instar d’HTML, SVG dispose de la balise <a> ● Elle s’adapte à la forme de l’élément ! ● L’attribut target doit être positionné à _top <a href="http://www.example.com/" target="_top" xlink:title="Exemple de lien"> <g> <rect x="10" y="10" width="20" height="20" stroke="#4d5555" fill="#feeddd"/> <rect x="30" y="30" width="20" height="20" stroke="#000" fill="none"/> <text x="100" y="50">NWXTech6</text> </g> </a>
  • 16. Hyperliens − Zone active Zone de lien active
  • 17. CSS embarqué ● Balise <style>, comme en HTML ● Propriétés spécifiques et adaptées au SVG <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> <style> #test { fill: red; stroke-width: 10%; stroke: blue; cursor: crosshair; } </style> <circle id="test" cx="50" cy="50" r="40" /> </svg>
  • 18. SVG responsif − ViewBox ● Astuce de l’attribut viewBox ● Adaptation de l’image à son conteneur ● Attribut non géré par les logiciels d’édition <svg width="200px" height="100px"> <svg viewBox="0 0 200 100">
  • 19. SVG responsif − Utilisation ● Côté HTML, la même astuce que pour <img> <object data="test.svg" style="width: 100%; height: auto" type="image/svg+xml"> ... </object>
  • 20. SVG responsif − CSS Media Queries ● CSS Media Queries ● Adaptation de l’image à son conteneur ● Non géré par les logiciels d’édition <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> <style> circle { display: inherit; } rect { display: none; } @media all and (max-aspect-ratio: 1/1) { circle { display: none; } rect { display: inherit; } } </style> <circle cx="50" cy="50" r="40" fill="red" /> <rect x="10" y="10" fill="blue" width="80" height="80" /> </svg>
  • 21. JavaScript ● JavaScript permet d’ajouter de l’interactivité ● SVG dispose d’un DOM manipulable exactement comme le HTML <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" onload="init(evt)"> <circle id="test" onclick="clic(evt)" cx="50" cy="50" r="40" fill="blue"/> <script> function init(evt) { elt = evt.target.ownerDocument.getElementById("test"); elt.setAttribute("fill", "red"); } function clic(evt) { evt.target.setAttribute("fill", "yellow"); } </script> </svg>
  • 22. SVG paramétré − Principe ● Le SVG peut accéder au DOM du document HTML le contenant ● Il peut ainsi récupérer les balises <param> de la balise <object> le contenant <svg onload="init(evt)"> <script> function init(evt) { var doc = evt.target.ownerDocument; var params = doc.defaultView.frameElement.getElementsByTagName("param"); for(var i = 0; i > params.length; i++) { name = params[i].getAttribute('name' ); value = params[i].getAttribute('value'); ... } } </script> </svg> Récupération du document SVG Récupération de la balise <object> Récupération des balises <param> Analyse et traitement des paramètres Exécute le JavaScript une fois le SVG chargé
  • 23. SVG paramétré − Exemple <object type="image/svg+xml" data="carteinfochantiers.svg"> <param name="nombre-co" value="4" /> <param name="nombre-p" value="9" /> <param name="nombre-vmc" value="27"/> <param name="nombre-gj" value="7" /> <param name="nombre-clls" value="3" /> <param name="nombre-gm" value="2" /> <param name="nombre-gvssh" value="2" /> <param name="nombre-cvrg" value="24"/> <param name="nombre-scjdp" value="16"/> <param name="nombre-g" value="5" /> <param name="nombre-smcdpsn" value="11"/> <param name="nombre-mg" value="4" /> </object>
  • 24. Optimisation du SVG pour le web ● Quoi optimiser ? ● GZip HTTP vs SVGZ ● Scour
  • 25. Optimisation Les fichiers SVG générés depuis un logiciel d’édition sont lourds et peu optimisés
  • 26. Quoi optimiser ? − Le formatage ● Suppression de l’indentation ● Suppression des retours à la ligne <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="1000" height="1000" viewBox="0 0 3 2" id="svg2" sodipodi:version="0.32" inkscape:version="0.46" sodipodi:docname="21 ans wikipédia.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape" sodipodi:docbase="D:Documents and SettingsFlorianBureau">
  • 27. Quoi optimiser ? − Le spécifique ● Suppression des balises et attributs spécifiques au logiciel d’édition <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="1000" height="1000" viewBox="0 0 3 2" id="svg2" sodipodi:version="0.32" inkscape:version="0.46" sodipodi:docname="21 ans wikipédia.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape" sodipodi:docbase="D:Documents and SettingsFlorianBureau">
  • 28. Quoi optimiser ? − Les identifiants ● Suppression des attributs id non utilisés ● Inkscape crée un id pour chaque balise <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="1000" height="1000" viewBox="0 0 3 2" id="svg2" sodipodi:version="0.32" inkscape:version="0.46" sodipodi:docname="21 ans wikipédia.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape" sodipodi:docbase="D:Documents and SettingsFlorianBureau">
  • 29. Quoi optimiser ? − La précision ● La précision des logiciels est superflue pour le web ● Les chemins sont très consommateurs de chiffres <linearGradient y2="29.848793" x2="35.462624" y1="11.839182" x1="35.686672" gradientTransform="matrix(0.9285552,0,0,0.8997031,-13.681016,-51.311905)" gradientUnits="userSpaceOnUse" id="linearGradient2289" xlink:href="#linearGradient33382" inkscape:collect="always" />
  • 30. Quoi optimiser ? − Factorisation ● La balise <g> propage ses attributs <rect height="129" width="10" y="357" x="724" fill="#FF0"/> <rect height="158" width="10" y="365" x="355" fill="#FF0"/> <rect height="994" width="77" y="607" x="184" fill="#FF0"/> <rect height="884" width="13" y="636" x="409" fill="#FF0"/> <rect height="884" width="39" y="458" x="605" fill="#FF0"/> <rect height="107" width="84" y="233" x="407" fill="#FF0"/> <rect height="761" width="68" y="299" x="202" fill="#FF0"/> <g fill="#FF0"> <rect height="129" width="10" y="357" x="724"/> <rect height="158" width="10" y="365" x="355"/> <rect height="994" width="77" y="607" x="184"/> <rect height="884" width="13" y="636" x="409"/> <rect height="884" width="39" y="458" x="605"/> <rect height="107" width="84" y="233" x="407"/> <rect height="761" width="68" y="299" x="202"/> </g>
  • 31. Quoi optimiser ? − Métadonnées ● Suppression des métadonnées inutiles <metadata id="metadata13"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> </cc:Work> </rdf:RDF> </metadata>
  • 32. Quoi optimiser ? − Simplification ● Les fichiers SVG générés peuvent présenter un grand nombre de points pour décrire une figure ● plans tracés à la main ● retouches ● Réduire le nombre de points accélère le rendu et diminue le poids du fichier De 21 à 11 points
  • 33. Quoi optimiser ? − Illustrator ● Le code SVG généré par Illustrator pour un texte selon un chemin n’est pas optimal ! ● Sous MacOSX, Illustrator utilise ArialMT et non Arial lorsqu’on utilise cette dernière
  • 34. Quoi optimiser ? − Fontes ● Utiliser une police courante (Arial etc.) est une bonne pratique ● La police est reconnue partout et les navigateurs savent comment la remplacer ● Il n’y a pas à l’incorporer dans le SVG, c’est donc un poids en moins A
  • 35. Quoi optimiser ? − Autre ● Le SVG généré par un logiciel d’édition pose les mêmes problèmes que le HTML généré par un CMS ● D’autres optimisations sont possibles en étudiant le contenu lui-même
  • 36. Scour − Présentation ● Programme nettoyant et optimisant les fichiers SVG générés par des logiciels tels que Inkscape ou Illustrator ● Disponible en : ● Ligne de commande ● Greffon pour Inkscape
  • 37. Scour − Traitement ● Suppression ● Balises vides ● Identifiants ● Définitions inutilisées ● Balises spécifiques ● Factorisation des attributs ● Nettoyage ● CSS embarqué ● Chemins ● Courbes droites ● Réduction de la précision
  • 38. GZip HTTP vs SVGZ ● Les fichiers XML ont de très bons taux de compression ● Activer la compression GZip du serveur web ● Les fichiers SVG seront compressés à la volée ● Les navigateurs ne supportant pas GZip recevront la version non compressée (protocole HTTP) ● Compresser le SVG en SVGZ ● Nécessite la modification du .htaccess : AddType image/svg+xml svg svgz AddEncoding gzip svgz ● Futur : EXI (Efficient XML Interchange) ?
  • 39. Bonus
  • 40. Bonus Lissage sous-pixel Un rendu SVG écran a une meilleure qualité que son équivalent matriciel
  • 41. Bonus FireBug, Developper’s tools… Le SVG est visible dans l’outil de parcours du DOM
  • 42. Bonus Le SVG utilise XML Il est donc très facile de le générer par un programme
  • 43. Bonus Les navigateurs sont plus stricts sur la validité du code XML du SVG que sur celle du HTML
  • 46. Quelques liens − 1/2 ● Scalable Vector Graphics 1.1 (Second Edition) ● http://www.w3.org/TR/SVG/ ● Minimizing SVG file sizes ● http://www.w3.org/TR/SVG/minimize.html ● Pages Wikipédia sur le SVG ● http://fr.wikipedia.org/wiki/Svg ● http://en.wikipedia.org/wiki/Svg ● Add interactivity to your SVG ● http://www.ibm.com/developerworks/library/x-svgint/ ● Testing CSS in SVG in HTML ● http://jeremie.patonnier.net/experiences/svg/media-queries/test.html ● Scour, an SVG scrubber ● http://www.codedread.com/scour/
  • 47. Quelques liens − 2/2 ● 20 SVG uses that will make your jaw drop ● http://www.netmagazine.com/features/20-svg-uses-will-make-your-jaw- drop ● Scalable Vector Graphics, the powerful XML graphics for the web ● http://www.itk.ilstu.edu/faculty/javila/SVG/ ● Articles sur le SVG de dev.opera.com ● http://dev.opera.com/articles/tags/svg ● How to configure Apache to server SVG/SVGZ the right way ● http://kaioa.com/node/45 ● Inkscape, draw freely ● http://inkscape.org/ ● Page info chantiers sur rouen.fr ● http://www.rouen.fr/infochantiers