始めましょう

簡単な例

簡単な例で正しく始めましょう。下のコードを見てください。

<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 のユーザは こちら をクリックしてください)

svgdemo1.png

レンダリングプロセスは以下のように関わります:

  1. <svg> ルート要素から始めます:
    • (X)HTML で知られる DOCTYPE 宣言はつけないようにしましょう。なぜなら DTD に基づく SVG のバリデーションは、解決することよりも多くの問題を引き起こします。
    • 他のタイプのバリデーション向けに SVG のバージョンを指定するためには、代わりに versionbaseProfile 属性を使用するべきです。 versionbaseProfile の両方の属性を付けることは SVG 2 では非推奨です。
    • XML の派生として、 SVG は (xmlns 属性で) 正しい名前空間に結び付けなければなりません。名前空間の速修講座に詳細が載っていますのでご覧ください。
  2. 画像領域全体を覆う長方形 <rect> を描画することで、背景を赤色にします。
  3. 半径が 80px の緑色の円 <circle> を赤色の長方形の中心に描画します (内側に 30+120px、上方に 50+50px のオフセット)。
  4. 文字列 "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 を処理できないブラウザー向けの代替技術を実装可能にする利点があります。
    このトピックに関する詳細情報については、こちらの専門記事をご覧ください。
  • 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 はファイルのマークアップをテキストや文字化けしたゴミとして表示したり、ビューアにアプリケーションを選択して開くように要求したりする可能性が高いです。