Dans mon #plugin #SPIP Insertion avancée d’images :
▻https://plugins.spip.net/medias_responsive_mod.html
il y a une fonction que j’utilise beaucoup : include_svg.
Elle permet d’inclure directement dans le HTML le code tiré d’un fichier SVG.
C’est-à-dire que l’image SVG n’est plus chargée comme une image - à la manière d’une image JPEG, mais directement intégrée à l’intérieur du HTML. Il y a deux intérêts :
– le chargement de l’image SVG se fait en même temps que la page HTML, donc sans attendre ; c’est intéressant pour les « petits » fichiers SVG, typiquement des éléments de l’interface, qui s’affichent ainsi instantanément dans la page ;
– c’est indispensable si on veut modifier les couleurs des éléments SVG directement dans les CSS de la page. (Je le fais beaucoup, par exemple un bouton inverse ses couleurs au survol.)
L’originalité par rapport à d’autres fonctions équivalentes que j’ai vu passer, c’est que l’insertion est ici responsive (elle occupe 100% de la largeur disponible), il faut donc soi-même indiquer les éventuelles dimensions d’affichage désirées. Pour que cela fonctionne, la fonction est capable d’extraire les valeurs de la viewBox du fichier SVG et de fabriquer un <span> englobant qui rend l’affichage responsive.
Ça s’utilise ainsi :
[(#CHEMIN{hamburger.svg}|include_svg)]Dans la version 1.34 que je viens d’installer, la fonction gère une variable $alt :
[(#CHEMIN{hamburger.svg}|include_svg{Menu})]Si on ne renseigne pas ce texte, alors le <svg> est passé en role='presentation' et alt=''. Dans l’exemple ci-dessus, le bouton qui déclenche le hamburger contient déjà la mention « MENU » à côté du hamburger, il n’est donc pas intéressant d’afficher « MENU MENU ».
Si on renseigne ce texte, alors le <svg> est passé avec role='img' et la valeur alt=… est renseignée. Dans l’exemple ci-dessus, la mention « MENU » est donc directement associée à l’image du hamburger.
(Note : cette fonction était aussi présente de mon plugin Maquettes multiples. Je viens de l’en supprimer (parce que “Maquette multiples” fonctionne, idéalement, avec “Insertion avancée d’images”.)
