Home
Animation
SVG Essentials
SVG Animation
Animating WWW Logos
More Animations
Site Map
Home
SVG History
SVG Primer Part 1
SVG Primer Part 2
SVG Tools
SVG Examples
Choosing a viewBox
Animation
History
Computers
Cmptr Img
Systems
Examples
SVG
History
Primer 1
Primer 2
Tools
Exmpls
SVG Anim
Primer
XSLT
Path_ology
3D
Scenes
WWW Logos
94-03
04-06
07-09
10-12
13-15
More Anims
Teaching
LBH
Hash
C&C
Road Trains
Navigation
Home
SVG Essentials
Overview
1. History
2. SVG is XML
3. Using SVG
4. Coordinates
5. viewBox
6. Y-Direction
7. Rendering
8. Drawing
9. Path (lines)
10. Path (cubics)
11. Path (curves)
12. Path arcs
13. Text
14. Groups
15. Transformations
16. Clipping
The choice of viewBox defines what part of the SVG coordinate space is visible:
-150
0
150
0
110
-110
Browser window
viewBox="0 0 150 110"
viewBox="-150 -110 150 110"
viewBox="-75 -110 150 110"
viewBox="-75 -55 150 110"
<svg width="150" height="110"
viewBox="
min-x
min-y
width
height
"
. . .
</svg>