実験環境:
- iPhone 3GS
- Mobile Safari on iOS 4.3
- Mobile Safari on iOS 5.0

普通にHTMLの中にインラインSVGを埋め込んでも iOS 4.3 だとテキストしか出ない(SVG部分が描画されてないみたい)。
たぶん、これは Webページの HTTP ヘッダの Content-Type が text/html だから。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG Sample (Content-Type: text/html)

ちなみに iOS 5.0 だと Content-Type: text/html でもちゃんと表示された。

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG Sample (Content-Type: text/html)

HTMLコードはこんな感じ。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Inline SVG Sample</title>
</head>
<body>
<h1>Inline SVG Sample</h1>
<svg id="mysvg1" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polyline class="oresen" id="oresen1" points="0,0 100,150 250,30 0,0" stroke="#ff0000" stroke-width="10" opacity="0.5" fill="none"></polyline>
<polygon class="takakkei" id="takakkei1" points="0,0 80,110 200,130 180,80 0,0" stroke="#0000ff" stroke-width="5" fill="#00ff00" opacity="0.5"></polygon>
<text class="moji" id="moji1" x="10" y="30" font-family="serif" font-size="50px" font-style="normal" opacity="0.5">Boom! ブーン!</text>
<path class="pathoresen" id="pathoresen1" d="M 10,210 L 150,280 L 250,290" stroke="#0000ff" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
<path class="pathtakakkei" id="pathtakakkei1" d="M 30,230 L 120,290 L 220,290z" stroke="#ff0000" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="#ffff00" fill-opacity="0.5"></path>
<ellipse class="daen" id="daen1" cx="60" cy="170" rx="50" ry="50" stroke="#ff0000" stroke-width="1" stroke-opacity="0.5" fill="#ffff00" fill-opacity="0.5"></ellipse>
</svg>
</body>
</html>

ほんのちょっと試しに中身を変えずに拡張子を *.xml ファイルにして置いてみたら Content-Type が application/xml になって、レイアウトが変だったけどなんとか描画されかけてた。やっぱ content type の問題の可能性あり。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG Sample (Content-Type: application/xml)

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG Sample (Content-Type: application/xml)

試しに中身を変えずに拡張子を *.xhtml ファイルにしてみた。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG Sample (Content-Type: application/xhtml+xml)

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG Sample (Content-Type: application/xhtml+xml)

次は SVG + CSS の実験。

こんな感じの HTML コード。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Inline SVG and CSS Sample</title>
<style>
<!--
.oresen {
	stroke: #0000ff;
	stroke-width: 1;
	fill: none;
}
.takakkei {
	stroke: #ff0000;
	stroke-width: 1;
	fill: #ffff00;
}
.moji {
	font-family: sans-serif;
	font-size: 30px;
	font-style: italic;
}
.pathoresen {
	stroke: #00ff00;
	stroke-width: 3;
	stroke-opacity: 0.7;
	stroke-linecap: square;
	stroke-linejoin: square;
	fill: none;
	cursor: pointer;
}
.pathtakakkei {
	stroke: #0000ff;
	stroke-width: 3;
	stroke-opacity: 0.7;
	stroke-linecap: butt;
	stroke-linejoin: butt;
	fill: #ff00ff;
	fill-opacity: 0.7;
	cursor: pointer;
}
.daen {
	stroke: #0000ff;
	stroke-width: 3;
	stroke-opacity: 0.7;
	fill: #ff00ff;
	fill-opacity: 0.7;
}
#oresen1 {
	stroke: #ff0000;
	stroke-width: 10;
	opacity: 0.5;
	cursor: pointer;
}
#takakkei1 {
	stroke: #0000ff;
	stroke-width: 5;
	fill: #00ff00;
	opacity: 0.5;
	cursor: crosshair;
}
#moji1 {
	font-family: serif;
	font-size: 50px;
	font-style: normal;
	opacity: 0.5;
	cursor: wait;
}
#pathoresen1 {
	stroke: #0000ff;
	stroke-width: 5;
	stroke-opacity: 0.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	cursor: help;
}
#pathtakakkei1 {
	stroke: #ff0000;
	stroke-width: 5;
	stroke-opacity: 0.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: #ffff00;
	fill-opacity: 0.5;
	cursor: progress;
}
#daen1 {
	stroke: #ff0000;
	stroke-width: 1;
	stroke-opacity: 0.5;
	fill: #ffff00;
	fill-opacity: 0.5;
	cursor: n-resize;
}
-->
</style>
</head>
<body>
<h1>Inline SVG and CSS Sample</h1>
<svg id="mysvg1" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polyline class="oresen" id="oresen1" points="0,0 100,150 250,30 0,0"></polyline>
<polygon class="takakkei" id="takakkei1" points="0,0 80,110 200,130 180,80 0,0"></polygon>
<text class="moji" id="moji1" x="10" y="30">Boom! ブーン!</text>
<path class="pathoresen" id="pathoresen1" d="M 10,210 L 150,280 L 250,290"></path>
<path class="pathtakakkei" id="pathtakakkei1" d="M 30,230 L 120,290 L 220,290z"></path>
<ellipse class="daen" id="daen1" cx="60" cy="170" rx="50" ry="50"></ellipse>
</svg>
<svg id="mysvg2" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polyline class="oresen" id="oresen2" points="0,0 100,150 250,30 0,0" />
<polygon class="takakkei" id="takakkei2" points="0,0 80,110 200,130 180,80 0,0" />
<text class="moji" id="moji2" x="10" y="30">Boom! ブーン!</text>
<path class="pathoresen" id="pathoresen2" d="M 10,210 L 150,280 L 250,290"></path>
<path class="pathtakakkei" id="pathtakakkei2" d="M 30,230 L 120,290 L 220,290z"></path>
<ellipse class="daen" id="daen2" cx="60" cy="170" rx="50" ry="50"></ellipse>
</svg>
<svg id="mysvg3" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polyline class="oresen" id="oresen3" points="0,0 100,150 250,30 0,0" />
<polygon class="takakkei" id="takakkei3" points="0,0 80,110 200,130 180,80 0,0" />
<text class="moji" id="moji3" x="10" y="30">Boom! ブーン!</text>
<path class="pathoresen" id="pathoresen3" d="M 10,210 L 150,280 L 250,290"></path>
<path class="pathtakakkei" id="pathtakakkei3" d="M 30,230 L 120,290 L 220,290z"></path>
<ellipse class="daen" id="daen3" cx="60" cy="170" rx="50" ry="50"></ellipse>
</svg>
</body>
</html>

Content-Type: text/html では、やはり iOS 4.3 はテキストしか表示されない。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG and CSS Sample (Content-Type: text/html)

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG and CSS Sample (Content-Type: text/html)

Content-Type: application/xml にしてみたらなぜか iOS 4.3 でも iOS 5.0 でも色が真っ黒。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG and CSS Sample (Content-Type: application/xml)

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG and CSS Sample (Content-Type: application/xml)

Content-Type: application/xhtml+xml でも iOS 4.3, iOS 5.0 ともに真っ黒。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG and CSS Sample (Content-Type: application/xhtml+xml)

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG and CSS Sample (Content-Type: application/xhtml+xml)

次は動的に JavaScript で SVG 要素を生成してみる。
SVGタグの文字列を innerHTML に入れるだけ。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Inline SVG Sample, JavaScript and DOM#innerHTML</title>
<script>
 
function  build_svg(){
	var svg = ''
		+ '<svg id="mysvg1" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">'
		+ '<polyline class="oresen" id="oresen1" points="0,0 100,150 250,30 0,0" stroke="#ff0000" stroke-width="10" opacity="0.5" fill="none"></polyline>'
		+ '<polygon class="takakkei" id="takakkei1" points="0,0 80,110 200,130 180,80 0,0" stroke="#0000ff" stroke-width="5" fill="#00ff00" opacity="0.5"></polygon>'
		+ '<text class="moji" id="moji1" x="10" y="30" font-family="serif" font-size="50px" font-style="normal" opacity="0.5">Boom! ブーン!</text>'
		+ '<path class="pathoresen" id="pathoresen1" d="M 10,210 L 150,280 L 250,290" stroke="#0000ff" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>'
		+ '<path class="pathtakakkei" id="pathtakakkei1" d="M 30,230 L 120,290 L 220,290z" stroke="#ff0000" stroke-width="5" stroke-opacity="0.5" stroke-linecap="round" stroke-linejoin="round" fill="#ffff00" fill-opacity="0.5"></path>'
		+ '<ellipse class="daen" id="daen1" cx="60" cy="170" rx="50" ry="50" stroke="#ff0000" stroke-width="1" stroke-opacity="0.5" fill="#ffff00" fill-opacity="0.5"></ellipse>'
		+ '</svg>';
	document.getElementById('block1').innerHTML = svg;
}
 
window.onload = build_svg;
 
</script>
</head>
<body>
<h1>Inline SVG Sample, JavaScript and DOM#innerHTML</h1>
<div id="block1"></div>
</body>
</html>

iOS 4.3 はダメだけど、 iOS 5.0 は表示できた。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG Sample, JavaScript and DOM#innerHTML

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG Sample, JavaScript and DOM#innerHTML

次も同じように動的に JavaScript で SVG 要素を生成してみる。
ただし、さっきのようなSVGタグの文字列を作るのではなく、createElementNS で SVG の DOM オブジェクトを作る。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title>Inline SVG Sample, JavaScript and createElementNS</title>
<script>
 
function build_svg(){
	try{
		var block1 = document.getElementById('block1');
 
		var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
		svg.setAttribute('id', 'http://www.w3.org/2000/svg');
		svg.setAttribute('width', '300');
		svg.setAttribute('height', '300');
		svg.setAttribute('viewBox', '0 0 300 300');
 
		var oresen = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
		oresen.setAttribute('class', 'pathtakakkei');
		oresen.setAttribute('class', 'oresen');
		oresen.setAttribute('id', 'oresen1');
		oresen.setAttribute('points', '0,0 100,150 250,30 0,0');
		oresen.setAttribute('stroke', '#ff0000');
		oresen.setAttribute('stroke-width', '10');
		oresen.setAttribute('opacity', '0.5');
		oresen.setAttribute('fill', 'none');
 
		var takakkei = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
		takakkei.setAttribute('class', 'takakkei');
		takakkei.setAttribute('id', 'takakkei1');
		takakkei.setAttribute('points', '0,0 80,110 200,130 180,80 0,0');
		takakkei.setAttribute('stroke', '#0000ff');
		takakkei.setAttribute('stroke-width', '5');
		takakkei.setAttribute('fill', '#00ff00');
		takakkei.setAttribute('opacity', '0.5');
 
		var moji = document.createElementNS('http://www.w3.org/2000/svg', 'text');
		moji.setAttribute('class', 'moji');
		moji.setAttribute('id', 'moji1');
		moji.setAttribute('x', '10');
		moji.setAttribute('y', '30');
		moji.setAttribute('font-family', 'serif');
		moji.setAttribute('font-size', '50px');
		moji.setAttribute('font-style', 'normal');
		moji.setAttribute('opacity', '0.5');
		moji.appendChild(document.createTextNode('Boom! ブーン!'));
 
		var pathoresen = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		pathoresen.setAttribute('class', 'pathoresen');
		pathoresen.setAttribute('id', 'pathoresen1');
		pathoresen.setAttribute('d', 'M 10,210 L 150,280 L 250,290');
		pathoresen.setAttribute('stroke', '#0000ff');
		pathoresen.setAttribute('stroke-width', '5');
		pathoresen.setAttribute('stroke-opacity', '0.5');
		pathoresen.setAttribute('stroke-linecap', 'round');
		pathoresen.setAttribute('stroke-linejoin', 'round');
		pathoresen.setAttribute('fill', 'none');
 
		var pathtakakkei = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		pathtakakkei.setAttribute('class', 'pathtakakkei');
		pathtakakkei.setAttribute('id', 'pathtakakkei1');
		pathtakakkei.setAttribute('d', 'M 30,230 L 120,290 L 220,290z');
		pathtakakkei.setAttribute('stroke', '#ff0000');
		pathtakakkei.setAttribute('stroke-width', '5');
		pathtakakkei.setAttribute('stroke-opacity', '0.5');
		pathtakakkei.setAttribute('stroke-linecap', 'round');
		pathtakakkei.setAttribute('stroke-linejoin', 'round');
		pathtakakkei.setAttribute('fill', '#ffff00');
		pathtakakkei.setAttribute('fill-opacity', '0.5');
 
		var daen = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
		daen.setAttribute('class', 'daen');
		daen.setAttribute('id', 'daen1');
		daen.setAttribute('cx', '60');
		daen.setAttribute('cy', '170');
		daen.setAttribute('rx', '50');
		daen.setAttribute('ry', '30');
		daen.setAttribute('stroke', '#ff0000');
		daen.setAttribute('stroke-width', '1');
		daen.setAttribute('stroke-opacity', '0.5');
		daen.setAttribute('fill', '#ffff00');
		daen.setAttribute('fill-opacity', '0.5');
 
		block1.appendChild(svg);
		svg.appendChild(pathtakakkei);
		svg.appendChild(oresen);
		svg.appendChild(takakkei);
		svg.appendChild(moji);
		svg.appendChild(pathoresen);
		svg.appendChild(pathtakakkei);
		svg.appendChild(daen);
	}catch(e){
		alert(e);
	}
}
 
window.onload = build_svg;
 
</script>
</head>
<body>
<h1>Inline SVG Sample, JavaScript and createElementNS</h1>
<div id="block1"></div>
</body>
</html>

これでやっと Content-Type: text/html でも iOS 4.3 も iOS 5.0 も Inline SVG を表示することができた。

iOS 4.3:
Inline SVG on iOS 4.3
Inline SVG Sample, JavaScript and createElementNS

iOS 5.0:
Inline SVG on iOS 5.0
Inline SVG Sample, JavaScript and createElementNS

とりあえずここまで。

あ。。。

Miscellaneous new stuff

Inline SVG in text/html

text/html

って情報をみつけたり。
iOS 5.0 からは静的な Inline SVG が Content-Type: text/html でも OK よ、という情報。

Ref.
- W3C SVG Working Group
- Proposals/SVG in text-html - SVG
- SVGInTextHTML - HTML WG Wiki

tags: svg iphone

Posted by NI-Lab. (@nilab)