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