SVG Coordinate System
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 ...
Get SVG for Web Developers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
