Une bibliothèque d'icônes contient souvent des dizaines de symboles rangés dans un seul fichier SVG, pour éviter que le navigateur ne charge une dizaine de petits fichiers séparés. Reste un problème concret : comment afficher uniquement l'étoile de ce fichier, sans toucher au cœur juste à côté, ni dupliquer le fichier une fois par icône ?
<view> répond à cette question en donnant un nom à une zone précise du SVG, une zone que l'on peut ensuite cibler directement depuis une URL, comme on cible une section d'une page HTML avec une ancre.
Définition
<view> définit une vue nommée : un identifiant associé à son propre viewBox, indépendant de celui de la racine <svg>. En ajoutant #nomDeVue à la fin de l'URL du fichier SVG, par exemple dans un attribut src d'une balise <img>, le navigateur affiche uniquement le cadrage défini par cette vue, comme s'il zoomait automatiquement sur cette portion du dessin. Le fichier source, lui, ne change pas : une seule copie du SVG suffit pour toutes les vues qu'il contient.
Attributs principaux
<view> se limite à quelques attributs, tous centrés sur le cadrage. id donne le nom utilisé après le dièse dans l'URL. viewBox définit la zone du dessin à montrer, avec ses propres coordonnées. preserveAspectRatio contrôle comment cette zone s'ajuste si le cadre d'affichage n'a pas exactement les mêmes proportions.
| Attribut | Rôle |
|---|---|
id | Le nom de la vue, utilisé après le # dans l'URL |
viewBox | La zone du dessin à cadrer pour cette vue |
preserveAspectRatio | Le comportement si le cadre n'a pas les mêmes proportions |
Exemple de rendu concret
Un même fichier icones.svg peut contenir une étoile et un cœur, chacun associé à sa propre vue.
<svg viewBox="0 0 64 32" xmlns="http://www.w3.org/2000/svg">
<view id="etoile" viewBox="0 0 32 32" />
<path
d="M16 3l3.5 7.6 8 1-6 5.9 1.4 8.4-6.9-4-6.9 4 1.4-8.4-6-5.9 8-1z"
fill="#f59e0b"
/>
<view id="coeur" viewBox="32 0 32 32" />
<path
transform="translate(32,0)"
d="M16 27S4 19 4 11a6 6 0 0 1 12-1 6 6 0 0 1 12 1c0 8-12 16-12 16z"
fill="#ef4444"
/>
</svg>Deux balises <img> suffisent ensuite pour n'afficher que l'une ou l'autre icône, cadrée et mise à l'échelle automatiquement sur les dimensions demandées.
<img src="icones.svg#etoile" alt="Icône étoile" width="32" height="32" />
<img src="icones.svg#coeur" alt="Icône cœur" width="32" height="32" />Différence avec <symbol>
<symbol> et <use> résolvent un problème voisin, celui de réutiliser un dessin plusieurs fois, mais par un chemin différent : <symbol> déclare un modèle invisible par défaut, et <use> en insère des copies directement dans le document HTML, à côté du reste du contenu de la page. <view> ne copie rien : il cible une zone d'un fichier SVG externe, chargé comme une image à part, via src ou background-image. Le choix entre les deux dépend surtout d'où vit le SVG : à l'intérieur de la page pour les deux premiers, en fichier séparé pour <view>.
Piège classique
Le fragment #nomDeVue ne fonctionne que lorsque le SVG est chargé comme une ressource externe, via une balise <img>, un object ou une iframe. Sur un SVG collé directement dans le HTML de la page, ce que l'on appelle un SVG inline, <view> n'a plus rien à cibler : il n'existe aucune URL à laquelle ajouter le fragment, et le cadrage voulu ne s'applique jamais.
Cas d'usage réel
Un site qui affiche une dizaine de pictogrammes de réseaux sociaux depuis un seul fichier sprite.svg est le cas d'école : chaque logo obtient son #nomDeVue, chaque balise <img> du site pointe vers une vue différente, et le navigateur ne télécharge le fichier qu'une seule fois, mis en cache pour toutes les icônes suivantes.
Questions fréquentes
<view> fonctionne-t-il avec background-image en CSS ?
La prise en charge est plus inégale selon les navigateurs qu'avec une balise <img> classique, c'est pourquoi mieux vaut tester la cible précise avant d'en dépendre pour un élément important d'une interface.
Peut-on avoir plusieurs <view> dans un seul SVG ?
Oui, sans aucune limite de nombre : c'est même tout l'intérêt de l'élément, puisqu'un seul fichier peut ainsi contenir des dizaines de vues nommées, une par icône ou par zone à isoler.
Le viewBox de <view> remplace-t-il celui de la racine <svg> ?
Il le remplace uniquement pour l'affichage demandé via le fragment d'URL. Sans fragment dans l'adresse, c'est le viewBox de la racine qui reste utilisé, exactement comme si <view> n'existait pas.