Carnet Wiki

Version 3 — 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

----

Intégration html5 : En résumé

Inclusion avec la balise img

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>

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

  1. <BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>
  2. <div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
  3. style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
  4. <object data='#URL_DOCUMENT'
  5.         type='#MIME_TYPE'[
  6.         width='(#ENV{largeur}?{'', #LARGEUR})'][
  7.         height='(#ENV{hauteur}?{'', #HAUTEUR})'] data="#URL_DOCUMENT">
  8.         [(#REM)<!-- Fallback  -->]
  9. </object>[
  10. <div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
  11. ][
  12. <div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
  13. ]</div>
  14. </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.