SVG

メインページ > 工学 > 情報工学 > プログラミング > SVG

SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットであり、Webページやアプリケーションなどで利用されます。SVGは、HTMLと同様にブラウザで表示され、CSSやJavaScriptなどと連携して操作することができます。本チュートリアルでは、SVGの基礎的な使い方を紹介します。

前提条件

本チュートリアルに進む前に、以下の前提条件を満たしている必要があります。

Webブラウザを利用できること
HTMLおよびCSSの基本的な知識を持っていること
テキストエディタを利用できること

SVGの基礎

SVGは、座標系を利用してベクター画像を表現します。座標系において、原点（0, 0）からx軸正方向に正の値を持つ座標が増加する右手系が一般的です。

SVGでは、以下のような要素を使用して図形を描画します。

<rect> : 矩形
<circle> : 円
<line> : 直線
<path> : 複雑なパス

これらの要素には、座標やサイズ、色などの属性を設定することができます。

SVGの構文

SVGはXMLベースの言語であるため、HTMLと同様にタグと属性を使用して要素を定義します。以下は、簡単なSVGファイルの例です。

<svg version="1.1"
     baseProfile="full"
     width="100" height="100"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

<circle> 要素は、SVG画像上に描画される円を表します。cx属性とcy属性は円の中心座標を指定し、r属性は半径を指定します。stroke属性は、円周の線の色を指定し、stroke-width属性は線の太さを指定します。fill属性は、円の内部の色を指定します。

id属性: 要素に一意の識別子を割り当てます。
class属性: 要素にスタイルシートから参照されるクラス名を割り当てます。
style属性: 要素にスタイルを直接指定します。
fill属性: 要素の内部の塗りつぶし色を指定します。
stroke属性: 要素の縁取りの色を指定します。
stroke-width属性: 要素の縁取りの太さを指定します。
opacity属性: 要素の不透明度を指定します。
transform属性: 要素を移動、回転、拡大縮小するための変換を指定します。

これらの属性を組み合わせることで、SVG画像を複雑な図形にすることができます。

SVGの例

以下は、SVGを使用した簡単な例です。

<svg version="1.1"
     baseProfile="full"
     width="200" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
  <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="2" fill="none" />
  <line x1="0" y1="0" x2="200" y2="200" stroke="blue" stroke-width="2" />
  <path d="M10 10 L90 90 L180 20" stroke="green" stroke-width="2" fill="none" />
</svg>

この例では、円、矩形、直線、パスを使用して図形を描画しています。それぞれの要素には、cx、cy、r、x、y、width、height、x1、y1、x2、y2、dなどの属性が設定されています。

ブラウザでの外部ファイル表示

SVGは規格と実装との間に差があり、外部ファイルとしてSVGファイルを読み込ませる場合のプログラミングがやや面倒です。（JavaScriptのよう簡単にはいきません。）

ウェブブラウザに外部ファイルとしてSVGファイルを読み込ませたい場合、Firefoxの場合なら、その外部SVGファイルに冒頭に、下記コードのように

名前空間を xmlns="http://www.w3.org/2000/svg" というふうに設定する必要と、

キャンバスサイズをwidthやheight属性などで設定する必要というように、

こういった必要があります。（Windows版のFirefoxの場合、キャンバスサイズをGoogle Chrome と同様に省略できるが（標準設定のサイズになる）、Linuxなど他OSの場合ではキャンバスサイズが必要になる場合もある。ブラウザが同じ「Firefox」でもOSごとに実装が微妙に違う。）

Google Chrome および Microsoft Edge の場合も同様に、名前空間 xmlns="http://www.w3.org/2000/svg" の指定が必要です。（なお Google Chrome および Microsoft Edge の場合、キャンバスサイズの指定がなくても自動でキャンバスサイズの設定が行われる。）

この様に、名前空間などを記述が欠落するとSVGファイルであることがブラウザに伝わらず。希望通り表示できなかったりエラーメッセージを伴う結果と成る。

外部ファイル側のコード例

たとえばファイル名を "test.svg" とする。

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="200">
    <rect x="150" y="40" width="100" height="500" 
     fill="lightblue" stroke="black" stroke-width=" 5" />
</svg>

なお、キャンバスサイズを図形より小さい場合にはハミだしている部分は非表示になります（上記コードでは意図的にハミ出しています）。上記コードは縦長の長方形を表示するコードですがキャンバスサイズをハミ出た下半分は非表示になります。

HTMLファイル側

上記の外部SVGファイルを呼び出すHTMLファイル側は使う要素によって下記のようにマークアップが異なる。

IMAGE要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>外部SVG読み込みテスト</title>
  </head>
  <body>
    <image src="test.svg" type="image/svg+xml">
  </body>
</html>

SVGファイルは画像ファイルなので、IMAGE要素で読み込めます。IMAGE要素ではsrc属性で外部ファイルを指定します。

もしWindowsで、上記コードを実行した場合にブラウザの要素などのタイトルが文字化けする場合、<meta charset="utf-8">を除去してください（Windowsではバージョンによっては文字コードがUTF-8ではなくShift_JISなので）。以下のOBJECT要素などでも同様です。

OBJECT要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>外部SVG読み込みテスト</title>
  </head>
  <body>
    <object data="test.svg" type="image/svg+xml">
  </body>
</html>

OBJECT要素は、オブジェクトデータを記述するためのHTML要素です。 OBJECT要素ではsrc属性に代わってdata属性で外部ファイル指定します。^[1]。

EMBED要素

このほか、EMBED要素を使う方法もある。

<!DOCTYPE html>
<html> 
  <head lang="2">
    <meta charset="utf-8">
    <title>外部SVG読み込みテスト</title>
  </head>
  <body>
    <embed src="test.svg" type="image/svg+xml">
  </body>
</html>

EMBED要素は、埋め込み外部コンテンツ要素を記述するためのHTML要素である。 EMBED要素ではsrc属性で外部ファイル指定します。

画像そのものの記法

四角形

基本

rect要素で表します。^[2]

<svg>
    <rect x="1" y="1" width="100" height="100" 
    fill="#FFFFFF" stroke="#000000" stroke-width="5"/>
</svg>

改行をする必要はありませんが、上記コードでは見やすさを重視してfill属性の手前で改行してあります。

rect要素で最低限必要なのは、位置と幅を指定するための次の4要素です。

x: x座標
y: y座標
width: 横幅
height: 縦幅

rectの不等号のペア(<rect … >)の最後に、下記のように/が必要です。（下記コードの場合、 stroke-width="5" の次の部分。）

    <rect x="1" y="1" width="100" height="100" 
    fill="#FFFFFF" stroke="#000000" stroke-width="5" />

もし、この/が終わりに無いと、ファイルの終端まで</rect>を探すことになります。（長方形以外の、円や線分など他の静止図形のタグでも同様、最後に「/」が必要です。）

なお、下記のように、付随的な要素をstyleでまとめても良い。なお、下記のようにstyleでまとめる記法はCSSに由来するものであり、インラインCSSという記法です。（fillの次の点々はセミコロン、#FFFFFFの次の点々はコロンです。混同しないよう、注意しましょう。）

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: #FFFFFF; stroke: #000000; stroke-width: 5; "/>
</svg>

なお、fillは閉じた領域の塗りつぶしの色です。strokeは、境界線など線分の色です。 fill="#FFFFFF;のFFは16進数です（十進数の255に相当）。

fillを指定しない場合、noneと書いても良いです。

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: none; stroke: #000000; stroke-width: 5; "/>
</svg>

なお、noneの代わりにblueやredと書くと、それぞれの色になります(つまり、HTMLカラーが使えます)。たとえば青色に内側を塗りつぶすなら

<svg>
    <rect x="1" y="1" width="100" height="100" style="fill: blue; stroke: #000000; stroke-width: 5; "/>
</svg>

とも書けます。

色の指定方法

色については rgb(11,11,11)のように0～255の十進数の数値指定で書いてもよいでしょう。つまり、

<svg>
    <rect x="1" y="1" width="100" height="100" 
   fill="rgb(220,220,255)" stroke="rgb(0,0,0)" stroke-width="5 "/>
</svg>

とも書ける。この場合、水色（うすめの青）で塗りつぶしています。

rectに限らず、円や線分など他の図形でも同様に、styleやrgbを使うことができます。

百分率も可能

色の指定は%単位でも可能ですが、rgbの3色すべてに%をつける必要があります。

<svg>
    <rect x="1" y="1" width="100" height="100" 
     fill="rgb(0%,0%,100%)" stroke="rgb(0,0,0)" stroke-width="5 "/>
</svg>

透明化

不透明度アルファ

色はさらに、不透明度アルファを追加したrgba()を使える。ただし、不透明度の値の指定は 0.0 ～ 1.0 の間の数値で行わなければならない。SVGの不透明度は 0 で完全に不透明であり、1 で完全に透明である。

<svg>
    <rect x="50" y="50" width="100" height="100" 
    fill="rgba(255,0,0,1)" stroke="rgba(0,0,0,1)" stroke-width="5 "/>
    
    <rect x="1" y="1" width="100" height="100" 
     fill="rgba(220,220,255,0.7)" stroke="rgba(0,0,0,1)" stroke-width="5 "/>
     
</svg>

rgbaの第4引数は不透明度である。0から1の間で指定する。不透明にしたい場合には値を1にする。この不透明の数値の指定方法は、CSSに由来する方法である。（Inkscapeなどのドローソフトでは不透明度を0～255の数値で指定するものもあるが、ブラウザ版SVGの仕様とは異なるので注意。）

rgba()関数は、0～255までの定義域と、0～1までの定義域とが混在しているので、あまりメンテナンスがしやすくないかもしれません。

透明の属性

rgb()関数でも透明の処理もできるように、属性で fill-opacity という塗りつぶし領域の不透明度を 0.0 ～ 1.0 で指定できる属性がありますので、メンテナンスのしやすさから、不透明度の指定には fill-opacity を使うほうがいいかもしれません。

fill-opacity は 0 で完全に不透明であり、1 で完全に透明である。

<svg>
    <rect x="50" y="50" width="100" height="100" 
    fill-opacity="1.0" fill="rgb(255,0,0 )" stroke="rgb(0,0,0)" stroke-width="5 "/>
    
    <rect x="1" y="1" width="100" height="100" 
    fill-opacity="0.7"  fill="rgb(220,220,255)"  stroke="rgb(0,0,255)" stroke-width="3 "  />
     
</svg>

なお、ストロークの不透明度を指定できる stroke-opacity という属性もあるのですが、あまり実装の性能がよくありません。ハードウェアの事情により、太いストロークを描画する場合に、微妙に表示が崩れてしまう場合があります。

図形の加工

フィレット

図形のカドを丸まらせたい場合（製図の用語で言う「フィレット」）、rxおよびryで丸めの半径を指定できる。

<svg>
    <rect x="1" y="1" width="100" height="100" 
    fill="rgb(255,255,1)" stroke="rgba(0,0,0,1)" stroke-width="5 "
    rx="10" ry="10" />
</svg>

この他、transfrom属性とrotate()関数を使って、斜めに傾いた長方形などの図形を書けます。長方形以外の図形や文字列もrotate()関数に対応しています。

詳しくは、回転の単元で説明します。

円

circle要素で表します。^[3]circleでは、円の形を中心点の座標位置と半径のペアで表します。

<svg>
    <circle cx="1" cy="1" r="100" style="fill: #FFFFFF; stroke: #000000; "/>
</svg>

cx

円の中心点のx座標

cy

円の中心点のy座標

r

半径

多角形

polygon要素で表します。^[4]英語の polygon ポリゴンとは、日本語で「多角形」を意味します。

下記のコード例では座標 (0,100)、(50,0)、(100,100) を結んだ三角形を表示します。

<svg>
    <title>正三角形</title>
    <polygon points="0,100 50,0 100,100"/>
</svg>

points: 各点の座標; 隣りあう点が結ばれる事と、および、始点と終点が結ばれます。

<polygon points="第1点のx座標,y座標  第2点のx座標,y座標  第3点のx座標,y座標"/>

の書式です。

なお、閉じていない単なる折れ線を描画したい場合には、polygon 要素ではなく polyline (ポリライン)要素を使います。

折れ線

polyline (ポリライン)要素で折れ線を書けますが、fill属性およびstroke属性が必要です。どのブラウザでも、fillの指定が無いと、塗りつぶしをしてしまいます。

また、fillをnoneにしたあとは、strokeが設定の無い限りストローク色も無しになってしまい描画されない状態なので、strokeも再設定する必要があります。

<svg>
    <polyline points="0,100
      50,0
      100,100" 
      
      fill="none"
      stroke="black"
    />
    
</svg>

曲がり具合の指定

折れ線の内部の、それぞれの曲がりのある角の箇所での描画方法を指定できます。

線の太さ(stroke-width)の範囲内で、角を丸めるか(round)、尖らすか(miter)、面取り(bevel)をするかを指定できます。

何も指定ない場合には、miterで描画するように設定されています。

SVGのこれらの機能は、あくまで線の太さの範囲内でしか、処理を行えません。（つまり、たとえば製図ソフト AutoCAD のような面取り・フィレットは、SVGのこれらの指定では出来ないです。）また、その折れ線の内部のすべての曲がり箇所で、同様の曲がり具合（あるいは尖り具合）で描画します。

<svg>
    <polyline points="10,100
      50,10
      100,100" 
      
      fill="none"
      stroke="black"
      
      stroke-width="20" stroke-linejoin="round"
      
    />
    
</svg>

stroke-linejoin属性によって、"round"または"miter"または"bevel"を指定します。

破線など

stroke-dasharray(ストローク・ダッシュアレイ)属性を使って、破線などを描くことができます。

書式は

      stroke-dasharray="描く部分の長さ1 描かない部分の長さ1
      描く部分の長さ2 描かない部分の長さ2 "

といったふうに、描く部分と描かない部分との繰り返しです。

<svg>

    <!-- 一点鎖線 -->
    <polyline points="50,40
      300,40" 
      
      fill="none"
      stroke="black"
      
      stroke-dasharray="20 4
      4 4 "
    />
    
    
    <!-- 破線 -->
     <polyline points="50,80
      300,80" 
      
      fill="none"
      stroke="black"
      
      stroke-dasharray="6 3"
    />
    
</svg>

テキストの描画

SVGのTEXT要素は、テキストを描画するために使用されます。具体的には、SVGにテキストを配置するために使用され、さまざまなスタイル、フォント、配置オプションを指定することができます。

以下は、TEXT要素の使い所の例です。

グラフやチャートでラベルを表示する：SVGを使用して、棒グラフや円グラフなどのチャートを作成する場合、テキスト要素を使用して各要素にラベルを付けることができます。これにより、グラフの視覚的な表現がより明確になります。
インフォグラフィックや地図でテキストを使用する：SVGはインフォグラフィックや地図を作成するためにも使用されます。この場合、テキスト要素を使用して、情報を示すテキストを配置することができます。例えば、地図上に都市名を表示することができます。
ロゴやタイトルを表示する：SVGは、Webサイトのロゴやタイトルなどのグラフィックスを作成するためにも使用されます。この場合、テキスト要素を使用して、ブランド名やタイトルを表示することができます。また、さまざまなスタイルやフォントを使用して、テキストの見栄えを改善することもできます。
オンラインアニメーションでテキストを使用する：SVGは、アニメーションを作成するためにも使用されます。この場合、テキスト要素を使用して、アニメーションの一部としてテキストを表示することができます。たとえば、文字列を点滅させたり、スライドイン/アウトさせたりすることができます。

<svg>
    <text x="100" y="60"> テスト </text>
</svg>

x: 文字列の開始位置（左下）のx座標
y: 文字列の開始位置（左下）のy座標

文字列の開始位置は、左下です。左上ではないので、注意してください。

追加の属性として、

font-size でフォントの大きさ、

text-decoration="underline" で下線の追加、

など、設定できます。

例

<svg>
    <text x="100" y="60" font-size="30" text-decoration="underline" > テスト </text>
</svg>

回転

まず、基準の図形として、回転していない図形の描画をしましょう。

<svg>
    <rect x="150" y="80" width="100" height="50" 
    fill="lightblue"  stroke="black"  stroke-width=" 5" />
</svg>

この図形をたとえば斜めに傾かせたい場合、回転させる図形のタグの属性において

transform="rotate(回転角, 回転中心のx座標, y座標)"

の書式で属性を追記することで、回転を指定できます。

角度の単位は、直角を90度とする「度」単位です。（日本なら、小学校で習う角度の単位と同じです。）

なお、座標を指定しない場合、原点を中心として回転します。

<svg>
    <rect id="some" x="150" y="80" width="100" height="50" 
    fill="lightblue"  stroke="black"  stroke-width=" 5" 
    transform="rotate(-10,100,100)"
    />
    
</svg>

たとえば上記コードなら、長方形の右上が10度持ちあがった図形になります。

長方形だけでなく、楕円や折れ線や多角形など他の図形でも、この方法で回転が可能です。

また、textタグの文字列も同様に、この方法で回転が可能です。

構造化

グループ化

g タグを用いて、gタグ内のオブジェクトに共通する属性を一括で記述できます。このような仕組みをSVG用語では一般に「グループ化」といいます。

<svg>
    <g stroke="blue" fill="white" >
        <rect x="1" y="1" width="100" height="100" stroke-width="5" />
        <circle cx="30" cy="30" r="10" stroke-width="3" />
    </g>
</svg>

たとえば上のコードの場合、長方形と円との両方に、ストロ－ク色を青に指定し、内側の塗りつぶし色を白に指定と、一括で指定しています。

各オブジェクトとグループ内要素に矛盾のある場合

なお、各オブジェクトにgタグの指定内容と矛盾する属性がある場合、普通は各オブジェクト側の指定が優先されます。たとえばcircleタグで stroke="red" という指定と、gタグの開始タグで stroke="blue" があれば、円のストローク色は赤色で表示されます。（Firefox, google Chrome, Microsoft Edge どれも結果は同じく、円ストロークだけ赤色の結果です。WindowsだけでなくLinuxでも同様の結果です。）

SVGとCSSとセレクタ

SVGとCSSは、Webページで視覚的なデザインを行うために広く使用されています。CSSは、HTML要素のスタイルを設定することができますが、SVG要素にも同様のスタイルを設定することができます。SVG要素にCSSを適用するには、SVG要素にIDやクラスを割り当て、それらをCSSセレクタで参照する必要があります。

例えば、以下のSVGファイルは、<circle>要素にIDを割り当て、CSSセレクタで参照して、円の色や大きさを変更しています。

<svg width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

<style>
  #myCircle {
    fill: blue;
    r: 20;
  }
</style>

この例では、CSSのセレクタ #myCircle が、IDが myCircle である要素に適用されています。fill プロパティは円の内部の色を設定し、r プロパティは円の半径を変更しています。

SVG要素に適用できるCSSプロパティは、HTML要素に適用できるCSSプロパティと同様です。しかし、SVG要素にはHTML要素にはない独自のプロパティもあります。例えば、stroke-dasharray プロパティは、SVGの線要素に適用することができ、線の点線や破線を設定することができます。

また、SVG要素にCSSを適用することで、SVG要素をアニメーションさせることもできます。例えば、以下のSVGファイルは、RECT要素にクラスを割り当て、CSSでアニメーションを設定しています。

<svg width="200" height="200">
  <rect class="myRect" x="20" y="20" width="60" height="60" fill="red" />
</svg>

<style>
  .myRect {
    animation: move 2s ease-in-out infinite alternate;
  }

  @keyframes move {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(80px, 80px);
    }
  }
</style>

このコードは、CSSアニメーションを使用してSVGの矩形要素をアニメーション化しています。

まず、SVG要素はwidthとheight属性を指定して200x200のキャンバスを作成しています。

そして、rect要素を使用して、赤い色で塗りつぶされた60x60の四角形を作成しています。rect要素にはclass属性があり、その値がmyRectです。

次に、CSSで定義されたmyRectクラスは、animationプロパティを持っています。

このアニメーションは、moveという名前のキーフレームアニメーションを使用しています。

このアニメーションは、transformプロパティを使用して四角形を移動させます。:

最初のキーフレーム（0％）では、四角形は元の位置にあります。最後のキーフレーム（100％）では、四角形は右下に80px移動します。

ease-in-outタイミング関数が使用されているため、アニメーションはゆっくり始まり、ゆっくり終わります。

infinite alternate値がanimationプロパティに追加されているため、アニメーションは無限に繰り返されます。

SVGで付加情報を記述する方法

SVGでは、要素に対してタイトルや解説などの情報を付加することができます。例えば、以下のように記述します。

<svg width="200" height="200">
    <title>矩形の描画</title>
    <desc>SVGでは左上の座標と幅と高さで矩形のジオメトリーを表します</desc>
    
    <rect x="150" y="80" width="100" height="50" fill="lightblue"  stroke="black"  stroke-width="5" />
</svg>

タイトルは、title要素で記述します。一方、解説はdesc要素で表します。これらの要素は、SVG内のどこにでも記述することができますが、一般的にはsvg開始タグの直後に記載するのが慣例です。

ただし、ブラウザによっては、title要素の内容が表示されない場合があります。また、ファイル名に対する情報として表示される場合もあります。

用語集

SVG (Scalable Vector Graphics): XMLベースの2次元ベクターグラフィックス形式。
ベクターグラフィックス (Vector graphics): 座標や数学的方程式によって画像を生成する方法。拡大や縮小が自在で、拡大しても画質が劣化しない。
ラスターグラフィックス (Raster graphics): ピクセル単位で画像を生成する方法。拡大すると画質が劣化する。
XML (eXtensible Markup Language): 構造化されたデータを扱うためのマークアップ言語。
パス (Path): SVGでの形状の描画に使われる基本要素。座標を指定して直線や曲線を描くことができる。
属性 (Attribute): 要素に対して、その性質や特徴を指定するために用いられるもの。例えば、色や座標、大きさなど。
fill: オブジェクトの塗りつぶし色を指定する属性。
stroke: オブジェクトの枠線の色を指定する属性。
stroke-width: オブジェクトの枠線の太さを指定する属性。
viewBox: SVGの描画領域を指定する属性。座標系や拡大率、表示範囲を指定することができる。
transform: オブジェクトの座標変換を指定する属性。例えば、平行移動や回転、拡大縮小などが可能。
gradient: グラデーションを指定する属性。色や透明度を徐々に変化させることができる。
filter: オブジェクトに対してフィルターを適用する属性。ぼかしや色変換などのエフェクトをかけることができる。
clipPath: オブジェクトをクリップするための属性。表示範囲を指定して、オブジェクトを切り抜くことができる。
mask: オブジェクトに対してマスクを適用するための属性。表示範囲を指定して、オブジェクトを隠すことができる。
animate: アニメーションを指定する属性。属性値を時間経過に応じて変化させることができる。

まとめ

SVGは、XMLベースのベクター画像フォーマットであり、Webページやアプリケーションなどで利用されます。SVGを使用することで、高品質でスケーラブルな図形を簡単に作成することができます。SVGはHTMLと同様にタグと属性を使用して要素を定義し、CSSやJavaScriptと組み合わせて操作することができます。

参考文献

W3CのSVGサイト
Scalable Vector Graphics (SVG) 2(C.R.)(2018-10-04)
- SVG Working Group specifications リポジトリー(Github)
Scalable Vector Graphics (SVG) 1.2 Specification(2005-04-13)
- Scalable Vector Graphics (SVG) Tiny 1.2 Specification(2008-12-22)
Scalable Vector Graphics (SVG) 1.1 Specification(2011-08-16)（日本語訳(2003-01-14)）
Scalable Vector Graphics (SVG) 1.0 Specification(2001-09-04)
AdobeのSVGサイト
Mozilla SVG Project - MDC

脚注

^ https://html.spec.whatwg.org/multipage/iframe-embed-object.html#htmlobjectelement HTML Living Standard — HTMLObjectElement
^ https://developer.mozilla.org/ja/docs/Web/SVG/Element/rect
^ https://developer.mozilla.org/ja/docs/Web/SVG/Element/circle
^ https://developer.mozilla.org/ja/docs/Web/SVG/Element/polygon

このページ「SVG」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。

[1] ttps://html.spec.whatwg.org/multipage/iframe-embed-object.html#htmlobjectelement HTML Living Standard — HTMLObjectElement

[mdn:svg:rect-2] ttps://developer.mozilla.org/ja/docs/Web/SVG/Element/rect

[mdn:svg:circle-3] ttps://developer.mozilla.org/ja/docs/Web/SVG/Element/circle

[mdn:svg:polygon-4] ttps://developer.mozilla.org/ja/docs/Web/SVG/Element/polygon

[1]

[2]

[3]

[4]