はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

SVG1.1 の基本図形のメモ

SVG1.1 の基本図形のメモ

昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。

簡単な概要

SVG1.1(第2版)仕様書(有志者の日本語訳)

http:// http://www.hcn.zaq.ne.jp/___/SVG11-2nd/intro.html#AboutSVG

 からの引用です。

SVG は二次元グラフィックスを XML [XML10【訳】] で記述するための言語である。 SVG は3種類のグラフィックスオブジェクト:ベクター形式のグラフィック(例えば直線と曲線からなるパス), 画像, テキストを扱う。 オブジェクトはグループにまとめたり, スタイルを付けたり, 変換を加えたり, すでに描画されたオブジェクトに合成することができる。 SVG の特色機能には、変換の入れ子, クリッピングパス, アルファマスク, フィルタ効果, ひな型オブジェクトも含まれる。

端的にいうと、Illustratorで扱えるような点と線からなるベクター画像です。

対応環境

CanIuse で調べたところ、IE に若干制限があるようですが、ほぼすべてのブラウザで対応してそうです。

Can I use... Support tables for HTML5, CSS3, etc

SVG ファイルの読み込み

SVG ファイルの読み込み方法はいくつかあります。

  • SVG ファイルの描画を見たいだけであれば、ブラウザにドラッグ&ドロップ。編集はできませんが、専用ソフトいらずです。

  • svg タグの記述をhtml ファイルに埋め込む(インライン)

  • <img src=".svg"> <objet type="image/svg+xml" data=".svg"></object>CSSbackground-image: url(.svg) などで読み込むことができます。(外部ファイル)

基本図形

四角形(rect)

rect タグで四角形を描画できます。代表的なプロパティは以下です。

プロパティ名詳細
x="" y="" (x, y)の位置から描画。指定しないと(0, 0)。
fill 塗りつぶし色
stroke 線の色
stroke-width 線の幅
stroke-dasharray 点線。"実線の間隔, 空白の間隔"で指定。

サンプル

コード

        

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="320" height="240">
 <rect width="100%" height="100%" fill="#e33"></rect>
 <!-- stoke:線色 storke-width:線幅 -->
 <rect width="50%" height="50%" fill="#3e3" stroke="white" stroke-width="5"></rect>
 <!-- 点線 stoke-dasharray="実線間隔、空白間隔" -->
 <rect width="25%" height="25%" fill="green" stroke="#333" stroke-width="10" stroke-dasharray="20, 5"></rect>
</svg>

表示範囲(viewport と viewbox)

本来、ベクター画像は大きさを持たない。しかし、html で表示する際に都合が悪いので、viewport, viewbox の概念がある。

viewport の大きさは基本変わらず、viewbox で指定した範囲をviewport に反映させるように描画を行う。

viewport は、width="", height="" で指定する。

viewbox の範囲指定は、viewbox="開始点x y width height" である。

以下、サンプル。

サンプル

viewport: width="300" height="200" viewbox="0 0 300 200"

width="300" height="200" viewbox="0 0 225 150"

上と比べて下は、viewbox で緑の多い一部の範囲を指定したため、緑の領域が拡大されたように見える。

コード


<div>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200"> 
  <rect width="300" height="200" fill="#e33"></rect> 
  <rect width="150" height="100" fill="#3e3"></rect> 
 </svg>
 <p>viewport: width="300" height="200" viewbox="0 0 300 200"</p>
</div>
<div>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 225 150">
  <rect width="300" height="200" fill="#e33"></rect> 
  <rect width="150" height="100" fill="#3e3"></rect> 
 </svg>
 <p>width="300" height="200" viewbox="0 0 225 150"</p>
</div>

直線(line)

line タグで直線を描画できる。

x1="", y1="" で始点、x2="" y2="" で終点を指定して直線を引く。

また、stroke-linecapCanvas のように始端、終端の形状を変更することが可能。

詳細:http://www.hcn.zaq.ne.jp/___/SVG11-2nd/painting.html#StrokeLinecapProperty

サンプル

コード


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <!-- 直線 -->
 <line x1="50" y1="50" x2="180" y2="50" stroke-width="10" stroke="black"></line>
 <line x1="50" y1="100" x2="180" y2="100" stroke-width="10" stroke="black" stroke-linecap="round"></line>
 <line x1="50" y1="150" x2="180" y2="150" stroke-width="10" stroke="black" stroke-linecap="squeare"></line>
</svg>

円(circle)

circle タグで円を描画。

cx="" cy="" で円の中心を指定。r="" で半径を指定。

サンプル

コード

      

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <!-- 円 中心:cx, cy 半径:r -->
 <circle cx="150" cy="100" r="40" fill="#33e"></circle>
</svg>

楕円(ellipse)

ellipse タグで楕円を描画。

中心の指定は、circle と同じ。

rx="" ry="" で、楕円のx軸の半径、y字句の半径を指定。

サンプル

コード

      

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <!-- 楕円 -->
 <ellipse cx="150" cy="100" rx="80" ry="40" fill="#3e3"></ellipse>
</svg>

文字列(text)

text タグで文字列を記述できる。

CSS と同じ要領で、font-size="" font-family="" を指定することができる。

また、rotate="" で文字列を回転することも出来る。

サンプル

SVG フォント SVG フォント

コード

     

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <!-- テキスト -->
 <text x="20" y="50" font-size="48" fill="white" stroke="black" stroke-width="2" font-family="Helvetica, Arrial, san-serif">
  SVG フォント
 </text>
 <!-- rotate 傾き -->
 <text x="20" y="150" font-size="48" fill="white" stroke="black" stroke-width="2" font-family="Helvetica, Arrial, san-serif" rotate="20">
  SVG フォント
 </text>
</svg>

折れ線(polyline)

polyline で直線の組み合わせを引くことができる。

points="x0 y0 x1 y1 x2 y2 ・・・ xn yn" で各点を結ぶ直線を引ける。

サンプル

コード

      

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <polyline points="100 50 150 100 50 100" stroke="black" fill="none"></polyline>
</svg>

多角形(polygon)

polygon タグで多角形を描画。polyline の始点と終点を結んだを描画する。

サンプル

コード

      

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <polyline points="100 50 150 100 50 100" stroke="black" fill="none"></polyline>
</svg>

パス(path)

path タグは、直線や曲線などのコマンドを組み合わせて、より複雑な図形を描画できる。

d="コマンド1指定値1 コマンド2指定値2 ・・"といった使い方をする。 コマンドの大文字は絶対座標で、小文字は相対座標の指定となる。

代表的なコマンドを以下に。

コマンド記号指定方法
移動 m M x0,y0(座標)
直線 l L x0,y0 x1,y1 ・・・ xn,yn と頂点を指定。Zでパスを閉じられる。
水平線 h H x0(X座標)
垂直線 v V y0(Y座標)
二次ベジエ曲線 q Q cx1,cy1(制御点) x1,y1(頂点) cx2,cy2 x2,y2 ・・・
二次ベジエ曲線(制御点は前の曲線から自動計算) t T x1,y1(頂点) x2,y2 ・・・
三次ベジエ曲線 c C cx11,cy11(制御点1) cx21,cy21(制御点2) x1,y1(頂点) ・・・
三次ベジエ曲線(制御点1は前の曲線から自動計算) s S cx21,cy21(制御点2) x1,y1(頂点) ・・・
円弧 a A rx(水平方向半径),ry(垂直方向半径) x-axis-rotation(回転角) large-arc-flag(0:長弧 1:短弧) sweep-flag(0:反時計回り 1:時計回り) x,y(終点)

サンプル

コード

      

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <path d="M 50,50
             l 50,50
             h 50
             v 50
             h 50" stroke="black" fill="none">
 </path>
 <path d="M 100,50
             c 0,40 80,-40 80,0 0,40 -80,-40 -80,0" stroke="black" fill="none">
 </path>
</svg>