# An Image With Changeable Size

## Background

I sometimes upload pictures for illustrating ideas. You may see Two Diagrams Illustrating the Isomorphism Extension Theorem in this blog for example.

## Motivation

Enable users to adjust the size of SVG graphics.

## Problem

In the linked post, if the zoom level is too large, then part of the image will be hidden.

This is quite inconvenient for users who want a whole picture.

## Goal

To set up a slide bar which controls the size of an SVG image.

Image size: 200

## Example

Initially, due to my laziness, I used the same SVG image as the one in the section “Problem”. Even though the height and width of the SVG image were increased, the diagram didn’t. Moreover, it’s inconvenient to manually increase the size of the picture by both adjusting the knob and moving the mouse wheel. As a result, I googled “html scale svg” and found a long article which I didn’t really read.1 I just saw the word “viewport” and realized that the SVG image in the section “Problem” had been processed with steps described in Zooming SVG in Web Browsers for incorporating the special functionalities of SVGPan in this blog. Therefore, generating the SVG file for the $\rm \LaTeX$ source code again, I finally succeeded in getting the contents of the image enlarged.