

Why We Need a ViewBox Property in CSS - twsted
http://sarasoueidan.com/blog/svg-art-direction-using-viewbox/

======
neals
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.

~~~
PopeOfNope
> but with much slower rendering

How much slower? Flash is slow enough as it is. I can't imagine using
something even slower.

~~~
JohnTHaller
Flash is slow. In-browser animations using 'HTML5' (as in full cartoon
animations) as well as SVG manipulations is quite a bit slower than Flash.
Always has been. Will be for a bit longer.

~~~
cleverjake
have you tried using IE's svg rendering? Its GPU powered and fast as heck

------
reipahb
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/](https://jsfiddle.net/kuvodbax/1/)

~~~
mistercow
Seems like a good javascript library could turn that into a viewbox like api.

~~~
andersriutta
(Full disclosure: contributor) We went with transforms for the svg-pan-zoom
library [0], but it's interesting to compare using transforms vs. the viewBox
[1].

[0] [https://github.com/ariutta/svg-pan-
zoom/blob/f84567bae1b80ac...](https://github.com/ariutta/svg-pan-
zoom/blob/f84567bae1b80ac000af06306011e18728af487f/src/svg-pan-zoom.js#L247)
[1] [https://msdn.microsoft.com/en-
us/library/gg589508%28v=vs.85%...](https://msdn.microsoft.com/en-
us/library/gg589508%28v=vs.85%29.aspx)

------
jugularkill
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
The 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.

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

~~~
MatekCopatek
In terms of web design, it usually expresses advanced adapting to different
breakpoints/screen sizes, but it's difficult to draw the line where something
stops being a _regular_ responsive design and starts being _artistically
directed_.

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.

