Carnet Wiki

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

Liste de liens et ressources sur le svg : https://css-tricks.com/mega-list-svg-information/

Libs de conversion

Optimiser 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

Attention a nettoyer les svg générés par illustrator, il comprennent un doctype et des commentaires, pour les utiliser en inline ou en DATAuri le doctype peut poser problème.

Editeurs

Editeur de svg Application multiplateforme + En ligne
https://vectr.com/

Outil en ligne
https://petercollingridge.appspot.com/svg-editor

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

Optimisation CLI

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

Applescripts :

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


Le format SVG

https://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Spec_structure

Spec : mobile SVG profiles

Pourquoi utiliser le format SVG

Extrait/Traduction de cssTricks

-  Poids de ficher réduit et compression
-  Utilisable a n’importe quelle taille sans perte de qualité, permettant donc une meilleur accessibilité a des personnes n’ayant pas une vue parfaite.
-  Excellent rendu sur les écrans haute densité
-  Accessoirement si on l’utilise en inline possibilité d’utiliser des filtres et interactions

Accessibilité

https://www.sitepoint.com/tips-accessible-svg/

Le format svg peut être beaucoup plus accessible quand il est utilisé via la méthode d’inclusion directe, c’est a dire excluant le tag <img> qui ne propose que l’attribut alt et la balise <object>

Pour décrire et rendre accessible le svg peut être décrit par un titre et une description qui seront donc parcourus par les lecteurs d’écran :

<svg version="1.1" width="300" height="200"
  aria-labelledby="title"
 aria-describedby="desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>

Intégration html5 : En résumé

Inclusion avec la balise img

Trad/extrait de CssTricks

<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

.logo_site {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(logo.png); // Fallback
  background-image: url(logo.svg), none;
}

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>

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

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 SVG est géré en tant que document a l’upload, cependant les fichiers svg intégrés aux articles ne sont pas prévisualisés < del>(rapport ( rapport au problème de sécurité cité précédemment)</del > précédemment ) dans la preview du porteplume. Pour ce faire il faire un UPDATE sur la table spip_type_documents et passer le svg en inclus=images

UPDATE <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+bWFfYmFzZTwvY29kZT4="></span>.<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+c3BpcF90eXBlc19kb2N1bWVudHM8L2NvZGU+"></span> SET <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+aW5jbHVzPC9jb2RlPg=="></span> = 'image' WHERE <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+c3BpcF90eXBlc19kb2N1bWVudHM8L2NvZGU+"></span>.<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+ZXh0ZW5zaW9uPC9jb2RlPg=="></span> = 'svg';

on peut ensuite ajouter au portfolio, et avoir un affichage prévisualisé avec le porteplume

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

Dans les articles/ champ éditoriaux des objets :

Les documents

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

[(#REM)<!-- Modele d'inclusion du format svg


-->]
[(#REM)<!-- Modele d'inclusion du format svg


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
* https://developer.mozilla.org/fr/docs/Web/HTML/Element/object
* https://www.w3.org/TR/html5/embedded-content-0.html#the-object-element
* Article source du markup : https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/


@param largeur {valeur en px} - largeur desiree
@param hauteur {valeur en px} - hauteur
@param align {center|left|right} - alignement
@param role {application, document or img or presentation} - role aria


-->]
<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 tabindex="0" data='#URL_DOCUMENT' 
	type='#MIME_TYPE'[
	width='(#ENV{largeur}|sinon{#LARGEUR})'][
	height='(#ENV{hauteur}|sinon{#HAUTEUR})']
	data="#URL_DOCUMENT"
	role="[(#ENV{role,img})]"[
	aria-label="(#TITRE)[: (#DESCRIPTION)]"]
>
	[(#REM)<!-- Fallback : dans le cas des svg pourquoi ne pas utiliser la vignette en fallback -->]
	<!--[if lte IE 8]>
	[(#LOGO_DOCUMENT|inserer_attribut{width,#LARGEUR}
					|inserer_attribut{height,#HAUTEUR}
					|inserer_attribut{alt,#TITRE})]
	<![endif]-->
</object>[
<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
][
<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
][
<div class="spip_doc_credits">(#CREDITS)</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.

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.

A vérifier mais de mon avis ^^ un passage par la pipeline formulaire_traiter pourrait contourner ce problème et être profitable ainsi a d’autres plugins

Dans les squelettes :

Utiliser les svg en Data URI

https://css-tricks.com/using-svg/#article-header-id-17
Comme expliqué précédemment, pas de gestion du cache au niveau serveur

<!-- Le filtre embarque_fichier :encodage en base64
		http://www.spip.net/fr_article5538.html


http://caniuse.com/#feat=datauri
-->
	 [(#FICHIER|embarque_fichier)]


<!-- Mais le base64 n'est pas forcément la meilleur solution pour le format svg comme l'explique cet article
https://css-tricks.com/probably-dont-base64-svg/


Les datauri non-encodees en base64 doivent êtres urlencode pour etres interpretes par … Internet Explorer
http://caniuse.com/#feat=datauri
 -->
	 [data:image/svg+xml;utf8,(#FICHIER|file_get_contents|urlencode)]

Intégrer le svg en inline

[(#FICHIER|file_get_contents)]