@ HTML

svg 要素

Scalable Vector Graphics (SVG) は、2 次元ベクターイメージ用の画像形式のための XML に基づくマークアップ言語です。テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。

矩形画像の描画

svg による矩形画像のマークアップ例を以下に示します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
  <rect x="50" y="50" width="200" height="200" fill="yellow" stroke="black" stroke-width="5" />
</svg>
xmlns=”http://www.w3.org/2000/svg”
HTML 要素との重複を回避するため、xmlns 属性で svg に属する要素であることを宣言
viewBox 属性
表示範囲の座標とサイズを設定
書式:viewBox =(x, y, width, height)
x, y = 左上の座標
width, height = 幅, 高さ
width 属性、height 属性
viewport(表示領域)のサイズ
rect x, y, width, height
rect = 矩形
x = 矩形描画を開始する x 座標
y = 矩形描画を開始する y 座標
width = 矩形の幅
height = 矩形の高さ
fill
塗りつぶしの色
stroke
外形線の色
stroke-width
外形線の幅

img要素・object要素を使ってSVGデータを読み込む

svg を外部ファイルとして作成し、img 要素・object 要素を使って HTML に読み込むことができます。

<img src="images/example-image.svg">
<object data="images/example-image.svg" type="image/svg+xml"></object>

HTMLにインラインで直接書き込む

HTML にsvg 要素で直接記述できます。

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" width="250" height="250">
    <g id="group1" fill="red">
      <rect x="20" y="20" width="100" height="100" />
    </g>
    <g id="group2" fill="none" stroke="black" stroke-width="1">
      <rect x="90" y="90" width="100" height="100" />
      <rect x="100" y="100" width="100" height="100" />
    </g>
    <rect x="10" y="10" width="200" height="200" fill="none" stroke="black" stroke-width="1" />
  </svg>
</body>

CSSで参照する

svg は画像なので、background プロパティで参照できます。

li {
  background: url(images/example-image.svg) no-repeat;
  padding-left: 10px;
}

円形画像とテキストの描画

svg による円形画像とテキストのマークアップ例を以下に示します。

<svg xmlns="http://w3c.org/2000/svg" xlink="http://wc3.org/1999/xlink" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red"></circle>
  <text x="50" y="60" text-anchor="middle" font-size="32" fill="white">text</text>
</svg>