In my post about proving Pappus’s Hexagon Theorem1, 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.
Thanks to Andrea Leofreddi, SVG graphics can now be enlarged within browsers.2
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
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> tags3, and now I know how to make
it bigger by the function
Moreover, Chrome supports the scaling of SVG graphics just like the scaling of other HTML elements.
Tam, V. 2014, Jul 12. Pappus’s Hexagon Theorem. Retrieved from https://vincenttam.github.io/blog/2014/07/12/pappuss-hexagon-theorem/ ↩
MDN. 2014, Feb 23. Transform. Retrieved from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform ↩