簡単な例
簡単な例で正しく始めましょう。下のコードを見てください。
<svg version="1.1"
baseProfile="full"
xmlns="https://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
コードをコピーして、ファイル demo1.svg に貼り付けましょう。そして、ファイルを Firefox で開いてください。これは、下のスクリーンショットを表示するようレンダリングします。(Firefox のユーザは こちら をクリックしてください)
レンダリングプロセスは以下のように関わります:
svgルート要素から始めます:- (X)HTML で知られる DOCTYPE 宣言はつけないようにしましょう。なぜなら DTD に基づく SVG のバリデーションは、解決することよりも多くの問題を引き起こします。
- 他のタイプのバリデーション向けに SVG のバージョンを指定するためには、代わりに
versionやbaseProfile属性を使用するべきです。 - XML の派生として SVG は、(xmlns 属性で) 正しい名前空間にバインドしなければなりません。名前空間の速修講座に詳細が載っていますのでご覧ください。
- 画像領域全体を覆う長方形
<rect/>を描画することで、背景を赤色にします。 - 半径が 80px の緑色の円
<circle/>を赤色の長方形の中心に描画します (内側に 30+120px、上方に 50+50px のオフセット)。 - 文字列 "SVG" を描画します。各文字の内側は、白色で塗りつぶします。文字列は、中心点にしたい場所にアンカーを設定することで位置づけられます。この例では、中心点を赤色の長方形の中央と一致させましょう。満足する最終結果を得るように、フォントサイズや上下位置の微調整ができます。
SVG ファイルの基本特性
- まず注意すべき重要なことは、要素のレンダリング順序です。SVG ファイルで全体的に正当な規則では、後の要素が前の要素の上に描画されます。より後にある要素が、より見えるようになるでしょう。
- Web 上の SVG ファイルはブラウザで直接表示されるか、いくつかの方法で HTML ファイルに埋め込まれます:
- HTML が XHTML で、かつ
application/xhtml+xmlタイプで渡された場合は、SVG を XML ソース内に直接埋め込むことができます。 - HTML が HTML5 で、かつブラウザが HTML5 に対応する場合は、同様に SVG を直接埋め込むことができます。ただし、HTML5 の仕様に適合するよう文法を変えることが必要でしょう。
object要素で SVG ファイルを参照することができます:<object data="image.svg" type="image/svg+xml" />
- 同様に
iframe要素を使用することができます:<iframe src="image.svg"></iframe>
- 理論上は
img要素も使用できます。ただし、Firefox 4.0 より前ではこの方法が動作しません。 - 最終的に SVG は JavaScript を用いて動的に生成したり、HTML DOM に注入したりすることができます。これは SVG を処理できないブラウザ向けの代替技術を実装可能にする利点があります。
- HTML が XHTML で、かつ
- SVG がどのようにサイズやユニットを管理するかについては次のページで説明します。
SVG ファイルの種類
SVG ファイルは、2 つ型の種類があります。普通の SVG ファイルは、SVG マークアップを含むシンプルなテキストファイルです。このファイルの推奨させる拡張子は、".svg" (すべて小文字) です。
アプリケーション (GIS 等) で SVG ファイルを使うと大きなファイルサイズになる可能性があります。SVG の仕様では、gzip で圧縮された SVG ファイルも許されています。このファイルの推奨される拡張子は ".svgz" (すべて小文字) です。不幸にも gzip で圧縮された SVG ファイルを Microsoft IIS から SVG を扱えるクライアントで読み込むには大変な問題があります。そして、Firefox は、ローカルコンピュータから gzip で圧縮された SVG ファイルを読むことが出来ません。正しく動いている Webserver で公開する以外に gzip で圧縮された SVG ファイルを使うのは避けてください。(下を見てください)
Webサーバについて
もう、あなたは、基本的な SVG ファイルをどのように作成するか知っています。次の段階は、Web サーバにアップロードすることです。とはいってもこの段階には、やりがいがあります。サーバは、SVGファイルに以下のHTTPヘッダーを送るべきです:
Content-Type: image/svg+xml
gzip で圧縮された SVG ファイルには、サーバは、以下の HTTP ヘッダーを送るべきです:
Content-Type: image/svg+xml Content-Encoding: gzip
web-sniffer.net のようなサイトを使ってあなたのサーバが、正しい HTTP ヘッダーを送っているか確認できます。あなたのサーバの SVG ファイルの URL を入力して送ってきた HTTP ヘッダーの内容を見てください。もし、あなたのサーバが上に書かれたヘッダーを送っていないのを見つけたら、サーバ管理者に相談してください。もし、サーバ管理者が、SVG について正しいサーバの設定が正確にわからない場合、あなた自身が設定をするのも良いかもしれません。単純なパターンならば server configuration page の、設定方法が参考に出来ます。
サーバの設定間違いは、SVG の読み込み失敗の理由としてとても一般的です。あなた自身で確認してください。もし、あなたのサーバが、SVG ファイルに対して正しいヘッダーを送るよう設定されていない場合、Firefox は、高い確率でマークアップされたテキストファイルのように表示します。もしくは、文字化けしたテキストのように表示するか、どのアプリケーションで開くか聞くウインドウを表示します。