Using SVG with CSS3 and HTML5

Chapter 8. Scaling Up

Chapter 8. Defining Coordinate Systems

So far in this book, when talking about the layout of SVG shapes, we have used the word default a lot. By default, the origin of the coordinate system is in the top-left corner. By default, user coordinates are equal to CSS layout px units. By default, SVG coordinate systems seem restrictive and arbitrary.

But you don’t have to use the default options.

In this chapter, we introduce the ways you can control the coordinate system. Which means we’ll introduce the scalable side of Scalable Vector Graphics. By controlling the coordinate system, you control the size of your graphics.

This chapter focuses on defining the initial coordinate systems for your graphic. Defining a coordinate system means setting the origin point, establishing the size of a user unit, and determining the meaning of 100% width or height. All of these are set with the powerful viewBox attribute we’ve already mentioned multiple times. Other attributes control the size and alignment.

The coordinate system concepts discussed in this chapter will be revisited in the following chapters. The attributes used to define the initial coordinate system of an <svg> are also used in scaling reused content (<use> and <image>), creating local coordinate systems (with nested <svg>), and cropping the graphic during embedding (with <view>).

Another way to modify coordinate systems is by geometrically transforming them, as we’ll discuss in Chapter 11. Transformations ...