VLEX : des expressions pour redimensionner les images SVG
VLEX : des expressions pour redimensionner les images SVG
VLEX, pour Vector Layout Expressions, est une bibliothèque JavaScript permettant de définir la logique nécessaire pour redimensionner les images SVG.
Le SVG est réputé pour ses performances dans la conception Web dite « responsive ». Cependant, mettre en page à l'intérieur d'un SVG s'avère plus compliqué. Bien sûr, il y a la « viewbox » qui peut aider, mais la plupart du temps, ce n'est pas si évident. C'est pourquoi VLEX est une proposition pour surmonter ces complications. C'est un tout petit script qui permet, une fois ajouté au SVG, une mise en page déclarative.
Le script fonctionne à l'aide d'un attribut vlex qui contrôle la façon dont les choses sont redimensionnées. Il y a également une fonction VLEX pour l'initialisation et la mise à jour des éléments. Une vlexpression contient des descriptions de propriétés séparées par des points-virgules. L'utilisation de $ permet à des valeurs prédéfinies d'être référencées. Quant au :, il sert à définir les valeurs selon la syntaxe key:value.
L'exemple du cercle centré se définit ainsi : cx:{$cX};cy:{$cY} où $cX = le centre horizontal et $cY = le centre vertical.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <html>
<head>
<script src="path/to/vlex.js"></script>
</head>
<body>
<div id="firefoxFix" style="width:400px; height:300px; border:1px solid #000">
<svg id="vlex" width="100%" height="100%" onload="VLEX(vlex)"> <!-- call VLEX inline -->
<circle r="100" vlex="cx:{$cX};cy:{$cY}"></circle> <!-- use vlex attribute -->
</svg>
</div>
</body>
</html> |
En interne, le code scinde l'expression avec String.prototype.split(';') et puis fait de même avec le : afin d'obtenir les clés et les valeurs. C'est un parseur assez simple, mais il semble petit et plutôt flexible et permet d'obtenir certains effets bien construits à l'aide de SVG.
:fleche: Démonstration.
:fleche: Les sources, les exemples et la documentation sur GitHub.
:fleche: D'après un article paru sur DailyJS.
Et vous ?
:fleche: Utilisez-vous le format SVG ? Rencontrez-vous des problèmes pour l'intégrer à vos conceptions ?
