VLEX : redimensionnez les images SVG de vos applications Web
Grâce à cette bibliothèque JavaScript et ses expressions

Le , par vermine, Responsable JavaScript & AJAX
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}$cX = le centre horizontal et $cY = le centre vertical.

Code html : Sélectionner tout
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.

Démonstration.
Les sources, les exemples et la documentation sur GitHub.
D'après un article paru sur DailyJS.

Et vous ?

Utilisez-vous le format SVG ? Rencontrez-vous des problèmes pour l'intégrer à vos conceptions ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Développeur confirmé javascript / angularjs h/f
Emagine Consulting - Ile de France - Seine et Marne
Développeur Javascript H/F
Conserto - Bretagne - Rennes (35000)
Développeur javascript friand de node js H/F
Bluecoders - Ile de France - Paris (75001)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -