Blog 1

Random Talk on Random Thoughts

An Image With Changeable Size

| Comments | ∞

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.

Your browser does not support SVG

Valid SVG 1.1

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

Your browser does not support SVG

Valid SVG 1.1

Example

Click “download” to view the sample web page.

A minimum working example (test.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Testing resizable SVG</title>
<script type="text/javascript">
window.onload = function () {
  bar = document.getElementById("bar");
  bar.onchange = function() {
    val = this.value;
    lbl = document.getElementById("lbl");
    lbl.innerHTML = val;
    obj = document.getElementById("obj");
    obj.height = val;
    obj.width = val;
  }
}
</script>
<!-- Show the border -->
<style type="text/css" media="screen">
.boxed {
  border-style: solid;
  border-width: 1px;
}
</style>
</head>
<body>
<p>
<span>Image size:</span>
<input id="bar" type="range" name="points" min="200" max="800"
value="200" step="10">
<span id="lbl">200</span>
</p>
<object id="obj" class="boxed" type="image/svg+xml" data="IET.svg"
  width="200" height="200">
  Your browser does not support SVG.
</object>
<p>
<a href="//validator.w3.org/check?uri=referer"><img
  src="/images/valid-html401.png" alt="Valid HTML 4.01 Strict"
  height="31" width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a>
<a
href="https://validator.w3.org/check?uri=https://vincenttam.github.io/downloads/code/resizable/IET.svg;ss=1"><img
src="/images/valid-svg11.png" alt="Valid SVG 1.1" height="31"
width="88">
</a></p>
</body>
</html>

Discussion

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.

  1. How to Scale SVG by Amelia Bellamy-Royds on CSS-Tricks. ↩

Comments