元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】SVGの基礎

SVGの基礎として「ひな型ファイル」「座標系」「色の指定」「グループ」「リンク」についてご紹介します。まずは、ひな型となるファイルを作成します。次に、座標系や色の指定などの基本を理解します。そして、グループとリンクについて知っていきます。

SVG文書のひな型

以下のコードをsample.svgとして保存します。ブラウザで開くと図形が描画されているのを確認できる。

<!-- ひな型:sample.svg -->
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 以降、図形を描画する記述をする -->
  <rect x="10" y="10" width="100" height="100" fill="blue" />
</svg>

svgタグがルート要素。svgタグの配下に図形要素などを記述する。後に書いた要素が上に描画される。SVGファイルは、直接ブラウザで表示したり、HTMLファイルに埋め込むことができる。

svg要素の属性

  • width:キャンバスの幅
  • height:キャンバスの高さ
  • viewBox:ビューポートのサイズの指定
  • xmlns:名前空間の紐付け

座標系

座標系の原点は左上の角。座標軸の向きはx軸が右向き、y軸が下向き。SVGを描画する領域を「キャンバス」という。キャンバスの一部を切り抜いてできる領域を「ビューポート」と呼ぶ。

色の指定

  • 色名:red, green, blueなど
  • 16進数:#ff0000, #00ff00, #0000ffなど
  • 10進数:rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)など

opacity属性に設定された数値によって、不透明度を指定できる。値は、0~1.0を指定する。

<!-- 色と不透明度(opacity)の指定 -->
<rect x="10" y="10" width="100" height="100" fill="blue" opacity="0.5" />

グループ

いくつかの図形をひとつにまとめてグループ化する。共通する属性(色や線幅など)をまとめて指定できる。

<!-- グループの例 -->
<g stroke-width="3" stroke="blueviolet" fill="none">
  <rect x="10" y="20" width="40" height="30"/>
  <rect x="20" y="10" width="70" height="30"/>
  <rect x="60" y="30" width="20" height="30" stroke="saddlebrown"/>
</g>

リンク

ハイパーテキストを指定する。

<!-- ハイパーテキストの例 -->
<!-- linkA.svg -->
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <a href="linkB.svg">
    <rect x="20" y="25" width="60" height="20" fill="green"/>
  </a>
</svg>
<!-- ハイパーテキストの例 -->
<!-- linkB.svg -->
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <a href="linkA.svg">
    <rect x="20" y="10" width="60" height="20" fill="red"/>
  </a>
  <a href="http://www.example.org/">
    <rect x="20" y="40" width="60" height="20" fill="blue"/>
  </a>
</svg>

まとめ

  • ひな型ファイル
  • 座標系
  • 色の指定
  • グループ
  • リンク

まずは、SVGの基礎を理解することから始めます。

参考サイト