December 2002
Beginner to intermediate
464 pages
8h 34m
English
We've explained how to size an SVG viewport and place it, (using width and height, and x and y attributes), using the <svg> element. We've seen examples of the viewBox attribute, and we've streamlined code with container elements. Now it's time to take a look at SVG's coordinate system to understand how to create and control SVG images.
All drawing in SVG references a coordinate system. Because SVG is a vector-based graphic programming language, SVG drawings consist of mathematical formulae plotting points in a coordinate system with instructions on how to render those points as images. The “canvas” on which these drawings are displayed is the SVG viewport.
Points are drawn using x and y coordinate positions, similar to ...