Firefox 4 と SVG
Firefox 4 における SVG
Firefox 4 の新機能
- HTML の中に直接 SVG を書けるように
- これまでは XML (XHTML) の中のみ
- <img> や CSS の背景画像などに使えるように（なる予定）
- 現在パッチがレビュー中
- Beta 6 (次の次) に入る?
- SVG/SMIL Animation
- その他
- title 要素をツールチップで表示
- text 要素の各文字を回転できるように (rotate 属性)
HTML への SVG の埋め込み
- これまで: XML (XHTML) のみ
- DOCTYPE 宣言が XHTML 1.0/1.1 になっているだけではダメ
- Firefox が XML (XHTML) として認識できる必要
- 名前空間の宣言が必要
- Firefox 4: HTMLのなかにも埋め込める
- HTML にも SVG を直接書ける
- 名前空間接頭辞があると認識されない
- Firefox 3.6 は about:config で html5.enable を true にするとで利用可
- WebKit と IE9 も対応
HTML への SVG の埋め込み (XHTML)
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
...
<!-- 表示されない -->
<svg width="100" height="100">
<a xlink:href="http://www.mozilla.org/">
<rect x="0" y="0" width="100" height="100" fill="blue"/>
</a>
</svg>
<!-- 表示される -->
<svg:svg width="100" height="100">
<svg:a xlink:href="http://www.mozilla.org/">
<svg:rect x="0" y="0" width="100" height="100" fill="green"/>
</svg:a>
</svg:svg>
...HTML への SVG の埋め込み (HTML)
<html xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
...
<!-- 表示される -->
<svg width="100" height="100">
<a xlink:href="http://www.mozilla.org/">
<rect x="0" y="0" width="100" height="100" fill="blue"/>
</a>
</svg>
<!-- 表示されない -->
<svg:svg width="100" height="100">
<svg:a xlink:href="http://www.mozilla.org/">
<svg:rect x="0" y="0" width="100" height="100" fill="green"/>
</svg:a>
</svg:svg>
...HTML への SVG の埋め込み (HTML/XHTML)
<html>
...
<!-- HTML と XHTML のどちらにも使えるマークアップ -->
<svg width="100" height="100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.mozilla.org/">
<rect x="0" y="0" width="100" height="100" fill="blue"/>
</a>
</svg>
...<img> や CSS の背景画像に SVG
- これまで: object や iframe 要素のみ
<object data="support.svg" type="image/svg+xml" ...>... - Firefox 4:
<img src="support.svg" alt="SVG Support Chart">
.slide {
background: url(foxkeh.svg) bottom right no-repeat;
}HTML への SVG の埋め込み
demo?
SVG/SMIL Animation につづく
SVG Text の (未) 実装状況
- W3C SVG 1.1 テストスイートで通らない: 16テスト
- tref 要素: 2 テスト
- bidi: 4 テスト
- 選択: 2 テスト
- CSS プロパティなど: 計 8 テスト
- 縦書き: 3 テスト
- baseline-shift: 2 テスト (パッチあり)
- text-decoration: 2 テスト
- letter-spacing/word-spacing/kerning/textLength: 2 テスト
SVG Fonts の (未) 実装状況
- 未実装
- The Acid3 Test の最後の 3 点
- Bug 119490 – Implement SVG fonts
- パッチはありますが、現在も使えるかは不明
- Mozilla の開発者は WOFF や OTF を推している
SVG Fonts の (未) 実装状況
Robert O'ChallhanSVG Fonts --- at least the subset implemented in Opera and Webkit --- don't offer anything significant over downloadable Opentype (or WOFF) fonts ... except the last three points of the Acid3 test :-(. And people keep asking for it "because it's in SVG 1.1". But I don't think those are good enough reasons on their own to make SVG Fonts an essential part of the Web platform.
SVG のビットマップ画像化
- SVG を img 要素で参照できるようになると……
- ブラウザだけで SVG をビットマップ画像にできる
- canvas の drawImage() に渡せるもの
- Opera: SVG の要素
- WebKit/IE 9/Firefox 4: SVG ファイルを参照した Image オブジェクト
- フォクすけの壁紙メーカーなどのサービスもこの機能を使えばブラウザだけでビットマップ画像を出力できる
- 現在はサーバサイドで SVG から PNG に変換
SVG のビットマップ画像化
- コード例
// svg: SVG 文書のルート svg 要素 // ctx: HTML 5 canvas の 2D コンテクスト try { ctx.drawImage(svg, 0, 0); // for Opera } catch { var text = svg.hasOwnProperty(xml) ? svg.xml : new XMLSerializer().serializeToString(svg); var img = new Image(); img.src = 'data:image/svg+xml;' + encodeURI(xml); ctx.drawImage(img, 0, 0); // for IE 9/WebKit/Firefox 4 } var image = new Image(); image.src = ctx.canvas.toDataURL();