Version 15 — Août 2017 — 78.125.xx.xx
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 dans la preview du porteplume si ils sont inclus avec une balise object et ne peuvent pas être ajoutés au portfolio étant considérés comme inclus=embed dans la table de description des documents.
L’affichage en partie publique du site est correctement géré, Mais sans gestion avec la balise #LOGO_DOCUMENT : elle retournera toujours la vignette du MimeType, principalement due a l’utilisation de GD qui ne retournera rien sur le format svg n’étant pas pris en charge.
Les boites d’affichage de previsualisation des images de la médiathèque utilisant la balise #LOGO_DOCUMENT produiront le même résultat, pour que le svg soit correctement prévisualisé, il faut donc surcharger au minima quelque squelettes du plugin Medias.
Ajouter la gestion des scg dans le portfolio :
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 si on utilise le tag image, les balises object étant filtrés de la prévisualisation.
Surchargé quelques modèles de la médiathèque :
- modeles/document_casehtml|php
- document_desc.html
En remplaçant la balise #LOGO_DOCUMENT par exemple par
[(#EXTENSION|match{svg}|oui)
<a href="#URL_DOCUMENT" class="cboxElement hasbox" title="#EXTENSION - #TAILLE">
<img src="#FICHIER" width="150" height="150" class="spip_logo spip_logos">
</a>
]
[(#EXTENSION|match{svg}|non)
[(#LOGO_DOCUMENT{#URL_DOCUMENT}|image_reduire{150,150})]
] 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>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.
[r104881->https://zone.spip . org/trac/spip-zone/changeset/104881] permet d’utiliser upload_html5 avec du svg
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)]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 ou pouvoir générer les images de fallback au format png.
Php-Svg :
Lib autonome, permettant de créer, editer, transformer du svg avec php :
https://github.com/JangoBrick/php-svg
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
https://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Spec_structure
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, animations
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>img<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
.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
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
<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>Redimensionnement d’un graphique svg :
https://css-tricks.com/scale-svg/