始めましょう

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

<svg version="1.1"
     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 のユーザーはこちらをクリックしてください）

描画プロセスは次のようになります。

1. <svg> ルート要素から始めます。

   • (X)HTML で知られているような doctype 宣言は省略してください。 DTD に基づく SVG 検証は解決する問題よりも多くの問題を引き起こすからです。
   • SVG 2 より前では、他にもバージョンの SVG から識別するために version 属性と baseProfile 属性を常に使用しましょう。 SVG 2 では version 属性も baseProfile 属性も非推奨です。
   • XML の派生として、 SVG は (xmlns 属性で) 正しい名前空間に結び付けなければなりません。名前空間の速修講座に詳細が載っていますのでご覧ください。

2. <rect> で画像領域全体を覆う長方形を描画することで、背景を赤色にします。

3. <circle> で半径が 80px の緑色の円を赤色の長方形の中心（内側に 30+120px、上方に 50+50px のオフセット）に描画します。

4. テキスト "SVG" を描画します。各文字の内側は、白色で塗りつぶします。テキストは、中心点にしたい場所にアンカーを設定することで位置づけられます。この例では、中心点を赤色の長方形の中央と一致させましょう。最終的な仕上がりを確実に美しく保つため、フォントサイズや縦位置の微調整が可能です。

• まず注意すべき重要なことは、要素のレンダリング順序です。 SVG ファイルで一般的に有効なルールとして、後の要素が前の要素の上に描画されます。より後にある要素が、より見えるようになるでしょう。

• ウェブ上の SVG ファイルはブラウザーで直接表示したり、いくつかの方法で HTML ファイルに埋め込んだりすることができます。

  • HTML が XHTML で、かつ application/xhtml+xml 型で配信された場合は、 SVG を XML ソース内に直接埋め込むことができます。

  • SVG は HTML に直接埋め込むことができます。

  • img 要素が使用可能です。

  • object 要素で SVG ファイルを参照することができます。

    html

    <object data="image.svg" type="image/svg+xml"></object>
    

  • 同様に iframe 要素を使用することができます。

    html

    <iframe src="image.svg"></iframe>
    

  • 最後に、 SVG は JavaScript を用いて動的に生成したり、 HTML DOM に挿入したりすることができます。

• SVG が寸法や単位を管理する方法については次のページで説明します。

SVG ファイルには 2 つの種類があります。普通の SVG ファイルは、 SVG マークアップを含むシンプルなテキストファイルです。このファイルの推奨される拡張子は ".svg" （すべて小文字）です。

SVG ファイルは、一部のアプリケーション (例えば、地理情報アプリケーション) で使用される場合、巨大になる可能性があるため、 SVG 仕様書では、 gzip 圧縮された SVG ファイルを使用することも許可しています。これらのファイルに推奨されるファイル名の拡張子は ".svgz" （すべて小文字）です。残念ながら、 Microsoft IIS サーバーから配信される場合、 gzip 圧縮された SVG ファイルを 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.com などのサイトを使用して確認できます。 SVG ファイルのうちの 1 つの URL を送信し、 HTTP レスポンスヘッダーを確認します。サーバーが上記の値のヘッダーを送信していないことがわかったら、ウェブのホスティング業者に連絡してください。 SVG 用のサーバーを正しく設定するように説得しにくい場合は、自分で設定するのも良いかもしれません。簡単な解決策については、 w3.org のサーバー設定ページを参照してください。

サーバーの設定ミスは SVG の読み込みに失敗する理由として非常に一般的です。サーバーが正しいヘッダーを SVG ファイルと一緒に送信するように設定されていない場合、 Firefox はファイルのマークアップをテキストや文字化けしたゴミとして表示したり、ビューアーにアプリケーションを選択して開くように要求したりする可能性が高いです。

• 前のページ
• 次のページ