Category:SVG simplification by viewBox
The SVG viewBox
attribute enables to use another coordinate system.
Two of its advantages are helpful to simplify:
- scaling to another size may allow the use of shorter coordinate values, and/or of the implied-valued
stroke-width="1"
; example:.
- 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.[clarification needed]

- To get a reasonable unit system for definitions, a 2nd
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
Recommended sizes: The document size (width and height) determines the default dimensions of its image.
While a size too small may hide picture details, a size too large requires zoom out activities to see the entire image.
- Values not exceeding a width of 600 and a height of 400 are a good choice
Pages in category "Category:SVG simplification by viewBox"
- File:10x10 checkered board transparent.svg
- File:1330px Rainbow flag 12 colours black bordered.svg
- File:Alternattiva Demokratika.svg
- File:Astigmatismus-Sonne.svg
- File:Bandera del Comtat d'Empúries.svg
- File:British Air force fin flash WWI.svg
- File:Centered hexagonal = 1 + 6triangular.svg
- File:Chess Board.svg
- File:Commons logo icon.svg
- File:Construction sheet of Flag of the People's Republic of China.svg
- File:DST begin.svg
- File:EBU Colorbars HD.svg
- File:EBU Colorbars.svg
- File:End CEST.svg
- File:Esoteric Taijitu.svg
- File:F1 yellow flag with red stripes.svg
- File:Flag of Qatar.svg
- File:Flag of Tere-Kholsky District.svg
- File:Flag of the Puerto Rican Independence Party.svg
- File:L-tromino-dissection.svg
- File:Nationalist air force black roundel.svg
- File:Polygon-032VC.svg
- File:Roundel of Switzerland.svg
- File:Roundel of the Slovenian Air Force.svg
- File:Russian 9 segment digits.svg
- File:Simpler Ellipse Circle.svg
- File:Stomachion canonique.SVG
- File:Svg example6s.svg
- File:Urantia three-concentric-blue-circles-on-white symbol.svg
- File:Venn Diagram ABCD.svg
- File:Volga White Army.svg
- File:Wang tiles.svg