Using svg to it’s potential

I showed a good example of how to use svg to draw graphs in the previous post. But it’s not just graphs, it can be logos, or whole 3d design app (with Vue). Just some examples:

Simple logo

Just to get us started, here is a logo done in svg. Why would you do that, actually several reasons. Size: at 20 lines of inline code (under 1k) it is unbeatable. Scalable: since it is a vector graphic you don’t need to worry at which pixel size you are displaying it. Style: since a lot of css works on individual svg elements, you can go wild. The red outline in the logos elements for example, are just css borders. Or you can animate: this one bounces a bit when displayed. The imagination is the limit.

Sparklines

A pictures says more than a thousand words, they say. And as a coder i think the sparlines github has on repositories git a great idea of the liveliness of the repo. We did something similar in one project:

Commit Sparkline (for rails)

The thing about doing this in svg is how simple it it. This one is literally three lines of code (below).

Most the actual work goes into creating and maintaining the data. The actual displaying is super simple:

.graph_box
  %svg{:viewbox => “0 0 315 #{max_y}” , class: :index_graph}
    %polyline{:fill => “none”, :stroke => “#0074d9”,
              :points => “#{graph_lines(gem)}” }

Where the graph_lines is a super simple method, just formatting the data according to how svg wants it.

3d Design app

A planning tool for house builders, where a 3d model of a timber frame can be edited and give an idea of how the whole will look. Such a visualization process can be very costly using an architect, and very technical using 3d tools. Below you see a short video if such a tool using svg and Vue. Vue handles the input and the data dependencies.

We render svg, which Vue handles just as easily as html, and the thing is it’s only 50 lines:

There is another 50 lines of Vue code to make this work, but at least to me it is incredible how effective this method is. The frame is described by less than 10 attributes, basically what is editable through the sliders. To render it is mostly rectangles, a couple of poly-lines and the style is css. The 3d effect is achieved by css’s translateZ and there is a svg mask used to hide trusses further away.

Conclusion

Actually the most difficult thing in coding this was not the coding at all. It is understanding the full capabilities of svg, and especially when combined with css. The line is still a bit blurry and there are things (like the masks) that don’t work the same everywhere. Apparently the svg 2 standard will improve this.

What was tricky is getting the view parameters right, but Vue to the rescue. There is perspective, perspective origin, scale, translation, mask alpha channel: all kinds of parameters to get right. But using more Vue sliders i just played with all of them until it looked good and then used the values hard-coded when done. (Same idea as d3 express)

At least i can’t help but be amazed at what one can do with a couple of hundred lines of code, give the right choice of tools