SVG peut être utilisé pour de l’imagerie vectorielle, mais également pour rendre une image sémantique et interactive, comme une carte de jeu web.

Les spécifications du SVG

SVG est un langage similaire à HTML (au sens où il est basé sur XML, peut être stylé via CSS et manipulé via Javascript), permettant surtout de créer des images (interactives). Il peut servir à faire la carte de votre jeu, ou à faire un menu un peu complexe. Attention toutefois car il n’est pas “responsive” facilement.

Spécifications

Le MDN vous propose déjà tout un guide sur le SVG, que je ne paraphraserait pas. Regardez surtout les différents éléments et attributs de ce langage, pour savoir lesquels auront un intérêt pour votre jeu.

Elements et attributs utiles

Pour ma part, les éléments et attributs qui me semblent utile (et qui valent de s’y attarder pour un jeu web) sont: a animate* clipPath fe* filter hatch mask marker path pattern use view et color-* d xlink:href pointer-events transform pour les attributs. La liste n’est évidemment pas exhaustive.

animationMotion

animateMotion permet de déplacer des éléments le long d’une courbe SVG, pour représenter un flux de ressources, un déplacement d’unité, une progression le long d’un chemin, etc.

























Déplacement de petits véhicules (symbolisés par des rectangles) le long d’une route, par Alucard

CSS dans un SVG

<?xml-stylesheet href="..." ?> permet d’appliquer un CSS à un fichier .svg. Sinon, le SVG se trouve directement dans un HTML (<html>...<body>...<svg ...>), alors intégrez le CSS au HTML (<head>...<link rel="stylesheet" href="styles-for-my-svg.css">). Si le SVG dans ce HTML a un namespace XML (xmlns="..."), alors ajoutez @namespace "https://www.w3.org/2000/SVG au CSS.

feColorMatrix ne donne pas les “bonnes” couleurs

Les couleurs en informatique se définissent dans un espace d’interpolation. Par défaut, SVG utilise l’espace lRGB (linear RGB), qui se base sur la perception des couleurs par l’oeil humain. Utilisez color-interpolation-filters="sRGB" si feColorMatrix (MDN) ne rend pas les couleurs que vous attendiez.













Objet original
Cercle Vert = 0,128,0




feColorMatrix “normal” (lRGB)
Resultat = 0,154,187




color-interpolation-filters=sRGB
Resultat = 0,192,127

Pour le cercle vert, les filtres effectuent Resultat = ( 0*0.5, 128*1.5, 0*0.5+127) dans deux espaces différents

Javascript dans un SVG

<script xlink:href="…"></script> permet de charger un fichier Javascript dans un SVG. N’oubliez pas de déclarer l’espace de nom xlink via <svg xmlns:xlink="http://www.w3.org/1999/xlink">.

Optimisations

Pour qu’un SVG ne rame pas, il vaut mieux regrouper les éléments qui sont physiquement “proches” les uns des autres (à la condition d’avoir des centaines/milliers d’éléments; en dessous, cela ne sert à rien). Si possible, séparez la partie interactive du SVG, que vous mettrez directement dans celui-ci, et sa partie décorative (arrière-plan) que vous pourrez insérer via un image (cet arrière-plan pourra être lui-aussi en SVG). Cela évitera que le navigateur ne redessine tout le SVG inutilement à chaque frame. Enfin, comme pour toute optimisation, ne vous en préoccupez que si cela rame, jamais “au cas où” ou “en prévision, si j’ai des milliers de joueurs”.

Placez les nombreux éléments dans un background

Mon élément SVG n’apparait pas!

  • Est-il dans la viewBow (attention aux transform qui peuvent l’en faire sortir)?
  • A-t-il une dimension valide (r, width, height... et pas de
    scale="0"

    )?

  • Est-il masqué par un autre élément ou un clipPath ou un mask?
  • Une règle CSS interfère-t-elle (avec fill stroke opacity display) ou utilise-t-elle une couleur transparent/invisible (rouge sur fond rouge)?
  • Est-il dans le bon namespace?
  • A-t-il un filtre cassé qui lui est appliqué (attribut filter renvoyant vers un filtre planté ou mal conçu)?
  • S’il s’agit d’un use, a-t-il le bon href, dans le namespace xlink, et CORS est-il bien configuré?

Ralentis et accélérés

SVG permet de manipuler la vitesse des animations qu’il représente, offrant la possibilité de les piloter totalement en temps réel, ou plus simplement, de faire des ralentis ou des accélérés (ce qu’un GIF ne permettra absolument pas, comme discuté sur JeuWeb).









Exemple d’animation SVG et d’un ralentis de cette même animation

vector-effect

vector-effect: non-scaling-stroke;

permet de conserver constante l’épaisseur du trait de contour (stroke) d’un objet SVG, malgré un changement d’échelle (par exemple, via scale). Cela peut donc servir quand scale est utilisé pour un effet de perspective, de zoom, ou autre.





Cercle de base
Cercle scale(4)
Cercle scale(4)+vector-effect
Exemple d’application de vector-effect

Exemples

Voir aussi les exemples de SVG