-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathinlinesvg.html
77 lines (67 loc) · 4.3 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
<!doctype html>
<meta charset="utf-8">
<title>HTML5とインラインSVG</title>
<meta name="description" content="HTML5から、HTML文書に直接SVGの要素を記述できるようになりました。「インラインSVG」などと呼ばれているこの機能について簡単に紹介します。">
<link rel="stylesheet" href="lilium.css">
<link rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">
<script>
if (!!document.addEventListener) {
document.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>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26017405-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<body>
<h1>HTML5とインラインSVG</h1>
<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 #ddd; 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 #ddd; 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 #ddd; background: #fff">
<circle cx="135" cy="90" r="54" style="fill: #b22"></circle>
</svg>
<svg width="270" height="180" style="border: 1px solid #ddd; 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>、<a href="http://www.opera.com/browser/">Opera 11.60</a>、<a href="http://microsoft.com/ie">Internet Explorer 10</a>以降のバージョンで搭載されています。また、<a href="http://www.microsoft.com/ie9">IE9</a>はHTML5パーサを搭載していないものの、インラインSVGの表示に対応しています。
<p>モバイル端末のブラウザについては、Android 3.0以降のAndroid標準ブラウザ、iOS 5以降のSafari、Chrome for Android, Firefox for Android, OperaがHTML5パーサを搭載しているため、インラインSVGを表示可能です。Windows Phone 7.5以降もIE9ベースのエンジンを搭載しているので、インラインSVGに対応しているものと考えられます。
</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>
<p class=update>Update: October 27, 2013
</footer>