Why We Need a ViewBox Property in CSS
sarasoueidan.com
sarasoueidan.com
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.
I really like SVG. But because of some performace issues, I sometimes think I want to recreate the rendering engine in Canvas.
Maybe as SVG gets more traction, we'll see browsers improve in that regard.
How much slower? Flash is slow enough as it is. I can't imagine using something even slower.
See for example: https://jsfiddle.net/kuvodbax/1/
[0] https://github.com/ariutta/svg-pan-zoom/blob/f84567bae1b80ac... [1] https://msdn.microsoft.com/en-us/library/gg589508%28v=vs.85%...
The math is trivial, and the transformation matrix is conceptually much more powerful. You can start out with just the 2D zoom effect shown here, and then add rotation and even 3D transformations later while still using just one matrix.
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.
How that area will be fit into the viewport is determined by the "preserveAspectRatio" attribute.
If you don't define any viewBox then there will be no scaling - 1px in the viewport coordinate system will be mapped to 1 user unit in the abstract initial user coordinate system.
In the context of this article, it's about cropping images (e.g. you could have a full-body shot of the company CEO on the desktop version of your page and then just crop the face for mobile). One can already achieve the same effect in modern browsers using the picture element, although the cropped versions of images need to be prepared in advance.