Les images en ligne au format Standard Vector Graphics (Svg), commodes d'emploi, permettent une économie de bande passante. Prenons un exemple, avec l'image décrite comme suit (svg-0.html)...
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="title-logo desc-logo">
<title id="title-logo" class="svg-aria">Logotype</title>
<desc id="desc-logo" class="svg-aria">Ornement</desc>
<path fill="#ff0000" d="M12,1A3,3 0 0,1 15,4V5A1,1 0 0,1 16,6V7.07C18.39,8.45 20,11.04 20,14A8,8 0 0,1 12,22A8,8 0 0,1 4,14C4,11.04 5.61,8.45 8,7.07V6A1,1 0 0,1 9,5V4A3,3 0 0,1 12,1M12,3A1,1 0 0,0 11,4V5H13V4A1,1 0 0,0 12,3M12,8C10.22,8 8.63,8.77 7.53,10H16.47C15.37,8.77 13.78,8 12,8M12,20C13.78,20 15.37,19.23 16.47,18H7.53C8.63,19.23 10.22,20 12,20M12,12A2,2 0 0,0 10,14A2,2 0 0,0 12,16A2,2 0 0,0 14,14A2,2 0 0,0 12,12M18,14C18,13.31 17.88,12.65 17.67,12C16.72,12.19 16,13 16,14C16,15 16.72,15.81 17.67,15.97C17.88,15.35 18,14.69 18,14M6,14C6,14.69 6.12,15.35 6.33,15.97C7.28,15.81 8,15 8,14C8,13 7.28,12.19 6.33,12C6.12,12.65 6,13.31 6,14Z" />
</svg>
Le code de cette image pèse 948 octets. Au format Portable Graphic Networks (Png), le fichier équivalent pèse 413 octets pour une image de 24 pixels de côté, 2,60 kilo-octets pour une image de 128 pixels de côté, 5,48 kilo-octets pour une image de 256 pixels de côté...
Cependant, comme les navigateurs anciens n'affichent pas (en fait, ne dessinent pas !) les images au format Svg, il convient de prévoir une solution de repli.
Ici, nous distinguerons image essentielle et facultative. Une image essentielle pourra être un logotype, qui devra logiquement être affiché quel que soit le navigateur. Une image facultative pourra être, par exemple, l'icône d'un réseau social en vue de partager le contenu d'un clic de souris : dans ce cas, la description textuelle, avec un titre et une description, sera considérée comme suffisante, sans Fallback graphique.
Le titre s'affiche au survol de l'image. Quand le format Svg n'est pas supporté, la description s'affiche, au moins en principe (!), à l'écran.
La solution de repli la plus couramment utilisée repose sur la propriété <foreignObject>.
Ainsi obtenons-nous le code suivant (svg-1.html)...
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="title-logo desc-logo">
<title id="title-logo" class="svg-aria">Logotype</title>
<desc id="desc-logo" class="svg-aria">Ornement</desc>
<path fill="#ff0000" d="M12,1A3,3 0 0,1 15,4V5A1,1 0 0,1 16,6V7.07C18.39,8.45 20,11.04 20,14A8,8 0 0,1 12,22A8,8 0 0,1 4,14C4,11.04 5.61,8.45 8,7.07V6A1,1 0 0,1 9,5V4A3,3 0 0,1 12,1M12,3A1,1 0 0,0 11,4V5H13V4A1,1 0 0,0 12,3M12,8C10.22,8 8.63,8.77 7.53,10H16.47C15.37,8.77 13.78,8 12,8M12,20C13.78,20 15.37,19.23 16.47,18H7.53C8.63,19.23 10.22,20 12,20M12,12A2,2 0 0,0 10,14A2,2 0 0,0 12,16A2,2 0 0,0 14,14A2,2 0 0,0 12,12M18,14C18,13.31 17.88,12.65 17.67,12C16.72,12.19 16,13 16,14C16,15 16.72,15.81 17.67,15.97C17.88,15.35 18,14.69 18,14M6,14C6,14.69 6.12,15.35 6.33,15.97C7.28,15.81 8,15 8,14C8,13 7.28,12.19 6.33,12C6.12,12.65 6,13.31 6,14Z" />
<foreignObject>
<img src="ornament.png" class="" alt="Logotype" title="Logotype" />
</foreignObject>
</svg>
<foreignObject> présente deux inconvénients. D'abord, cette propriété ne semble pas correctement gérée par les navigateurs les plus anciens. (Nos tests ont néanmoins montré qu'Internet Explorer affichait correctement le contenu au moins à partir de la version 5.) Ensuite et surtout, cette technique oblige tous les navigateurs à charger deux images : celle au format Svg, d'une part, et, d'autre part, celle au format Png.
Voilà pourquoi, nous avons conçu une méthode alternative... Quand le navigateur ne soutient pas Svg, l'image par défaut est chargée. Quand JavaScript est désactivé (nous sommes parti du principe, critiquable, que Svg n'est pas supporté non plus dans ce cas), l'image par défaut est aussi disponible (svg-2.html)...
<!-- Code Svg -->
<div id="logo-fallback">
<noscript>
<img src="ornament.png" title="Logotype" alt="Logotype" />
</noscript>
</div>
<script>
function supportSvg() {
if (document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Shape', '1.0')) {
return true;
}
}
document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('no-js', 'js');
if (!supportSvg()) {
document.getElementsByTagName('html')[0].className += ' ';
document.getElementsByTagName('html')[0].className += 'no-support-svg';
document.getElementById('logo-fallback').innerHTML = '<img src="ornament.png" title="Logotype" alt="Logotype" />';
}
</script>
L'écriture est à peine plus contraignante !
Nos tests nous ont permis de conclure que l'image par défaut était appellée si et seulement si elle était nécessaire.
Le seul écueil est l'affichage de la description de l'image Svg originale : elle est superflue en raison du Fallback et peut compromettre le rendu du logotype. C'est pourquoi, dans ce cas, nous cachons le titre et la description avec la feuille de style.
Avec Svg, nous pouvons aussi afficher des icônes. Comme nous considérons ces images comme facultatives, aucun Fallback n'est requis (svg-3.html).
Enfin, avec un zeste de code Hypertext PreProcessor (Php), nous pouvons facilement colorier les images en passant un paramètre lors de l'appel du fichier Svg (icons.svg.php et svg.php)...
<?php
$color = '#ff0000';
echo 'image.svg.php?color='.$color;
?>
Nota. Les icônes proviennent de [Material Design Icons] (https://materialdesignicons.com/).
