HTMLにSVG画像を埋め込むサンプル

（あやめの図） コンピュータ
出典：国立国会図書館「NDLイメージバンク」 (https://rnavi.ndl.go.jp/imagebank/)

SVG要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>SVGのサンプル</title>
  </head>
  <body>
    <svg x="100" y="100" width="256" height="256" style="background-color: transparent">

    </svg>
  </body>
</html>

座標(x:0,y:0)幅と高さが(width:256,height:256)背景が透過するSVG画像

直線

<line x1="0" y1="0" x2="255" y2="255" stroke="black" stroke-width="2" />

座標(x1:0,y1:0)から座標(x2:255,y2:255)へ色がblackの幅が2の直線を引く。

矩形

<rect x="64" y="64" width="128" height="128" stroke="black" fill="white" stroke-width="2" />

幅:128高さ128の黒色で幅2の枠線で囲まれた矩形。内部は白色で塗りつぶす。

ノートのページ

円

<circle cx="128" cy="128" r="64" stroke="black" stroke-width="2", fill="white" />

円の中心の座標(cx:128,cy:128)円の半径(r=128)

二重丸

<circle cx="128" cy="128" r="64" stroke="black" stroke-width="2", fill="white" />
<circle cx="128" cy="128" r="32" stroke="black" stroke-width="2", fill="white" />

楕円

<ellipse cx="128" cy="128" rx="64" ry="32" stroke="black" fill="white" stroke-width="2" />

x軸方向の半径:(rx:64)y軸方向の半径(ry:32)

図形の回転

<svg width="256" height="256" style="background-color: transparent">
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(0, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(15, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(30, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(45, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(60, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(75, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(90, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(105, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(120, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(135, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(150, 128, 128)" />
  <ellipse cx="128" cy="128" rx="32" ry="64" stroke="black" fill="transparent" stroke-width="2" transform="rotate(165, 128, 128)" />
</svg>

transformのrotate(角度,中心のx座標,中心のy座標)で図形が回転します。

多角形

<polygon points="128 64, 196 128, 128 192, 64 128" stroke="black" fill="white" stroke-width="2" />

pointsに多角形の角にあたる座標を複数セットします。

再生

<polygon points="64 64, 164 128, 64 192" stroke="black" fill="white" stroke-width="2" />

逆再生

<polygon points="64 64, 164 128, 64 192" stroke="black" fill="black" stroke-width="2" transform="scale(-1,1),translate(-256,0)"/>

scale()でx軸方向に-1倍することで反転しtranslate()でx軸に-256移動しています

コメント