
Scaling SVG Elements - wattenberger
https://wattenberger.com/guide/scaling-svg
======
akersten
Cool visualization! Any plans to do more examples of SVG? There's lots of
functionality in the format and it would be neat to see it documented in an
interactive style like this.

~~~
wattenberger
I totally agree! I'm planning a video course on SVG, since there really aren't
many good resources on it and I find it really powerful, and also fun!

------
adamch
This is a really beautiful way to demo this feature. Thanks!

------
kjhughes
For a constant height, why do width values between 0 and 100 cause (x axis)
_displacement_ , but width values above 100 cause _scale reduction_ in both
dimensions?

(A similar phenomena can be observed for a constant width while varying the
height values.)

~~~
wattenberger
Good question! I'm trying to find a good way to explain this bit in the guide.

This is due to the preserveAspectRatio property on the svg element. Its
default value is `meet`, which scales the svg with three rules:

\- aspect ratio is preserved \- the entire viewBox is visible within the
viewport \- the viewBox is scaled up as much as possible, while still meeting
the other criteria

[https://developer.mozilla.org/en-
US/docs/Web/SVG/Attribute/p...](https://developer.mozilla.org/en-
US/docs/Web/SVG/Attribute/preserveAspectRatio)

If you fiddle with the attribute value in the Dev Tools, try setting it to
`xMinYMid` or `none` to see if that gives you a good sense of how it works.
I'm worried that it might just confuse if not explained well :)

~~~
kjhughes
Thank you for the explanation (and for the cool visualization, btw).

It seems that preserveAspectRatio is an important part of understanding
viewBox. IMO, it deserves a spot on the telescope's controls. I think a value
of `none` might be the best starting point; all of the settings that result in
combined scaling and displacement are less intuitive and likely harder to
understand at first exposure.

Aside: Even if you decide to keep `xMidYMid ` as the default value for
preserveAspectRatio, it seems that you ought to list it explicitly if you wish
to specify a meetOrSlice value as Chrome is currently complaining with your
existing preserveAspectRatio="meet":

    
    
      react-dom.production.min.js:978 Error: <svg> attribute preserveAspectRatio: Unrecognized enumerated value, "meet".

------
Zaskoda
I'm current using Vue to manipulate a complex SVG as the foundation of my
current game engine. It's not super snappy but it's effective and interesting.
I've taken the concept pretty far and, thus far, I haven't see anyone else
manipulating SVGs with Vue (or React or whatever) in this way before. Its
surprising because it feels extremely intuitive.

~~~
planteen
I've worked with hardware accelerated vector graphics engines (2D GPUs). It
sounds like a good idea to do everything vector, because some things are very
simple while retaining quality as you said. But in my experience, the vector
operations are so expensive compared to raster ones that you go back to
rasters to maintain framerate.

~~~
Zaskoda
Yes, even my relatively simple scenes are expensive to render. I'm hoping I
can optimize it enough to be playable.

An interesting plus side: I can export the SVG as a file and get an extremely
high quality screenshot.

~~~
dwild
How "simple" are they? I remember so long ago, there was some amazing Flash
graphics, so 10 years later, there's no way we can't get much more impressive
ones.

------
svnpenn
Dont use site

Moving those sliders will nuke your CPU

probably because the entire <body> is essentially just:

    
    
        <script src="/prism.js"></script>
        <script src="/static/js/20.c80b9d97.chunk.js"></script>
        <script src="/static/js/main.635019b5.chunk.js"></script>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="https://d3js.org/d3-array.v2.min.js"></script>

~~~
adamch
Strange. I'm on a Macbook and this page nukes my CPU on FF Nightly, but not on
Chrome.

~~~
bryanrasmussen
FF Developer 71.0b10 MacBook Pro from mid 2018 running Mojave, works great.

