Similar to that of my recent post Added W3C Validated Logos to Some Pages—to get my SVG code validated by W3C.
I’m now using SVGPan for the zoom and drag functionality in SVG
images generated from PDF files which are generated by xelatex
from
$\rm \LaTeX$ source code for TikZ pictures.1
I submited my SVG file to the W3C’s validator, which showed me one error. To illustrate this, I used an sample SVG in the official web site of SVGPan as an example.
Googling for something likes “svg script type” helps. As can be seen,
the last >
is underlined, so I guessed that this kind of
self-closing tags wouldn’t the test. Just like HTML, change this to
<script ...></script>
. From what I’d seen online, I set the type
attribute to text/ecmascript
, and luckily this works.
For valid SVG files which embed SVGPan, the following items are necessary:
<script>
tag with appropriate xlink:href
and type
attributes.Refer to Zooming SVG in Web Browsers in Blog 1 for details. ↩
I included an image with changeable size in a post written about two months ago.
/javascripts/svg-resize-bar.js
.When I browsed any pages except that post which contains the
changeable SVG image, the above TypeError
was thrown.
From the error message TypeError: bar is null
and the filename
svg-resize-bar.js
on the right, an ordinary user who knows how to
write if-else statements should be able to solve this in a few
seconds: surround the part bar.onchange = function () { ... }
by the
if-else statement if (bar != null ) { ... }
.
After I’d written Added W3C Validated Logos to Some Pages, I saw that in the site, there’s still two pages which hadn’t been checked by the W3C’s validators.
To allow SVG fallbacks to text, I viewed the source code for
the SVG example from W3Schools. The fallback message was
simply included inside a <svg>
tag just like a <p>
tag. I applied
this technique to source/downloads/code/SVGViewBox/viewBox1.html
.
Then I uploaded that HTML file to the W3C’s HTML validator, which complained such an inclusion of text.
After that, I googled “svg fallback text” using the encrypted version of the search engine. Luckily, the second answer to the Stack Overflow question, which appeared at the top of the list of search results, is useful.
To get an HTML page which consists of a <foreignObject>
tag inside
an <svg>
tag validated by the W3C HTML validator, it’s obligatory to
specify the dimensions of the <foreignObject>
tag.
I sometimes upload pictures for illustrating ideas. You may see Two Diagrams Illustrating the Isomorphism Extension Theorem in this blog for example.
Enable users to adjust the size of SVG graphics.
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.
To set up a slide bar which controls the size of an SVG image.
Image size: 200
Click “download” to view the sample web page.
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>
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.
How to Scale SVG by Amelia Bellamy-Royds on CSS-Tricks. ↩
viewBox
attribute. I learnt
something from the first search result after googling “svg viewbox”.
It was an article introducing the SVG viewbox. There’s no difficult
concepts in the guide, but I can’t understand it because of the
following claim.1
<svg width="800" height="400" viewBox="0 0 400 200">
This view box covers half the page starting in the upper right hand corner.
I have investigated into this, and I’m dubious about this idea. I’ll illustrate my doubts using two examples. Click “download” at the top right-hand corner to view the result.
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My First SVG</title>
<style type="text/css" media="all">
div.fallback{color:red;}
</style>
</head>
<body>
<h1>My First SVG</h1>
<svg width="800" height="400" viewBox="0 0 800 400">
<rect x="0" y="0" width="400" height="200" fill="red"/>
<rect x="400" y="0" width="400" height="200" fill="blue"/>
<rect x="0" y="200" width="400" height="200" fill="orange"/>
<rect x="400" y="200" width="400" height="200" fill="green"/>
<foreignObject display="none" width="600" height="30">
<div class="fallback">
Sorry, your browser does not support inline SVG.
</div>
</foreignObject>
</svg>
<p>
<a href="//validator.w3.org/check?uri=referer">
<img src="/images/valid-html5.png" alt="Valid HTML 5" 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></p>
</body>
</html>
“The view box covers the entire page”, as expected.
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My First SVG</title>
<style type="text/css" media="all">
div.fallback{color:red;}
</style>
</head>
<body>
<h1>My second SVG</h1>
<svg width="800" height="400" viewBox="0 0 400 200">
<rect x="0" y="0" width="400" height="200" fill="red"/>
<rect x="400" y="0" width="400" height="200" fill="blue"/>
<rect x="0" y="200" width="400" height="200" fill="orange"/>
<rect x="400" y="200" width="400" height="200" fill="green"/>
<foreignObject display="none" width="600" height="30">
<div class="fallback">
Sorry, your browser does not support inline SVG.
</div>
</foreignObject>
</svg>
<p>
<a href="//validator.w3.org/check?uri=referer">
<img src="/images/valid-html5.png" alt="Valid HTML 5" 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></p>
</body>
</html>
This time, the view box only covers the top left-hand corner.
In addition, I’ve found out that changing 0 0 400 200
to 400 200 0 0
doesn’t work.
Ferrara, D. n.d. Viewbox Attribute in SVG: Understanding the SVG Viewbox. Retrieved from http://webdesign.about.com/od/svg/a/svg-viewbox-attribute.htm ↩