Mozilla Web Development

Pinch Hitting For CSS… SVG

I was thinking the other day about CSS shortcomings. CSS is good intentioned, and usable, but it’s also very unintuitive. It’s far from friendly to designers, and makes some simple tasks rather complicated (such as multi-column layouts, and vertical positioning). Of course CSS3 is coming, but is there some other way?

It got me thinking. If SVG can accurately handle percentages, why couldn’t SVG be the layout engine that CSS has struggled to be? Leaving CSS to do what it does very well (text manipulation). For example:

  <title>Sample with SVG Binding</title>
  <link rel="stylesheet" media="all" href="/style/tabbed-pages"></link>
  <link rel="layout" media="all" href="/layout/test.svg"></link>
 <body id="">
 <div id="header">
 <div id="content">
    <h2>This is a title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer cursus erat. Fusce pharetra. Nullam vestibulum fringilla augue. Quisque sed neque eu nisl malesuada gravida. Mauris arcu lacus, malesuada sit amet, imperdiet sit amet, laoreet nec, magna. In pretium lacinia eros. In vel eros. Nullam sed orci. Integer sollicitudin ante suscipit diam. Sed tincidunt, libero et bibendum mattis, eros lacus nonummy purus, eu interdum erat augue nec tellus. Donec at lacus. Aliquam luctus. In hac habitasse platea dictumst. Vivamus pede urna, auctor eget, aliquet nec, auctor non, libero. Nulla facilisi. Etiam ornare fermentum est. In tempus porta dolor. Phasellus at felis.</p>
<p>Vivamus sollicitudin justo vel turpis cursus suscipit. Mauris id nisi. Sed metus ipsum, ultrices ac, dignissim in, auctor ut, dui. Aliquam tempor mollis metus. Sed vitae neque vitae massa interdum viverra. Ut feugiat ipsum vitae purus. Maecenas consectetuer pede ac ante. Aenean pharetra. Nulla facilisi. Cras tincidunt massa a augue. Sed a augue. Integer magna massa, vestibulum a, semper ut, vehicula a, dui. Fusce dignissim venenatis lectus. Fusce nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porttitor lorem et purus. Praesent posuere tempor lectus. Donec a lorem. Praesent ante ligula, convallis et, porta nec, dapibus vel, odio. Integer tellus ipsum, viverra nec, suscipit in, convallis quis, mi.
 This is a Title This is a header</p>
<p>Posted By: <a href="#">Robert</a></p>
<div id="sidebar">
<div id="footer">
This is the footer

And the new SVG layout:

< ?xml version="1.0" encoding="UTF-8" standalone="no"?>
<SVG xmlns:dc=""
  <g id=""
    <rect style="opacity:0.84736843;fill:black;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:1.33481812;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      y="108.31531" />
    <rect style="opacity:0.84736843;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:0.82362348;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      y="194.84891" />
    <rect style="opacity:0.84736843;fill:#f2f2f2;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:0.82362348;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      y="194.84891" />
    <rect style="opacity:0.84736843;fill:black;fill-opacity:1;fill-rule:nonzero;stroke:#34343c;stroke-width:2.00462627;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      y="477.3645" />

And here is the above SVG example in case you want to view it in your SVG-capable browser.

This SVG was made using Inkscape, and hand edited by me (I don’t code SVG, so it’s a true “hack”). Total time to do this: 5 min.

The trick here would be the id’s of the elements in the SVG align with the elements of the HTML. All subelements are rendered within the SVG’s matching element.

The end result would be something like this:

SVG HTML Rendering

So is this a reasonable thing to do? I don’t know, but considering how far SVG editing has come, having a vector based layout language sounds really ideal. Something where a tool can do most of the hard work is ideal. Something intuitive is ideal.

Using gzip on SVG also yields decent results. So file size wouldn’t be too bad.

The technical side of implementing such a thing on a browser may be a whole other deal. But from a developer point of view, it would be a really cool way to create webpages.

So there’s my excessively random thought of the day.

4 replies on “Pinch Hitting For CSS… SVG”

Michael: not really, you’d loose backwards compatibility (this way you still show HTML, and possibly even CSS if you use it). Not to mention you can have semantic HTML, but not semantic SVG. HTML isn’t dead.

It looks like you’re basically using SVG to define the overall page layout by splitting the document into regions, which is something CSS isn’t so good at currently. However, I think using SVG is overkill for this; we just need better CSS layout features.

Take a look at the draft of the CSS 3 Advanced Layout Module, in particular the bits about template-based positioning. It looks like it would be flexible enough to easily define most common layouts and the syntax is quite intuitive (it’s almost like you just have to draw an ASCII art representation of the page). For many grid-based layouts, the syntax may even be easier for authors than using HTML tables, which is a real win.

Alex: by using something like SVG you accomplish a few things: first the syntax has a minimal learning curve, second 2 UA’s already implemented partial support (means less work persuading), and lastly using SVG takes things a step closer to 1 format for multiple mediums. SVG could easily be manipulated to handle even print. Similar to the goals of Flash and Video/Web.

I’m not saying this is THE solution… but SVG does have it’s advantages, despite it’s uphill battle thus far.

Leave a Reply

Your email address will not be published. Required fields are marked *