Beginning SVG: A Practical Introduction to SVG using Real-World Examples

© Alex Libby  2018

Alex LibbyBeginning SVGhttps://doi.org/10.1007/978-1-4842-3760-1_4

4. Sizing SVG

Alex Libby¹ 

(1)

Rugby, Warwickshire, UK

 

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 ...