IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par vermine

21PARTAGES

1  0 
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 ?

Une erreur dans cette actualité ? Signalez-nous-la !