HTML5 での SVG (Scalable Vector Graphics)

基本的な概念と使い方

SVG (Scalable Vector Graphics) はベクター・グラフィックスの 1 つです。SVG には JPEG や GIF、PNG などのラスター・グラフィックスよりも優れている点がいくつかあります。この記事では、まず HTML5 での SVG の基本的な概念と使い方について説明し、続いて描画の方法、フィルターとグラデーションの適用方法、テキストの生成方法、そして Web ページに SVG の XML を追加する方法を説明します。

Jeremy J. Wischusen, Web Application Architect, Binary Neuron L.L.C.

Jeremy Wischusen photoJeremy Wischusen は 13 年以上にわたって Purple Communications、myYearbook.com、HBO などの顧客向けに Web サイトやアプリケーションを設計してきており、Flash、Flex、jQuery、PHP、MySQL、MSSQL、PostgreSQL を使用したフロントエンド・システムとバックエンド・システムの両方を構築してきました。彼は Wyeth Pharmaceuticals、The Vanguard Group、Bucks County Community College、The University of the Arts などの顧客に対し、Web デザイン、Flash、ActionScript を教えた経験があります。



2012年 3月 01日

はじめに

SVG (Scalable Vector Graphics) はベクター・ベースのグラフィックスの 1 つです。ラスター・ベースのグラフィックスでは各ピクセルの色の定義をデータ配列に保存しますが、SVG はラスター・ベースのグラフィックスとは異なります。現在 Web で最も一般的に使用されているラスター・ベースのフォーマットは JPEG、GIF、PNG であり、これらのフォーマットにはそれぞれ長所と短所があります。

頻繁に使用される略語

  • CSS: Cascading Style Sheets
  • GIF: Graphics Interchange Format
  • GUI: Graphical User Interface
  • HTML: HyperText Markup Language
  • JPEG: Joint Photographic Experts Group
  • PNG: Portable Network Graphics
  • SVG: Scalable Vector Graphics
  • XML: Extensible Markup Language

SVG にはラスター・ベースのフォーマットに比べ、以下に挙げるような点で優れています。

  • SVG グラフィックスは数式を使用して作成されるため、個々のピクセルのデータを保存する必要がなく、ソース・ファイルに保存するデータを非常に少なくすることができます。
  • ベクター画像は拡大/縮小しても適切な画像が保たれます。Web 上のラスター画像をオリジナルのサイズから拡大しようとすると、歪んだ (おかしなピクセルの) 画像になってしまいます。

    オリジナルのピクセル・データは特定のサイズ用に設計されています。その画像が元のサイズではなくなると、その画像を表示するプログラムは、新しいピクセルを埋めるためにどんなデータを使えばよいのかを推測します。ベクター画像はより柔軟に対応できるため、画像のサイズが変更されると、その変更に合わせて数式が調整されます

  • ソース・ファイルのサイズはラスター画像よりも小さくなる傾向があるため、SVG グラフィックスはラスター画像よりもロードが速く、使用する帯域幅も小さくなります。
  • SVG 画像はブラウザーによって描画され、プログラムで描画することができます。SVG 画像は動的に変更できるため、チャートなど、データ駆動型のアプリケーションに特に適しています。
  • SVG 画像のソース・ファイルはテキスト・ベースのファイルです。そのため利用しやすく、また検索エンジンに対応させることもできます。

この記事では、SVG フォーマットのメリットについて、また HTML5 で Web を設計する場合に SVG フォーマットがどのように役立つかについて説明します。


SVG の基本

SVG グラフィックスを作成する場合、作成のプロセスは JPEG、GIF、PNG といったファイルの作成プロセスとまったく異なります。通常、JPEG、GIF、PNG などのファイルは Adobe Photoshop などの画像編集プログラムを使用して作成されます。SVG 画像は通常、XML ベースの言語を使用して作成されます。SVG を編集するための GUI を利用すれば、その SVG のベースとなる XML が生成されますが、この記事では XML を直接扱うものとします。SVG の編集プログラムに関する詳しい情報は、「参考文献」を参照してください。

リスト 1 に、2 ピクセルの黒枠がついた赤い円を描く単純な SVG XML ファイルの例を示します。

リスト 1. SVG XML ファイル
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle  cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red" />
</svg>

上記のコードによって図 1 の図形が描画されます。

図 1. 2 ピクセルの黒枠がついた赤い円
2 ピクセルの黒枠がついた赤い円

基本的な形状を作成する

SVG グラフィックスでは XML タグを使用して形状を作成します。そのために使われる XML 要素を表 1 に示します。

表 1. SVG グラフィックスを作成するための XML 要素
要素説明
line単純な線を作成します。
polyline複数の線分の定義で構成された形状を定義します。
rect四角形を作成します。
circle円を作成します。
ellipse楕円を作成します。
polygonポリゴンを作成します。
path任意のパスを定義することができます。

line 要素

line 要素は基本的な描画要素です。リスト 2 に水平線を作成する方法を示します。

リスト 2. 水平線を作成する
<svg xmlns="http://www.w3.org/2000/svg" version='1.1'
 width="100%" height="100%" >
   <line x1='25' y1="150" x2='300' y2='150'
           style='stroke:red;stroke-width:10'/>
 </svg>

リスト 2 のコードによって図 2 の図形が描画されます。

図 2. 基本的な水平線
均一な赤の水平線

ルートの svg タグには width 属性と height 属性が含まれ、これらの属性によって描画に利用可能なキャンバスの領域が定義されます。この width 属性と height 属性の機能は、他の HTML 要素の width 属性と height 属性に似ています。この場合には、利用可能な領域すべてを使用するようにキャンバスが設定されます。

この例では style タグも使用しています。SVG グラフィックスでは、さまざまな方法でグラフィックス・コンテンツにスタイルを設定することができます。この記事では、スタイルを目立たせるためや、図形の描画に特定の属性 (線の色や幅など) が必要な場合に、スタイルを使用しています。SVG グラフィックスのスタイル設定については「参考文献」を参照してください。

線の定義を作成するためには、キャンバスとの相対位置として始点と終点の x 座標と y 座標を定義します。x1 属性と y1 属性は始点の座標であり、x2 属性と y2 属性は終点の座標です。線の向きを変えるためには、単純に座標を変更します。例えば、先ほどの例を変更すると、図 3 のような斜めの線を作成することができます。

リスト 3. 斜めの線を作成する
                <svg xmlns="http://www.w3.org/2000/svg" version='1.1'
                width="100%" height="100%" >
                    <line x1="0" y1="0" x2="200" y2="200"
                        style='stroke:red;stroke-width:10'/>
                </svg>

図 3 はリスト 3 のコードを描画した結果を示しています。

図 3. 斜めの線
赤い斜めの線

polyline 要素

ポリラインは複数の線分の定義で構成される図形です。リスト 4 の例は階段のように見える図形を作成します。

リスト 4. ポリラインによる階段を作成する
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         style="fill:white;stroke:red;stroke-width:4"/>
</svg>

リスト 4 のコードによって図 4 の図形が描画されます。

図 4. ポリラインによる階段
階段のように見える赤い線

ポリラインを作成するためには、points 属性を使用して、コンマで区切られた x 座標と y 座標のペアを複数定義します。上記の例では、最初の点は 0,40 と定義され、0 は x の値で 40 は y の値です。点が 1 つしか定義されていない場合は、SVG レンダラーに開始点を伝えるだけとなるため、画面上に何かを描画するには不十分です。少なくとも、始点と終点の 2 つを定義する必要があります (例えば points="0,40 40,40” など)。

単純な 1 本の線を描画する場合と同様で、ポリラインを構成する線分は、厳密に水平または垂直である必要はありません。先ほどの例の値を変更してリスト 5 のようにすると、不規則な線分で構成される形状を作成することができます。

リスト 5. 不規則な線を作成する
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
         style="fill:white;stroke:red;stroke-width:3"/>
</svg>

リスト 5 のコードによって描画された図形を図 5 に示します。

図 5. 不規則な線
左上から右下に向かって何回か異なる方向に折れ曲がった赤い線

rect 要素

四角形を作成するには、単純に幅と高さを定義します (リスト 6)。

リスト 6. 四角形を作成する
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" version='1.1'>
    <rect width="300" height="100"
          style="fill:red"/>
</svg>

リスト 6 のコードによって図 6 の図形が描画されます。

図 6. 四角形
赤い四角形

rect タグを使用して正方形を作成することもできます。正方形は単に高さと幅が同じ値の四角形にすぎません。

circle 要素

円を作成するには、円の中心の x 座標と y 座標、そして半径を定義します (リスト 7)。

リスト 7. 円を作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" fill="red"/>
</svg>

リスト 7 のコードによって図 7 の図形が描画されます。

図 7. 円
赤で塗りつぶされた円

cx 属性と cy 属性は、描画キャンバスとの相対位置として円の中心を定義します。半径は円の幅の半分なので、半径を定義する際には円全体の幅が半径の倍になることを忘れないでください。

ellipse 要素

楕円は基本的に円と似ていますが、コードに 2 つの半径が定義されている点が異なります (リスト 8)。

リスト 8. 楕円を作成する
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/>
                </svg>

リスト 8 のコードによって図 8 の図形が描画されます。

図 8. 楕円
赤で塗りつぶされた楕円

この場合も cx 属性と cy 属性はキャンバスとの相対位置として中心の座標を定義します。ただし楕円の場合には、x 軸に対する半径と y 軸に対する半径を rx 属性と ry 属性を使用して定義します。

polygon 要素

ポリゴンは少なくとも 3 つの辺を持つ形状です。リスト 9 は単純な三角形を作成するコードです。

リスト 9 三角形を作成する
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polygon points="200,10 250,190 160,210"
                        style="fill:red;stroke:black;stroke-width:1"/>
                </svg>

リスト 9 のコードによって図 9 の図形が描画されます。

図 9. 三角形のポリゴン
赤で塗りつぶされた三角形のポリゴン

polyline 要素の場合と同様、ポリゴンを作成するためには、ポリゴンを定義する x 座標と y 座標のペアを points 属性を使用して定義します。

x と y のペアを追加することで、任意の数の辺を持つポリゴンを作成することができます。先ほどの例を変更すると、四角形のポリゴンを作成することができます (リスト 10)。

リスト 10. 四角形のポリゴンを作成する
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polygon points="220,10 300,210 170,250 123,234"
                        style="fill:red;stroke:black;stroke-width:1"/>
                </svg>

リスト 10 のコードによって図 10 の図形が描画されます。

図 10. 四角形のポリゴン
赤で塗りつぶされた四角形のポリゴン

polygon タグを使用して複雑な形状を作成することもできます。リスト 11 は星形の図形を作成します。

リスト 11. 星形を作成する
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="100,10 40,180 190,60 10,60 160,180 100,10"
            style="fill:red;stroke:black;stroke-width:1"/>
</svg>

リスト 11 のコードによって図 11 の図形が描画されます。

図 11. 星形のポリゴン
赤で塗りつぶされた星形のポリゴン

path 要素

path 要素はすべての描画要素の中で最も複雑です。path 要素と一連の特殊コマンドを使用すると、任意の図形を作成することができます。path 要素は表 2 のコマンドをサポートしています。

表 2. path 要素がサポートするコマンド
コマンド説明
M指定位置まで移動します
L指定位置まで線を描画します
H指定位置まで水平線を描画します
V指定位置まで垂直線を描画します
C指定位置まで曲線を描画します
S指定位置まで滑らかな曲線を描画します
Q指定位置まで 2 次ベジェ曲線を描画します
T指定位置まで滑らかな 2 次ベジェ曲線を描画します
A指定位置まで楕円の弧を描画します
Z指定位置でパスを閉じます

これらのコマンドは大文字または小文字で使用することができます。コマンドが大文字の場合には絶対位置が適用されます。コマンドが小文字の場合には相対位置が適用されます。この記事ではすべてのコマンドについての例を示すことはしませんが、以下の例でコマンドの基本的な使い方を説明します。

path 要素を使用すると、この記事のこれまでの例で示した単純な形状のいずれかを作成することもできます。リスト 12 は path 要素を使用して基本的な三角形を作成します。

リスト 12. path 要素を使用して三角形を作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" style="fill:red"/>
</svg>

リスト 12 のコードによって図 12 の図形が描画されます。

図 12. path 要素を使用した三角形
赤で塗りつぶされた三角形

一連のコマンドは d 属性を使用して定義されています。この例では、「指定位置まで移動」コマンド (M150 0) で定義されているように、x 座標 150、y 座標 0 で描画が始まっています。そして「指定位置まで線を描画」コマンド (L75 200) を使用して x 座標 75、y 座標 200 まで線を描画しています。次に、別の「指定位置まで線を描画」コマンド (L225 200) を使用して別の線を描画しています。最後に、「指定位置で閉じる」コマンド (Z) を使用して図形を閉じています。Z コマンドには座標が指定されていません。これはパスを閉じるという動作の定義上、現在の位置から描画の開始点 (この場合は x = 150 y =0) に戻る線を描画することになるからです。

このようにして描画したのは基本的な例を示すためです。単純な三角形が必要なだけであれば polygon タグを使用するのが適切です。

path 要素の真の強力さはリスト 13 のようにカスタム形状を作成できる点にあります。この例は W3C (World Wide Web Consortium) の文書である Scalable Vector Graphics (SVG) 1.1 (Second Edition) から引用したものです (「参考文献」を参照)。

リスト 13. path 要素を使用してカスタム形状を作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
                fill="red" stroke="blue" stroke-width="5"/>
       <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
                 fill="yellow" stroke="blue" stroke-width="5"/>
       <path d="M600,350 l 50,-25
                 a25,25 -30 0,1 50,-25 l 50,-25
                 a25,50 -30 0,1 50,-25 l 50,-25
                 a25,75 -30 0,1 50,-25 l 50,-25
                 a25,100 -30 0,1 50,-25 l 50,-25"
                 fill="none" stroke="red" stroke-width="5"/>
</svg>

リスト 13 のコードによって図 13 の図形が描画されます。

図 13. path 要素を使用したカスタム形状
1/4 が分離されている円グラフと、ところどころが隆起した直線

path 要素を使用するとチャートや波線などの複雑な図形を作成することができます。この例で複数の path 要素を使用していることに注意してください。図形を作成する際、ルート SVG タグ内に作成できる図形要素は 1 つに限定されるわけではありません。


フィルターとグラデーション

ここまで数多くの例で示した基本的な CSS スタイル設定の他に、SVG グラフィックスにはフィルターとグラデーションも使用することができます。このセクションでは SVG による図形にフィルターとグラデーションを適用する方法を学びます。

フィルター

フィルターを使用して SVG グラフィックスに特殊効果を適用することができます。SVG は以下のフィルターをサポートしています。

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

これらのフィルターの使い方の詳細は「参考文献」を参照してください。

リスト 14 では、四角形に適用するためのドロップ・シャドウ効果を作成します。

リスト 14. 四角形に対するドロップ・シャドウ効果を作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          <defs>
                   <filter id="f1" x="0" y="0"
                             width="200%" height="200%">
                         <feOffset result="offOut" in="SourceAlpha"
                              dx="20" dy="20"/>
                         <feGaussianBlur result="blurOut"
                               in="offOut" stdDeviation="10"/>
                         <feBlend in="SourceGraphic"
                                in2="blurOut" mode="normal"/>
                    </filter>
         </defs>
          <rect width="90" height="90" stroke="green"
                   stroke-width="3" fill="yellow" filter="url(#f1)"/>
</svg>

リスト 14 のコードによって図 14 の図形が描画されます。

図 14. 四角形に対するドロップ・シャドウ効果
黄色の四角形があり、背景に黒のドロップ・シャドウがついています

フィルターは (定義をするための) defs 要素の中で定義します。この例ではフィルターに id="f1" を割り当てています。filter タグそのものには、x 座標と y 座標を定義する属性、そしてフィルターの幅と高さを定義する属性が含まれています。filter タグの中で、必要なフィルター要素を使用し、それらのフィルター要素のプロパティーを必要な値に設定します。

フィルターを定義したら、上記の rect 要素を見るとわかるように、filter 属性を使用してそのフィルターを特定の図形と関連付けます。url の値はフィルターに割り当てた id 属性の値に設定します。

グラデーション

グラデーションというのは、ある色から別の色へと徐々に色が変化することです。グラデーションには、線形グラデーションと円形グラデーションという 2 つの基本的な形式があります。どちらのタイプのグラデーションを適用するかは、どの要素を使用するかによって決まります。以下の 2 つの例は楕円に線形グラデーションを適用した場合と円形グラデーションを適用した場合を示しています。

リスト 15 は線形グラデーションがついた楕円を作成します。

リスト 15. 線形グラデーションがついた楕円を作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <defs>
            <linearGradient id="grad1" x1="0%" y1="0%"
                     x2="100%" y2="0%">
           <stop offset="0%"
                     style="stop-color:rgb(255,255,0);stop-opacity:1"/>
           <stop offset="100%"
                     style="stop-color:rgb(255,0,0);stop-opacity:1"/>
           </linearGradient>
         </defs>
         <ellipse cx="200" cy="70" rx="85" ry="55"
                        fill="url(#grad1)"/>
</svg>

リスト 15 のコードによって図 15 の図形が描画されます。

図 15. 線形グラデーションがついた楕円
左から右へ黄色からオレンジ色に変化するグラデーションがついた楕円

リスト 16 は円形グラデーションがついた楕円を作成します。

リスト 16. 円形グラデーションがついた楕円を作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
             <defs>
                     <radialGradient id="grad1" cx="50%" cy="50%"
                            r="50%" fx="50%" fy="50%">
                     <stop offset="0%"
                            style="stop-color:rgb(255,255,255);stop-opacity:0"/>
                     <stop offset="100%"
                            style="stop-color:rgb(255,0,0);stop-opacity:1"/>
                     </radialGradient>
             </defs>
             <ellipse cx="200" cy="70" rx="85" ry="55"
                     fill="url(#grad1)"/>
</svg>

リスト 16 のコードによって図 16 の図形が描画されます。

図 16. 円形グラデーションがついた楕円
外側から内側へ赤から白に変化するグラデーションがついた楕円

フィルターの場合と同様、グラデーションも defs 要素の中で定義します。それぞれのグラデーションには id が割り当てられます。グラデーションの属性 (色など) はグラデーションのタグ内で stop 要素を使用して設定されます。図形にグラデーションを適用するためには、fill 属性の url の値を該当するグラデーションの id に設定します。


テキストと SVG

基本的な形状の他に、SVG を使用してテキストを生成することもできます (リスト 17)。

リスト 17. SVG でテキストを作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <text x="0" y="15" fill="red">I love SVG</text>
</svg>

リスト 17 のコードによって図 17 の図形が描画されます。

図 17. SVG によるテキスト
「I love SVG」と書かれたテキスト

この例は text 要素を使用して「I love SVG」という文を作成しています。text 要素を使用する場合には、実際に表示するテキストを text 要素の開始タグと終了タグで囲みます。

無数の軸に沿ってテキストを表示することができ、さらにはパスに沿ってテキストを表示することもできます。リスト 18 は円弧状のパスに沿ってテキストを表示します。

リスト 18. 円弧状のパスに沿ってテキストを作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
                  <path id="path1" d="M75,20 a1,1 0 0,0 100,0"/>
        </defs>
        <text x="10" y="100" style="fill:red;">
                   <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
         </text>
</svg>

リスト 18 のコードによって図 18 の図形が描画されます。

図 18. 円弧状のパスに沿って表示されたテキスト
円弧に沿って「I love SVG」というテキストが表示されています

この例では、ルートの SVG タグに xlink という別の XML 名前空間が追加されています。テキストを円弧状にするためのパスは defs 要素の中で作成されているため、実際にはパスが図形の一部として描画されることはありません。表示対象のテキストは textPath 要素の中にネストされており、この textPath 要素が xlink 名前空間を使用して所望のパスの id を参照しています。

他の SVG による図形の場合と同様、テキストにもフィルターやグラデーションを適用することができます。リスト 19 はテキストにフィルターとグラデーションを適用しています。

リスト 19. フィルターとグラデーションが適用されたテキストを作成する
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
                    <radialGradient id="grad1" cx="50%" cy="50%"
                           r="50%" fx="50%" fy="50%">
                           <stop offset="0%"
                                style="stop-color:red; stop-opacity:0"/>
                           <stop offset="100%"
                               style="stop-color:rgb(0,0,0);stop-opacity:1"/>
                    </radialGradient>
                    <filter id="f1" x="0" y="0"
                               width="200%" height="200%">
                           <feOffset result="offOut"
                               in="SourceAlpha" dx="20" dy="20"/>
                           <feGaussianBlur result="blurOut"
                               in="offOut" stdDeviation="10"/>
                           <feBlend in="SourceGraphic"
                               in2="blurOut" mode="normal"/>
                    </filter>
          </defs>
          <text x="10" y="100" style="fill:url(#grad1); font-size: 30px;"
                        filter="url(#f1)">
                        I love SVG I love SVG
          </text>
</svg>

リスト 19 のコードによって図 19 の図形が描画されます。

図 19. フィルターとグラデーションが適用されたテキスト
「I love SVG」というテキストが水平線に沿って表示されており、テキストには外側から中心に向かって黒から灰色へと変化するグラデーションがついています

Web ページに SVG の XML を追加する

SVG の XML を作成すると、その XML をいくつかの方法で HTML ページに含めることができます。最初の方法は HTML 文書の中に SVG の XML を直接埋め込む方法です (リスト 20)。

リスト 20. HTML 文書の中に SVG の XML を直接埋め込む
<html>
     <head>
             <title>Embedded SVG</title>
     </head>
     <body style="height: 600px;width: 100%; padding: 30px;">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="100" cy="50" r="40" fill="red"/>
              </svg>
     </body>
</html>

これはおそらく最も単純な方法だと思いますが、あまり再利用はできません。.svg 拡張子を使用して SVG の XML ファイルを保存できることを思い出してください。SVG による図形を .svg ファイルに保存すると、embed 要素、object 要素、iframe 要素を使用してその図形をページ内に含めることができます。リスト 21 は embed 要素を使用して SVG の XML ファイルを含めるためのコードを示しています。

リスト 21. embed 要素を使用して SVG の XML ファイルを含める
<embed src="circle.svg" type="image/svg+xml" />

リスト 22 は object 要素を使用して SVG の XML ファイルを含める方法を示しています。

リスト 22. object 要素を使用して SVG の XML ファイルを含める
<object data="circle.svg" type="image/svg+xml"></object>

リスト 23 は iframe 要素を使用して SVG の XML ファイルを含めるためのコードを示しています。

リスト 23. iframe 要素を使用して SVG の XML ファイルを含める
<iframe src="circle1.svg"></iframe>

これらの方法の 1 つを使用すると、同じ SVG による図形を複数のページに含めることができ、.svg ソース・ファイルを編集することで、この図形を更新することができます。


まとめ

この記事では、まず SVG フォーマットを使用して図形を作成するための基本事項について説明しました。続いて、SVG に組み込まれている幾何要素 (線、四角形、円など) を使用して基本的な形状を作成する方法と、path 要素を使用して一連のコマンド (指定位置まで移動、指定位置まで線を描画、指定位置まで弧を描画、など) を発行し、複雑な図形を作成する方法を説明しました。さらにこの記事では、テキスト図形を含む SVG による図形にフィルターとグラデーションを適用する方法と、HTML ページに SVG グラフィックスを含める方法についても説明しました。

参考文献

学ぶために

  • ベクター・グラフィックス用のエディター: ウィキペディアのリストを参考に、SVG を編集するプログラムを試してみてください。
  • W3C の Scalable Vector Graphics (SVG) 1.1 (Second Edition) の「スタイル付け」は、SVG グラフィックスのスタイル設定について詳細に解説しています。
  • W3C の Scalable Vector Graphics (SVG) 1.1 (Second Edition) の「パス」は、SVG のパスの使い方について詳細に解説しています。
  • W3C の Scalable Vector Graphics (SVG) 1.1 (Second Edition) の「フィルタ効果」は、この記事で取り上げたフィルターについて詳細に解説しています。
  • Render dynamic graphs in SVG」(developerWorks、2004年10月): 内容に合わせて動的にスケーリングされる SVG グラフの作成方法を解説しています。
  • ウィキペディアの Scalable Vector Graphics (スケーラブル・ベクター・グラフィックス) の項目には SVG の背景が説明されています。
  • W3C の SVG 1.1/1.2/2.0 Requirements は今後のバージョンの SVG 言語の設計原則と要件について解説しています。
  • Scalable Vector Graphics: この W3C のサイトを訪れてください。
  • SVG Tutorial: w3schools のインタラクティブ・チュートリアルで SVG について学んでください。
  • 入門 HTML5 プログラミング』は SVG で描画する例を解説しています。
  • developerWorks の XML ゾーンを訪れてください。DTD、スキーマ、XSLT など、XML の領域でのスキルを磨くためのリソースが豊富に用意されています。XML 技術文書一覧に用意された、さまざまな技術記事やヒント、チュートリアル、技術標準、IBM Redbooks を見てください。
  • IBM XML certification: XML および関連技術において IBM 認定技術者になる方法を参照してください。
  • developerWorks の Technical events and webcasts: これらのセッションで最新情報を入手してください。
  • developerWorks on Twitter: 今すぐ Twitter に参加して developerWorks のツイートをフォローしてください。
  • developerWorks podcasts: ソフトウェア開発者のための興味深いインタビューや議論を聞いてください。
  • developerWorks On demand demos: 初心者のための製品インストール方法やセットアップのデモから、上級開発者のための高度な機能に至るまで、多様な話題が解説されています。

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, XML
ArticleID=795523
ArticleTitle=HTML5 での SVG (Scalable Vector Graphics)
publish-date=03012012