SVGの基本(使い方, 主な図形, CSSでスタイルづけ)

2022/11/26

SVGは、XMLベースのマークアップ言語です。Canvasがラスター(ビットマップ)形式であるのに対して、SVGはベクタ形式になります。ここでは、SVGの基本的な使い方について確認します。

使い方

SVGファイルの基本

illustratorなどで書き出したSVGファイルを確認するとわかりますが、SVGファイルは下記のようなXML形式のコードで記述されています。

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="400"
  height="200"
  viewBox="0 0 400 200">
  <!-- 描画したい図形を書く -->
</svg>

svg要素内に描画したい図形のコードを記述します。

viewBox属性はSVG内の描画領域( x座標y座標幅高さ)を表します。

width属性height属性viewBox属性の関係を理解するための例を示します。

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="200"
  height="150"
  viewBox="0 0 4 3">
  <rect width="1" height="3" x="0" fill="#222584"/>
  <rect width="2" height="1" x="1" fill="#00904a"/>
  <rect width="1" height="2" x="3" fill="#edc600"/>
</svg>

結果は以下のようになります。

WebでSVGを利用する方法

1. 外部のSVGを利用

HTMLの imgタグのsrc属性 で指定できます。

<img
  src="xxx.svg"
  width="100"
  height="100">

CSSの background-imageプロパティ で指定できます。

#target {
  background-image: url("xxx.svg");
}

2. インラインで埋め込む

HTML5からsvgタグを利用してインラインで埋め込むことができます。

<!DOCTYPE html>
<html>
  <head>
    <title>xxxxx</title>
  </head>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="400"
      height="200"
      viewBox="0 0 400 200">
      <!-- 描画したい図形を書く -->
    </svg>
  </body>
</html>

SVG要素｜主な描画可能要素

circle｜円

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <circle cx="100" cy="50" r="30"/>
</svg>

「中心座標( cx , cy )＝(50, 50)」「半径( r )=40」の円です。

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/circle
- https://triple-underscore.github.io/SVG11/shapes.html#CircleElement

ellipse｜楕円

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <ellipse cx="100" cy="50" rx="50" ry="25"/>
</svg>

「中心座標( cx , cy )＝(50, 50)」「X軸半径( rx )=50」「Y軸半径( ry )=25」の楕円です。

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/ellipse
- https://triple-underscore.github.io/SVG11/shapes.html#EllipseElement

line｜直線

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <line x1="20" y1="80" x2="180" y2="20" style="stroke:#000;stroke-width:5"/>
</svg>

「座標( x1, y1 )」から「座標( x2 , y2 )」までの直線

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/line
- https://triple-underscore.github.io/SVG11/shapes.html#LineElement

rect｜四角形

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 0 400 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50"/>
  <rect x="250" y="25" width="100" height="50" rx="10" ry="30"/>
</svg>

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/rect
- https://triple-underscore.github.io/SVG11/shapes.html#RectElement

polyline｜一連の直線

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <polyline points="0,50 50,100 100,50 150,0 200,50" style="fill:#FFF;stroke:#000;stroke-width:5" />
</svg>

下記座標を通る直線です。
「座標1(x1, y1) = (0, 50)」
「座標2(x2, y2) = (50, 100)」
「座標3(x3, y3) = (100, 50)」
「座標4(x4, y4) = (150, 0)」
「座標5(x5, y5) = (200, 50)」

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/polyline
- https://triple-underscore.github.io/SVG11/shapes.html#PolylineElement

polygon｜多角形

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <polygon points="0,50 50,100 100,50 150,0 200,50" style="fill:#fff;stroke:#000;stroke-width:5"/>
</svg>

下記座標を通ります。始点と終点にも直線が引かれて多角形になります。
「座標1(x1, y1) = (0, 50)」
「座標2(x2, y2) = (50, 100)」
「座標3(x3, y3) = (100, 50)」
「座標4(x4, y4) = (150, 0)」
「座標5(x5, y5) = (200, 50)」

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/polygon
- https://triple-underscore.github.io/SVG11/shapes.html#PolygonElement

path｜パス

例1

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <path d="M20,50 L60,80 L100,50 L140,20 L180,50" fill="none" stroke="#000" stroke-width="3"/>
  <circle cx="20" cy="50" r="5"/>
  <circle cx="60" cy="80" r="5"/>
  <circle cx="100" cy="50" r="5"/>
  <circle cx="140" cy="20" r="5"/>
  <circle cx="180" cy="50" r="5"/>
</svg>

pathの始点を (20, 50) に移動( M:moveto )して、直線( L60,80 L100,50 L140,20 L180,50 )を描画してます。

例2

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <path d="M20,50 Q60,80 100,50 T180,50" fill="none" stroke="#000" stroke-width="3"/>
  <circle cx="20" cy="50" r="5"/>
  <circle cx="60" cy="80" r="5"/>
  <circle cx="100" cy="50" r="5"/>
  <circle cx="140" cy="20" r="5"/>
  <circle cx="180" cy="50" r="5"/>
</svg>

pathの始点を (20, 50) に移動( M:moveto )して、二次ベジェ曲線を描画してます。

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/path
- https://triple-underscore.github.io/SVG11/paths.html

text｜テキスト

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <text x="0" y="100" font-family="sans-serif" font-size="30">
    わくわく
  </text>
  <text x="120" y="100" font-family="sans-serif" font-size="30" fill="#55acee">
    Bank.
  </text>
</svg>

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/text
- https://triple-underscore.github.io/SVG11/text.html#TextElement

image｜ラスタ画像

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <image xlink:href="/icon.png" x="0" y="50" height="50" width="200"/>
</svg>

矩形の第一頂点座標( x , y )にラスタ画像を表示してます。

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
- https://triple-underscore.github.io/SVG11/struct.html#ImageElement

SVG要素｜構造

g｜グルーピング

svg内では <div> を利用できないので <g> を利用してグルーピングします。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" style="background-color: #ccc">
  <g stroke="black" fill="white" fill-opacity="0.5" stroke-width="1">
    <circle cx="100" cy="70" r="50"/>
    <circle cx="70" cy="130" r="50"/>
    <circle cx="130" cy="130" r="50"/>
  </g>
</svg>

defs, use｜再利用

<defs> で定義した内容を <use> で参照できます。

例1

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <defs>
    <path id="path1" d="M20,50 Q60,80 100,50 T180,50" fill="none" stroke="#000" stroke-width="3"/>
  </defs>
  <use x="-10" y="-20" xlink:href="#path1"></use>
  <use x="0" y="0" xlink:href="#path1"></use>
  <use x="10" y="20" xlink:href="#path1"></use>
</svg>

例2

グラデーション作成にも利用されます。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100" style="background-color: #ccc">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#e66465"/>
      <stop offset="100%" stop-color="#9198e5"/>
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="80" fill="url(#gradient)"/>
</svg>

CSSでSVGにスタイルをつける

CSSでSVGにスタイルをつけることもできます。

SVGにスタイルをつける時に注意が必要なのは、background-color border の代わりに fill stroke を利用するという点です。

参考
- https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Fills_and_Strokes#CSS_%E3%81%AE%E5%88%A9%E7%94%A8
- https://www.w3.org/TR/SVG/propidx.html

fill｜塗り

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50" style="fill: aquamarine"/>
  <rect x="250" y="25" width="100" height="50" style="fill: #800"/>
  <rect x="450" y="25" width="100" height="50" style="fill: #e0e"/>
</svg>

fill-opacity｜塗りの透明度

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50" style="fill: #800; fill-opacity: .8"/>
  <rect x="250" y="25" width="100" height="50" style="fill: #800; fill-opacity: .5"/>
  <rect x="450" y="25" width="100" height="50" style="fill: #800; fill-opacity: .1"/>
</svg>

stroke｜線

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50" style="fill: #fff; stroke: aquamarine;"/>
  <rect x="250" y="25" width="100" height="50" style="fill: #fff; stroke: #800;"/>
  <rect x="450" y="25" width="100" height="50" style="fill: #fff; stroke: #e0e;"/>
</svg>

stroke-width｜線の幅

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50" style="fill: #fff; stroke: #800; stroke-width: 10"/>
  <rect x="250" y="25" width="100" height="50" style="fill: #fff; stroke: #800; stroke-width: 5"/>
  <rect x="450" y="25" width="100" height="50" style="fill: #fff; stroke: #800; stroke-width: 0"/>
</svg>

stroke-opacity｜線の透明度

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50"
        style="fill: #777; stroke: #800; stroke-width: 10; stroke-opacity: .8"/>
  <rect x="250" y="25" width="100" height="50"
        style="fill: #777; stroke: #800; stroke-width: 10;stroke-opacity: .5"/>
  <rect x="450" y="25" width="100" height="50"
        style="fill: #777; stroke: #800; stroke-width: 10;stroke-opacity: .1"/>
</svg>

stroke-dasharray｜破線の間隔

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <rect x="50" y="25" width="100" height="50"
        style="fill: #fff;stroke: #800;stroke-dasharray: 2"/>
  <rect x="250" y="25" width="100" height="50"
        style="fill: #fff;stroke: #800;stroke-dasharray: 4"/>
  <rect x="450" y="25" width="100" height="50"
        style="fill: #fff;stroke: #800;stroke-dasharray: 8"/>
</svg>

stroke-dashoffset｜破線の開始位置

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="0 0 200 150" style="background-color: #ccc">
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 0"/>
  <line x1="0" y1="25" x2="200" y2="25"
        style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 25"/>
  <line x1="0" y1="50" x2="200" y2="50"
        style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 50"/>
  <line x1="0" y1="75" x2="200" y2="75"
        style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 75"/>
  <line x1="0" y1="100" x2="200" y2="100"
        style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 100"/>
  <line x1="0" y1="125" x2="200" y2="125"
        style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 125"/>
  <line x1="0" y1="150" x2="200" y2="150"
        style="stroke:#000;stroke-width:5;stroke-dasharray: 100;stroke-dashoffset: 150"/>
</svg>

stroke-linecap｜線の端のスタイル

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="300" viewBox="0 0 200 300" style="background-color: #ccc">
  <line x1="20" y1="50" x2="180" y2="50"
        style="stroke:#000; stroke-width: 10; stroke-linecap: butt"/>
  <line x1="20" y1="150" x2="180" y2="150" stroke-width="10"
        style="stroke:#000; stroke-width: 10; stroke-linecap: round"/>
  <line x1="20" y1="250" x2="180" y2="250" stroke-width="10"
        style="stroke:#000; stroke-width: 10; stroke-linecap: square"/>
  <line x1="20" y1="0" x2="20" y2="300" stroke="#fff" stroke-width="1"/>
</svg>

stroke-linejoin｜線のつなぎ目のスタイル

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100" style="background-color: #ccc">
  <path d="M20,50 L60,80 L100,50 L140,20 L180,50" fill="none" stroke="#000" stroke-width="20"
        style="stroke-linejoin: round"/>
  <path d="M220,50 L260,80 L300,50 L340,20 L380,50" fill="none" stroke="#000" stroke-width="20"
        style="stroke-linejoin: bevel"/>
  <path d="M420,50 L460,80 L500,50 L540,20 L580,50" fill="none" stroke="#000" stroke-width="20"
        style="stroke-linejoin: miter"/>
  <path d="M20,50 L60,80 L100,50 L140,20 L180,50" fill="none" stroke="#fff" stroke-width="1"/>
  <path d="M220,50 L260,80 L300,50 L340,20 L380,50" fill="none" stroke="#fff" stroke-width="1"/>
  <path d="M420,50 L460,80 L500,50 L540,20 L580,50" fill="none" stroke="#fff" stroke-width="1"/>
  <line x1="0" y1="20" x2="600" y2="20" stroke="#fff" stroke-width="1"/>
</svg>