Impressionnez vos amis grâce aux sprites SVG

À l’approche de Noël, le développeur front-end voit souvent sa vie sociale s’effondrer : mini-sites évènementiels, newsletters liées et cartes de voeux full HTML5 sont autant de raisons pour lui d’oublier les cadeaux. Cette année, une révolution, la spécification des SVG fragment identifiers du W3C (en voie de standardisation), fera passer l’hiver dans nos coeurs comme un JSON passe en JavaScript : sans stringification.

Retour aux (fichiers) sources

Peut-être au détour d’un lien, d’une démo mal pensée et codée, aurez-vous diminué votre attente dans le SVG en terme de performances. Qu’en est-il en terme de maintenance ? Des possibilités d’évolutivité ? De tout ce qui fait du SVG un format en vue de Paris à la Silicon Valley ? Accrochez votre ceinture, et entamons ce voyage entre les vecteurs par une solution de contournement : le « SVG stack ».

Le display:none ; qui cachait l’iceberg

Le soucis du sprite de papa-maman, c’est la nécessité de retenir toutes les coordonnées et dimensions de vos différents visuels hors du sprite lui-même (puisqu’il ne permet pas, par exemple, de les sauvegarder en méta). Des services web sympathiques, comme Spritecow, prenaient bien les utilisateurs par la main en automatisant la création des déclarations CSS. Mais une fois le sprite généré, et en cas de modification, il fallait reprendre le processus à zéro.

Sur son blog, Simurai, met en avant le résultat d’un effort international sur Twitter. Le principe est de renverser l’idée classique du sprite en utilisant les possibilités du formatage XML du SVG : empiler les formes les unes sur les autres, c’est-à-dire créer une « pile » de formes SVG (d’où SVG Stack, pour les moins rapides). Vient ensuite l’implémentation, chaque couche/forme de la pile contiendra dans le marquage une classe commune (partons sur .forme) et un id.

Dans un premier, on applique les deux règles suivantes en CSS pour masquer toutes les formes, et ne les afficher que si elles sont directement ciblées.

.forme {
	display:none;
}

.forme:target {
	display:inline;
}

Dans un second temps, il nous reste à appeler l’image en fond, avec son identifiant.

monElement {
	background-image:url(monSvgStack.svg#maForme);
}

<accent italien>Et voilà !</accent italien>

Une restriction mineure est à noter : l’abandon du support de cette méthode par le groupe de travail SVG pour des raisons de compléxité de parse impactant les performances. Bien heureusement, une spécification en entraînant toujours une autre, le SVG Stack devrait avoir de beaux jours devant lui grâce à la propriété image-notation qui fait partie de la spécification des images CSS niveau 4.

One step beyooooooond

Quitte à mettre en place une solution futuriste dans vos projets, autant en utiliser une dont la spécification est aboutie, même si le support navigateur est cahoteux. En substance, le SVG fragment identifier, c’est exactement la même chose que le SVG stack, sans le stack.

On conserve la possibilité de cibler directement une forme SVG dans un fichier en invoquant son id en CSS. Mais différents modes d’intégration possibles.

Premièrement, en spécifiant le viewbox dans la déclaration CSS.

monElement {
	background-image:url(monSvgStack.svg#maForme(viewBox(<min-x>, <min-y>, <largeur>, <hauteur>));
}

Deuxièmement, en le spécifiant dans la forme SVG via une balise <view> (dont les valeurs sont présentes dans l’attribut viewbox présent par défaut lors d’un export depuis un éditeur vectoriel).

<view xmlns="http://www.w3.org/2000/svg" id="maForme" viewBox="<min-x>, <min-y>, <largeur>, <hauteur>"/>

monElement {
	background-image:url(monSvgStack.svg#maForme);
}

A savoir qu’il existe en sus de viewBox d’autres paramètres présents dans la spécification, ayant tous pour but de vous accompagner sur le chemin de Compostelle de l’intégration parfaite. La bien-nommée preserveAspectRatio conditionnant l’étirement (stretch pour les anglophones), l’attribut transform permettant d’influer sur la translation, la rotation et la mise à l’echelle de la forme (translate, rotate et scale pour les amateurs de propriété CSS), zoomAndPan qui a pour but de mettre à l’échelle l’ensemble des fragments en effectuant une transformation sur le premier élément parent (soit le SVG conteneur dans votre fichier). Et finalement viewTarget qui permettra d’appliquer une déclaration lors d’un ciblage de votre fragment via la pseudo-classe :target.

#Conclusion

Malheureusement principalement compatible avec Firefox, le SVG fragment identifier ne redonnera pas à lui seul le sourire aux enfants. Il faudra patienter quelques mois voire quelques années pour cela. En attendant, occupez vos errances près de la cheminée avec la lecture du brouillon SVG 2.0, et que ça ne vous empêche pas de passer de bonnes fêtes !