I have been busy contracting for a client, building a product configurator based on SVG. It feels like I'm working with a better version of Flash, but with much slower rendering.

SVG in the browser is much more extensive than I had realised. There's really a lot you can do with it, and that kind-of snuck up on me. I've never had to touch SVG, been using canvas and DOM elements for a great many things. And now, all of a sudden, there is this massive part of the browser that I had neglected, where you can do anything.

If you work with designers that use Illustrator, you can really create a efficient workflow with SVG as a base.

An alternative solution to a viewbox property would be to use CSS transforms. It is a bit harder to work with, since you have to specify translation and scale instead of simply specifying the bounding box, but I don't think it is unreasonably hard.

See for example: https://jsfiddle.net/kuvodbax/1/

Sorry to say but people are completely missing the point. Before I get into the viewBox, let me quickly address some other comments.

If you are having performance hits with SVG you are using it wrong. It's like developing a video console game for the first time without any prior knowledge to video game development, memory techniques, asset loading, and so on...you will make a shitty boated game. 99% of active web developers & designers mis-understand SVG under the hood so don't be surprised if you can't find one predominant example of SVG in production.

In regards to the viewBox, what is its purpose? It is there to keep content in proportion. But why? why is the viewport not the viewBox?

Because the viewBox was created around 1999 when computers were slow and SVG was also heavy and slow. The viewBox had two apparent agendas, i) To reduce scaling of content, that would require more calculations to render ii) To be more in-line and proportionate to CSS. Because CSS in 1999 looked terrible on high res monitors.

The viewBox was a way to downgrade SVG for practical use back then, but the beauty of it is that it can be tweaked to behave in a full screen scalable fashion. This is why SVG is more desirable for the future.

So no, the ViewBox solves nothing in CSS, SVG is an amazing technology that people refuse to understand because they don't want to think too much.

SVG is not actually slower than canvas, if you see two equivalent examples of SVG and canvas the canvas may seem faster but that's because it can not do as much. If you now try to add multiple events to animated element SVG will perform faster.

People need to stop the obsession with CSS and learn SVG so vendors can improve the performance, spec and so we can make shit look good on the web!

You don't need to be a "computer scientist" to understand vector based graphics are the future of the web.

What is "art-directing" and "art-direct svg" in this context? Does it have a special meaning?