始めましょう
簡単な例
簡単な例で正しく始めましょう。下のコードを見てください。
xml
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://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
属性を使用するべきです。version
とbaseProfile
の両方の属性を付けることは SVG 2 では非推奨です。 - XML の派生として、 SVG は (xmlns 属性で) 正しい名前空間に結び付けなければなりません。名前空間の速修講座に詳細が載っていますのでご覧ください。
- 画像領域全体を覆う長方形
<rect>
を描画することで、背景を赤色にします。 - 半径が 80px の緑色の円
<circle>
を赤色の長方形の中心に描画します (内側に 30+120px、上方に 50+50px のオフセット)。 - 文字列 "SVG" を描画します。各文字の内側は、白色で塗りつぶします。文字列は、中心点にしたい場所にアンカーを設定することで位置づけられます。この例では、中心点を赤色の長方形の中央と一致させましょう。満足する最終結果を得るように、フォントサイズや上下位置の微調整ができます。
SVG ファイルの基本特性
- まず注意すべき重要なことは、要素のレンダリング順序です。 SVG ファイルで全体的に正当な規則では、後の要素が前の要素の上に描画されます。より後にある要素が、より見えるようになるでしょう。
- ウェブ上の 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" (すべて小文字) です。
SVG ファイルは、一部のアプリケーション (例えば、地理情報アプリケーション) で使用される場合、巨大な大きさに達する可能性があるため、 SVG 仕様書では、 gzip 圧縮された SVG ファイルを使用することも許可しています。これらのファイルに推奨されるファイル名の拡張子は ".svgz" (すべて小文字) です。残念ながら、 Microsoft IIS サーバから提供されている場合、すべての SVG 対応ユーザエージェントで gzip 圧縮された SVG ファイルを確実に動作させるには非常に問題があり、 Firefox は gzip 圧縮された SVG をローカルコンピュータから読み込むことができません。 gzip 圧縮された SVG は、正しくサービスを提供してくれることがわかっているウェブサーバに公開する場合を除いては避けてください (以下を参照)。
ウェブサーバーについて
さて、基本的な SVG ファイルの作成方法がわかったところで、次の段階はウェブサーバにアップロードすることです。この段階ではいくつかの問題があります。通常の SVG ファイルの場合、サーバーは次の HTTP ヘッダーを送信しなければなりません。
Content-Type: image/svg+xml Vary: Accept-Encoding
gzip で圧縮された SVG ファイルの場合は、サーバーは、以下の HTTP ヘッダーを送る必要があります。
Content-Type: image/svg+xml Content-Encoding: gzip Vary: Accept-Encoding
サーバーが SVG ファイルで正しい HTTP ヘッダを送信しているかどうかは、ネットワークモニターパネル や websniffer.cc などのサイトを使用して確認できます。 SVG ファイルのうちの 1 つの URL を送信し、 HTTP レスポンスヘッダーを確認します。サーバーが上記の値のヘッダーを送信していないことがわかったら、ウェブホストに連絡してください。 SVG 用のサーバーを正しく設定するように説得しにくい場合は、自分で設定するのも良いかもしれません。簡単な解決策については、 w3.org のサーバー設定ページを参照してください。
サーバーの設定ミスは SVG の読み込みに失敗する理由として非常に一般的です。サーバーが正しいヘッダーを SVG ファイルと一緒に送信するように設定されていない場合、 Firefox はファイルのマークアップをテキストや文字化けしたゴミとして表示したり、ビューアにアプリケーションを選択して開くように要求したりする可能性が高いです。