VLEX – Vector Layout Expressions

vlex

<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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.