/
inlinesvg.html
86 lines (76 loc) · 4.21 KB
/
inlinesvg.html
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<meta charset=utf-8>
<title>インラインSVG</title>
<link rel=stylesheet href="lilium.css">
<link rel=license href="http://creativecommons.org/licenses/by-nc/3.0/">
<script>
// word count
if (!!window.addEventListener) {
window.addEventListener('DOMContentLoaded', function () {
var e = document.querySelectorAll('p, li, dd, h1, h2, h3');
var v;
var l = e.length;
while (l--) {
v += e[l].textContent;
}
v.replace(/\n|\r|\s|\v/g, '');
document.querySelector('h1').innerHTML += ' <span style="font-size: 70%">(' + v.length + ')</span>';
}, false);
}
</script>
<script>
if (!!window.addEventListener) {
window.addEventListener('DOMContentLoaded', function () {
var sec = document.querySelectorAll('body > section[id]');
var h = document.querySelectorAll('body > section[id] > h2:first-of-type');
var toc = '';
var l = sec.length;
while (l--) {
toc = '<li><a href="#' + sec[l].id + '">' + h[l].innerHTML + '</a>' + toc;
}
var nav = document.createElement('nav');
nav.innerHTML = '<h2>目次</h2><ol>' + toc + '</ol>';
document.body.insertBefore(nav, sec[0]);
}, false);
}
</script>
<body>
<h1>インラインSVG</h1>
<!-- last-modified: 2011-08-27 -->
<p>HTML5では、HTML文書中に直接SVGを書けるようになりました。これは「インラインSVG」や“SVG in HTML”, “SVG in text/html”などと呼ばれています。
<section id=sample>
<h2>インラインSVGのサンプル</h2>
<p>ここでは、<a href="inlinesvg/hinomaru.svg">日の丸 (hinomaru.svg)</a>と<a href="inlinesvg/tricolour.svg">トリコロール (tricolour.svg)</a>を直接HTML文書に書き込んでいます。インラインSVGに対応するブラウザであれば、ソースコードの後にSVGが表示されます。
<figure>
<pre><code><svg width=270 height=180 style="border: 1px solid #eee; background: #fff">
<circle cx=135 cy=90 r=54 style="fill: #b22"></circle>
</svg></code></pre>
<pre><code><svg width=270 height=180 style="border: 1px solid #eee; background: #fff">
<rect x=0 y=0 width=90 height=180 style="fill: #33b"></rect>
<rect x=180 y=0 width=90 height=180 style="fill: #d33"></rect>
</svg></code></pre>
</figure>
<figure>
<svg width=270 height=180 style="border: 1px solid #eee; background: #fff">
<circle cx=135 cy=90 r=54 style="fill: #b22"></circle>
</svg>
<svg width=270 height=180 style="border: 1px solid #eee; background: #fff">
<rect x=0 y=0 width=90 height=180 style="fill: #33b"></rect>
<rect x=180 y=0 width=90 height=180 style="fill: #d33"></rect>
</svg>
</figure>
</section>
<section id=browser-support>
<h2>ブラウザの対応状況</h2>
<p>インラインSVGはHTML5パーサを搭載するブラウザで表示できます。HTML5パーサは、<a href="http://www.google.com/chrome">Chrome 7</a>以降、<a href="http://mozilla.com/firefox/">Firefox 4</a>以降、<a href="http://www.apple.com/safari/">Safari 5.1</a>以降のバージョンに搭載されています。Operaは2011年10月現在、最新版ではHTML5パーサを搭載していませんが、<a href="http://my.opera.com/ODIN/blog/2011/10/13/opera-12-alpha-released">開発中のOpera 12.00でHTML5パーサを搭載</a>しています。
<p><a href="http://www.microsoft.com/ie9">IE9</a>はHTML5パーサを搭載していないものの、インラインSVGの表示に対応しています。なお現在開発中のIE10では、<a href="http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx">HTML5パーサのアルゴリズムにより近づける</a>ようです。
</section>
<section id=forcesvg>
<h2>Force SVGで擬似対応</h2>
<p>インラインSVGに対応していないブラウザでも、SVGに対応していれば<a href="http://berjon.com/hacks/force-svg/">Force SVG</a>というライブラリを利用することで擬似的に対応できます。
<p class=XXX>todo: Modernizrと組み合わせた説明を書く。
</section>
<p class=XXX>issue: xlink:hrefと書かないとダメとか、IE9ではなぜかOKとか、SVG2では可能になるはずとか、そういうのは書く？
<footer>
<address><a rel=author href="http://profiles.google.com/masataka.yakura">Masataka Yakura</a></address>
</footer>