Category:SVG simplification by viewBox

The SVG attribute viewBox enables to use another coordinate system. Two of its advantages are helpful to simplify:

1. scaling to another size may allow the use of shorter coordinate values, and/or of the implied-valued stroke-width="1"; example:: .
2. shifting an often needed point (e.g. the center of circles, or transform-rotations) to x=y=0 avoids the repeated declaration of that point; example:: , .

Explanation: The implied values for a not declared viewBox are "0 0 <width> <height>".
viewBox="-200 -150 600 400" means: the image is drawn with a width of 600 and a height of 400; the origin where x=y=0 is 200 px right of the image's left border (-200 ≤ x ≤ 400), and 150 px below of the top border (-150 ≤ y ≤ 250).

During the process of simplification of an existing SVG drawing, it may be useful to scale the display to another size.
This is easy to maintain with a temporary change of e.g.

width="50" height="60" to width="1000" height="1200" viewBox="0 0 50 60", without altering the width/height-relation.

To get a reasonable unit system for definitions, a 2^nd svg-element may be introduced, e.g. within the document

<svg … width="10cm" height="12cm" viewBox="3 4 15 18" … > by inserting somewhere
<svg x="3" y="4" width="15" height="18" viewBox="0 0 360 432"> to edit within the real dimensions 360 × 432 of the graphic.

To get the real values an existing SVG drawing with a transforming viewBox, a transform statement can be used. To overwrite e.g.
<svg ... width="w1" height="h1" viewBox="tx ty w2 h2">, after a transform instruction
<g transform="translate(tx ty)scale(w2/w1 h2/h1)"> the viewBox transformations are reset till the corresponding </g>.

See the example Transform example.svg