SVG Frameworks

Julien Etienne
4 min readJun 1, 2015

There are no SVG frameworks. Ok maybe one or two for mobile and a few weak hybrids if you look hard enough but nope! no serious SVG framworks.

I would say that SVG is even more mis-understood than JavaScript. Many mis-informed professionals tend to believe SVG has some major hindrance that makes it less desirable for broad use in production. (smh)

Usage of SVG for websites, 1 June 2015

Fortunately SVG is on some kind of exponential rise thanks to many enthusiast, groups and libraries. I can recall the slow performance of SVG in 2010, not to mention inconsistencies and lack of support amongst browsers, but it has come a long way from that.

Many fail to realize how fast SVG is today.

Some lack the concept of vector vs raster graphics; The worst argument is Canvas is faster don’t get me started on this feeble mis-conception “Grr”.

SVG is the leading web technology for data visualizations, let that resonate as here to stay. (Ok it’s been around for 16yrs but has to be said). Most web savvy designers are aware that SVG is the desirable icon/ logo format where feasible, especially when considering retina displays, file size and animations. So is that it, charts and icons? yuck!

Can an SVG framework work?

Short answer = yes, long answer = absolutely. SVG is supported in every major browser, and there are several polyfills to make SVG work in IE8.

It’s too complicated

Complicated it is not

Stop it, it’s not. Master the force… I mean the viewBox and understand preserveAspectRatio and the rest is ridiculously easy. Follow this woman, and listen to this man!

Do it, just do it!

Performance

You’re using SVG, suddenly the CPU fans start screaming “This Is Spartaaaaaaa”, and the FPS reads “jittery”… You may be doing it wrong. Despite using CSS with SVG it is not CSS. The true nature of vector graphics is more in-line with 3D gaming you need to consider all entities as performance expenses.

Vector graphics are intensive, technical & beautiful.

When working with SVG in production to build GUIs we need to behave, by limiting gradients, complex designs and filters. Our ideas should evolve as browsers become more efficient and as Moore’s Law takes effect with hardware.

So with that in mind, SVG frameworks should not have the glorious render over-bloating that we detest with CSS frameworks. (Cough, Bootstrap)

SVG Hybrid Frameworks

Nyan cat hybrid..I just typed “SVG animation” in Google Images (shrugs)

IMHO this is the gotcha, a full SVG1.1 framework may have little benefits, maybe what we should be aiming for is SVG Hybrid Frameworks that utilize HTML for content formatting & SVG for UI formatting.

To contradict myself, a 1Up beyond hybrid would be a full SVG framework with text auto-wrapping (expected to be native in SVG 2.0). Content management & formatting is crucial for any full SVG framework. If your app is mostly static, a full SVG1.1 design in production should be a no-brainier (should).

It’s only right that I mention Scalable Design, make it happen, be the 1st (ok maybe the 2nd)

Thumbs-down dogshit:

Before we attack the notion of SVG frameworks and create typical, premature, ill-informed conceptions about why SVG is not a practical format, the most important question is “Do you honestly understand what SVG is capable of, and not capable of TODAY?”.

Well why don’t you make a framework Mr Julien, instead of just speaking about it?

  • Ben Affleck: “I asked Michael why it was easier to train oil drillers to become astronauts than it was to train astronauts to become oil drillers, and he told me to shut the fuck up, so that was the end of that talk.”

Why SVG? Why now?

CompatibilityPerformance — Searchability + it is Vector

Timing, timing is everything.

;-)

--

--