In my post about proving Pappus’s Hexagon Theorem¹, I inserted some SVG graphics to illustrate the ideas.

An example illustrating the difficulty of enlarging an SVG graphics for ordinary users. The image is borrowed from the post about proving Pappus’s Hexagon Theorem.
$\rm \LaTeX$ Source code

How can one enlarge SVG images only within web browsers?

A working example showing the zooming, panning and dragging functions of SVG graphics. Drag the figure to translate it, and scroll to enlarge/reduce it.
Source code

Thanks to Andrea Leofreddi, SVG graphics can now be enlarged within browsers.²

The instructions on Leofreddi’s blog post is quite easy to understand. Then, I tried his script.

First, I copied lines 4–5 of the source code of official demo (a tiger) to my file. (i.e. PappusHexThm4.svg) I also closed the <g id="viewport" transform="translate(200,200)"> tag at the bottom of my file. However, I saw nothing in a web browser.

Second, I deleted transform="translate(200,200)". What I could see in the web browser was a small picture. I couldn’t use the scroll wheel on the mouse to enlarge the figure. I dragged the picture to the right, but part of the image is truncated after the drag.

Third, if I remove width="152.832pt" height="98.239pt" viewBox="0 0 152.832 98.239", then it’s done!

---

(Added on AUG 03, 2014)

Yesterday, I didn’t know the code for enlarging an SVG image embedded by an <object> tag. As a result, the loaded image was too small. I’ve just checked out a guide on MDN about the transform attribute of <svg> tags³, and now I know how to make it bigger by the function matrix(<a>,<b>,<c>,<d>,<e>,<f>).

Moreover, Chrome supports the scaling of SVG graphics just like the scaling of other HTML elements.

---