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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【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の基礎を理解することから始めます。

参考サイト

» HTML入門のまとめはこちらです。