Carnet Wiki

Version 16 — il y a 1 semaine — Kangourou

Utilisation du format SVG 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 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

  1. UPDATE `ma_base`.`spip_types_documents` SET `inclus` = 'image' WHERE `spip_types_documents`.`extension` = '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

  1. [(#EXTENSION|match{svg}|oui)
  2.   <a href="#URL_DOCUMENT" class="cboxElement hasbox" title="#EXTENSION - #TAILLE">
  3.    <img src="#FICHIER" width="150" height="150" class="spip_logo spip_logos">
  4.   </a>
  5. ]
  6. [(#EXTENSION|match{svg}|non)
  7.   [(#LOGO_DOCUMENT{#URL_DOCUMENT}|image_reduire{150,150})]
  8. ]      

Télécharger

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

  1. [(#REM)<!-- Modele d'inclusion du format svg
  2.  
  3.  
  4. -->]
  5. [(#REM)<!-- Modele d'inclusion du format svg
  6.  
  7.  
  8. Différentes façons d'intégrer des graphiques SVG dans une page html :
  9.  
  10.  
  11. * https://css-tricks.com/using-svg/
  12. * http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html#Web-Use-Inline
  13. * https://developer.mozilla.org/fr/docs/Web/HTML/Element/object
  14. * https://www.w3.org/TR/html5/embedded-content-0.html#the-object-element
  15. * Article source du markup : https://www.smashingmagazine.com/2013/06/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/
  16.  
  17.  
  18. @param largeur {valeur en px} - largeur desiree
  19. @param hauteur {valeur en px} - hauteur
  20. @param align {center|left|right} - alignement
  21. @param role {application, document or img or presentation} - role aria
  22.  
  23.  
  24. -->]
  25. <BOUCLE_tous (DOCUMENTS types_documents){id_document=#ID}{tout}>
  26. <div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
  27. style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
  28. <object tabindex="0" data='#URL_DOCUMENT'
  29.         type='#MIME_TYPE'[
  30.         width='(#ENV{largeur}|sinon{#LARGEUR})'][
  31.         height='(#ENV{hauteur}|sinon{#HAUTEUR})']
  32.         data="#URL_DOCUMENT"
  33.         role="[(#ENV{role,img})]"[
  34.         aria-label="(#TITRE)[: (#DESCRIPTION)]"]
  35. >
  36.         [(#REM)<!-- Fallback : dans le cas des svg pourquoi ne pas utiliser la vignette en fallback -->]
  37.         <!--[if lte IE 8]>
  38.         [(#LOGO_DOCUMENT|inserer_attribut{width,#LARGEUR}
  39.                                         |inserer_attribut{height,#HAUTEUR}
  40.                                         |inserer_attribut{alt,#TITRE})]
  41.         <![endif]-->
  42. </object>[
  43. <div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
  44. ][
  45. <div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
  46. ][
  47. <div class="spip_doc_credits">(#CREDITS)</div>
  48. ]
  49. </div>
  50. </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.
r104881 permet d’utiliser upload_html5 avec du svg

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

  1. <!-- Le filtre embarque_fichier :encodage en base64
  2.                 http://www.spip.net/fr_article5538.html
  3.  
  4.  
  5. http://caniuse.com/#feat=datauri
  6. -->
  7.          [(#FICHIER|embarque_fichier)]
  8.  
  9.  
  10. <!-- Mais le base64 n'est pas forcément la meilleur solution pour le format svg comme l'explique cet article
  11. https://css-tricks.com/probably-dont-base64-svg/
  12.  
  13.  
  14. Les datauri non-encodees en base64 doivent êtres urlencode pour etres interpretes par … Internet Explorer
  15. http://caniuse.com/#feat=datauri
  16.  -->
  17.          [data:image/svg+xml;utf8,(#FICHIER|file_get_contents|urlencode)]

Télécharger

Intégrer le svg en inline

  1. [(#FICHIER|file_get_contents)]

On peut aussi inclure le source du SVG avec la balise spip

  1. #INCLURE/code>,
  2.  
  3.  
  4. <code class='spip'>
  5. #INCLURE{#CHEMIN{mes_dessins/uneimagesvg}}

Télécharger

Dans ces 2 derniers cas, avec file_get_content et #INCLURE une balise <svg> est insérée dans le code HTML, et il est possible d’agir sur son rendu au moyen des CSS.
En particulier, le style suivant associe automatiquement la couleur de texte courante aux tracés du svg lorsque leur attribut fill est vierge :

  1. svg, rect {fill: currentcolor}

Si nécessaire, il faut ensuite affiner pour couvrir toutes les balises décrivant vos svg.


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


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

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

Télécharger


Intégration html5 : En résumé

Inclusion avec la balise img

Trad/extrait de CssTricks

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

  1. .logo_site {
  2.   display: block;
  3.   text-indent: -9999px;
  4.   width: 100px;
  5.   height: 82px;
  6.   background: url(logo.png); // Fallback
  7.   background-image: url(logo.svg), none;
  8. }

Télécharger

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>

  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>

Problème fréquent liés au format svg

Redimensionnement d’un graphique svg :
https://css-tricks.com/scale-svg/