VLEX – Vector Layout Expressions


    <script src="path/to/vlex.js"></script>
    <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 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)

About the author

Bramus is a Freelance Web Developer from Belgium. 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. Required fields are marked *

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