Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
SVG coordinate system, viewport and viewbox
Last updated at 3:13 pm UTC on 20 October 2020
coordinate system
SVG_Canvas_default_grid.png


viewport
http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
The viewport is set through height and width attributes within the <svg>.

The viewport is the visible section of an SVG. While an SVG can be as wide or as high as we wish, only a certain section of this image can be visible at a time.


and viewbox
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
The viewBox is an attribute of the element
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844
viewport: "a porthole window through which you can see the world beyond"

viewbox: "The viewBox can be thought of as much like the viewport but with two extra features: it can “pan” and it can “zoom”. Building on the “looking through glass” analogy, if the viewport is like a window, the viewBox is like a telescope."


https://css-tricks.com/scale-svg/

For an example of a viewbox definition see SVG minimal document - LODraw export