3 ms·
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 performa
by jugularkill 11y ago
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.
- jarek-foksa 11y agoThe only purpose of the viewBox attribute is to define a rectangular area in the abstract coordinate system. 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.