<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
viewbox
thing, 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)