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

Intégration html5 : En résumé

Inclusion avec la balise img

Inclusion avec <object>

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

Inclusion du SVG inline

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é.

Le modèle doc Les SVG est géré en tant que document , n’affichera que la vignette du MIMETYPE svg
si on utilisera donc utilise 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

<BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>
<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
<object data='#URL_DOCUMENT' 
	type='#MIME_TYPE'[
	width='(#ENV{largeur}?{'', #LARGEUR})'][
	height='(#ENV{hauteur}?{'', #HAUTEUR})'] data="#URL_DOCUMENT">
	&#91;(#REM)&lt;!-- Fallback à  implémenter ,  mais  comment  sans  faire  deux  boucles  ^^   -->]
</object>[
<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
][
<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
]</div>
</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.

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