Carnet Wiki

Version 7 — Janvier 2017 Mist. GraphX

Sources & docs

Différentes façons d’intégrer des graphiques SVG dans une page html :

-  https://css-tricks.com/using-svg/
-  http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html#Web-Use-Inline
-  Video sur les différences d’intégration du format svg , avec avantages et désavantages

Libs de conversion

Principalement optimiser ou pouvoir générer les images de fallback au format png

Lib autonome :
https://github.com/JangoBrick/php-svg

Pour le moment seul Imagik semble gérer les fichiers SVG, pas de support par GD2.
Exemple de conversion et discussions :
http://stackoverflow.com/questions/4809194/convert-svg-image-to-png-with-php

Optimisation SVG

Article sur l’optimisation et surtout les potentiels problèmes que peuvent engendrer des fichiers SVG mal exportés ou mal conçus :
https://css-tricks.com/high-performance-svgs/

-  comme pour tout graphic illustrator/vectoriel : prêter une attention particulière aux nombre de points des courbes tracées.
http://astutegraphics.com/software/vectorscribe/ plugin illustrator avec un outil d’optimisation des points.

-  export en svgz, permet une compression gzip directement d’illustrator

App et nodes modules

SVGo : https://github.com/svg/svgo

Outils en ligne :

https://petercollingridge.appspot.com/svg-editor

https://jakearchibald.github.io/svgomg/

Applescripts :

https://github.com/svg/svgo-osx-folder-action


Le format SVG

Spec : mobile SVG profiles

Pourquoi utiliser le format SVG

Extrait/Traduction de cssTricks

<blockquote class="spip">


-  Poids de ficher réduit et compression
-  Utilisable a n’importe quelle taille sans perte de qualité
-  Excellent rendu sur les écrans haute densité
-  Accessoirement si on l’utilise en inline possibilité d’utiliser des filtres et interactions

</blockquote>

Intégration html5 : En résumé

Inclusion avec la balise img

Trad/extrait de CssTricks

  1. <img src="file.svg" alt="Texte alternatif">

Sans précision de taille le fichier est affiché à sa taille d’exportation, on peut ajuster simplement en ajoutant les paramètre width/height

Support navigateur :

http://caniuse.com/#feat=svg-img
Fonctionne partout sauf dans <=IE 8 et <=Android 2.3

Inconvénients

Pas d’interaction possible avec le contenu du fichier
-  Pas de possibilité d’utilisation de filtres
-  Pas de stylisation via css

Utilisation css et Background-image

Trad/extrait de CssTricks

  1. .logo_site {
  2.   display: block;
  3.   text-indent: -9999px;
  4.   width: 100px;
  5.   height: 82px;
  6.   background: url(logo.png); // Fallback
  7.   background-image: url(logo.svg), none;
  8. }

Télécharger

Support navigateur :

http://caniuse.com/#feat=svg-css
Fonctionne partout sauf dans <=IE 8 et <=Android 2.3

Inconvénients

Pas d’interaction possible avec le contenu du fichier
-  Pas de possibilité d’utilisation de filtres
-  Pas de stylisation via css

Inclusion du SVG inline

Trad/extraite de CssTricks

Le svg étant un format proche du xml, on peut tout à fait copier le contenu du fichier et coller dans le source html, il sera affiché comme avec la balise image. Ceci étant le fichier html devient vite très long et donc perd en clarté si on utilise un éditeur de texte.
Comme pour les DATAUri (méthode d’encodage des fichiers encodé en base64, permettant d’évité une requête http) on ne profitera pas de la mise en cache.

A noter qu’en utilisation avec spip/php on peut envisager d’utiliser file_get_content pour inclure dans le html le source/contenu du fichier svg.

Support navigateur :

http://caniuse.com/#feat=svg-html5
Fonctionne partout sauf dans <=IE 8 et <=Android 2.3

Inclusion avec <object>

  1. <object type="image/svg+xml" data="web_square.svg"> <!-- Chargement du svg -->
  2.       <img src="web_square.png" alt="Blue Square"/> <!-- Image de fallback pour les vielles bouses aka IE -->
  3.  </object>

Avec Spip

Spip Core : Les tickets en cours sur la prise en charge du format svg par spip

Le format SVG permettant d’inclure « potentiellement » des scripts js,
Cedric recommande de sanitizer les fichiers de ce type

Les documents

Les SVG est géré en tant que document a l’upload, cependant les fichiers intégrés aux articles ne sont pas prévisualisés (rapport au problème de sécurité cité précédemment) dans la preview du porteplume.

L’affichage en partie publique du site est correctement géré.

Dans les articles :

le Le modèle doc, n’affichera que la vignette du MIMETYPE svg
on utilisera donc le modèle <emb>.

On peut lui spécifier une taille en passant au modèle les paramètres hauteur/largeur

<emb1|center|largeur=200px|hauteur=200px>

On peut aussi personnaliser son modèle en créant un modele dédié au svg.

Créer le fichier emb_svg.html

[(#LOGO_DOCUMENT [(#VIGNETTE )] [ (#TITRE) ][ (#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)] ][ (#CREDITS) ] ">
  1. [(#REM)<!-- Modele d'inclusion du format svg
  2.  
  3.  
  4. -->]
  5. <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>
  6. <div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
  7. style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
  8. <object data='#URL_DOCUMENT'
  9.         type='#MIME_TYPE'[
  10.         width='(#ENV{largeur}?{'', #LARGEUR})'][
  11.         height='(#ENV{hauteur}?{'', #HAUTEUR})'] data="#URL_DOCUMENT">
  12.         [(#REM)<!-- Fallback : dans le cas des svg pourquoi ne pas utiliser la vignette en fallback -->]
  13.         &#91;(#LOGO_DOCUMENT &#91;(#VIGNETTE )]
  14. </object>[
  15. <div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
  16. ][
  17. <div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
  18. ][
  19. <div class="spip_doc_credits">(#CREDITS)</div>
  20. ]
  21. </div>
  22. </BOUCLE_tous>

Les Logos

Pour pouvoir utiliser des logos au format SVG, on doit actuellement installer le plugin logo-svg.
Disponible sur GitHub : https://github.com/cahri/spip-logo-svg.

Le fichier est inclus via la balise <img>

A noter que :
Le plugin surcharge le formulaire editer_logo, et ne sera pas compatible avec le plugin upload_html5.

Un passage par la pipeline formulaire_traiter pourrait contourner ce problème et être profitable ainsi a d’autres plugins

Dans les squelettes :

|embarque_fichier