<html>
<head>
<script src="path/to/vlex.js"></script>
</head>
<body>
<div id="vlexContainer" style="width:100%; height:100%;">
<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>SVG is deemed to be the holy grail for graphics in resposive web design! But are they really?!
In situations – where you want layout inside a SVG – it is quite frustrating. Of course, there is this
viewboxthing, that can help sometimes, but most of the time drives you crazy.VLEX is the attempt to overcome this SVG shortcomings. It is a damn small script (5 KB with a lot of comments; 750 bytes (!) minified and gzipped) that allows, once added to the SVG, a declarative layout.
Just call the main VLEX function onload, and it will adjust all properties defined in the vlex attributes of your SVG components. In the example above the cx and cy values of the circle are kept up-to-date whenever one resizes the window (viz: it is always centered).
VLEX – Vector Layout Expressions →
(via @joggink)