SVGで図形を描写【HTML/CSS】

※自分用の備忘録です。

SVGの使い方

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="red" viewBox="0 0 60 60">
  <circle cx="30" cy="30" r="10" />
</svg>

svgタグに「viewBox」という座標系を指定します。

図形やパスはこのタグ内に記述をしていきます。

SVGは上記のタグを直接HTMLファイルに貼り付けるか、拡張子「.svg」ファイルを作り、imgやbackground-imageとして指定することもできます。

HTMLファイルに直接貼り付ける場合は、「xmlns="http://www.w3.org/2000/svg"」の記述を省略できます。
コード自体はxmlでの記述が必要なため、閉じかっこの前に「/」をつけるなどの注意が必要です。

四角の描写

<rect x="0" y="30" width="30" height="30" stroke="none" fill="green"/>

• x「四角の左上のx座標」

• y「四角の左上のy座標」

• width「四角の横幅」

• height「四角の高さ」

rx、ryを指定することで角丸なども設定できます。

円、楕円の描写

円の描写

<circle cx="30" cy="30" r="30" stroke="none" fill="green" />

• cx「円の中心のx座標」

• cy「円の中心のy座標」

• r「円の半径」

楕円の描写

<ellipse cx="30" cy="30" rx="20" ry="30" stroke="none" fill="green" />

楕円はr「円の半径」の代わりにrx「円の横方向の半径」、ry「円の縦方向の半径」を指定します。

• rx「円のx軸方向の半径」

• ry「円のy軸方向の半径」

直線の描写

  <line x1="0" y1="0" x2="60" y2="60" stroke="#333" stroke-width="5"/>

 x1、y1で開座標を、x2、y2で終了座標を指定します。

直線の色はstrokeで指定します。

• x1「始点のx座標」

• y1「始点のy座標」

• x2「終点のx座標」

• y2「終点のy座標」

折れ線、多角形

折れ線

<polyline points="0,0 60,20 0,40 60,60" stroke="black" stroke-width="5" fill="none"/>

開始点、頂点、終了点のx、yの座標を指定します。

多角形

<polygon points="0,0 60,20 0,40 60,60" stroke="black" stroke-width="5" fill="none"/>

多角形の書き方折れ線と同じでx、yの座標を指定します。

多角形の場合は開始点と終了点のパスが自動的に繋がります。

その他の描写できる図形（別途加筆予定）

• パス「path」

• テキスト「text」

テキスト「text」

<text x="0" y="30" fill="#333" font-size="10px">こんにちは世界</text>

画像の挿入

<image xlink:href = "img.png"/>

SVG内にはpngやjpg画像を挿入することができます。

SVG内にSVGを挿入することもできます。

スタイルの書き方

スタイルシート

<svg viewBox="0 0 60 60">
  <style type="text/css">
    polygon {
      fill: green;
      stroke: #333;
      stroke-width: 5;
    }
  </style>
  <polygon points="0,0 60,20 0,40 60,60"/>
</svg>

スタイルはSVGタグ内に「<style></style>」を書き、その中にスタイルを記述することができます。

HTMLに直接貼り付けている場合は通常のCSSと同じ場所に書くことができます。

プレゼンテーション属性

<polygon points="0,0 60,20 0,40 60,60" stroke="black" stroke-width="5"/>

プレゼンテーション属性とは、個別のタグ内に「style名="値"」で記述する方法です。

よく使うスタイル

• fill「塗り潰しの色」

• fill-opacity「fillの透明度」

• stroke「枠線の色」

• stroke-width「枠線の太さ」

• stroke-opacity「枠線の透明度」

• opacity「全体の透明度」

• display「表示/非表示 inline/none」

• font-family「フォントの種類」

• font-size「フォントの大きさ」

• font-weight「フォントの太さ」

SVGで作成したぺぺロンマークのサンプルコード

<svg viewBox="0 0 60 60" width="300">

  <circle cx="30" cy="30" r="30" fill="green" />

  <rect x="0" y="30" width="30" height="30" fill="green"/>

  <circle cx="30" cy="30" r="20" fill="white" />

  <rect x="10" y="30" width="20" height="30" fill="white"/>

  <circle cx="30" cy="30" r="10" fill="red" />

  <rect x="20" y="30" width="10" height="30" fill="red"/>

</svg>

ぺぺロンマーク