In Chapter 3, we worked our way through creating different types of SVG elements – this includes the humble square, through to a circle and finishing up with more complex paths. Yet one key feature remains, upon which we’ve touched, yet not really discussed in any detail – scaling. If we have to scale up a standard image, then this becomes tricky; in most cases we end up with a picture that…well, looks rubbish!
SVG graphics are different: we can take any SVG element and resize them with ease and without loss of clarity. How? Well, it all hangs around the SVG coordinate system and the SVG viewport; it’s key to ...