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

Les documents

Les SVG est géré en tant que document, si on 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">
	[(#REM)<!-- Fallback  -->]
</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.