. SVG 基礎 vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法 - KDE BLOG
SVG 基礎 vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法 - KDE BLOG
SVG 基礎 vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法 - KDE BLOG

【SVG 基礎 vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法

はSVGのルート要素で、HTMLにおける に相当します。 このタグ内の xmlns 属性の値に、SVGの名前空間 http://www.w3.org/2000/svg が宣言されることで 要素の配下でSVG固有のタグが利用できるようになります。 たとえば a 要素は通常の html にも svg にも存在しますが、このネームスペース配下に置くことで html と混ざることなく SVG の a 要素として使うことができます。 ちなみに、SVG の名前空間で使われている http://www.w3.org/2000/svg はURLですが、ただの識別子の文字列です。 URLの参照先自体には意味はありません。 URLは1つの場所しか示さないので、ID（名字）として利用されているのが慣習のようです。 このネームスペースをタイプミスしてしまうとSVGではない別の言語として解釈されてしまうので注意が必要です。

xmlns:xlink は文書内で a 要素や use 要素などで href 属性を使う場合に必要な宣言です。 xmlns:ev はonclick属性などのイベント属性で必要な宣言です。

少なくとも xmlns と xmlns:xlink は宣言しておくと良いですが、HTML5でインラインSVG（後述）の場合は両方とも省略することが可能です。

viewPortとviewBox

svgには「viewPort」と「viewBox」という概念があります。 viewPortはSVGの世界を見るための窓で、窓の大きさはsvg要素の width と height 属性で決まります。 viewBoxは、窓の中にSVGのどこからどこまでを収めるか を指定します。

viewBoxについて

viewBoxについてもっと詳しくいうと、viewBoxはSVGの内容を表示させる「表示領域」と図形の配置や大きさの基準となる「座標系」を定義します。 viewBoxの指定は下記のように、 viewBox="X座標の最小値 Y座標の最小値 X軸の幅 Y軸の高さ" と記述します（単位は指定しません）。

viewBox="0 0 200 200">

上記の場合「200px × 200px」の大きさを示しているわけではありません。 pxやcmなどの絶対単位は、先述の通りsvg要素の width と height 属性で指定します。 この絶対単位に対して「座標系」における単位を利用単位といいます。 svg内のそれぞれの図形は、この利用単位で配置やサイズを指定するので、通常は絶対単位での指定はしません。

viewPortとviewBoxの関係

viewPortの大きさはwidth、height属性で絶対単位での指定で決まります（別途CSSで指定・上書きが可能）。 SVGの座標系は特定の絶対単位を持たないため、1利用単位のサイズは、viewPortの大きさによって異なります。

円の大きさだけでなく、線の太さも変わっているのが確認できます。 このように座標系の利用単位が変化することを「座標系変換」といいます。

SVGにおける1座標（利用単位）は、width、heightをviewBoxで定義したX軸、Y軸のそれぞれの値で割ったサイズということになります。

通常は、1座標 = 1px として扱う方が余計な混乱をきたさないかと思います。

※ viewport と viewbox の関係は深いので、詳しくは別途まとめようと思っています。

主な SVG 要素 circle 要素 xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"> cx="150" cy="200" r="100" fill="#e00" /> 専用属性 説明 cx 円の中心の x 座標（center x の意味） cy 円の中心の y 座標（center y の意味） r 円の半径の長さ（radius の意味）

※ 専用属性とはこの要素特有の属性のことを指す模様です。 この専用属性以外にも fill などのグラフィカルイベント属性と呼ばれる属性などを指定できます。詳しくは MDN などのリファレンスを参照ください。 circle - SVG: Scalable Vector Graphics | MDN

rect 要素

矩形を描画します。 矩形を描画する際の基準となる座標と、そこからの幅と高さを指定します。 また、角丸四角形も作成できます。

xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> x="10" y="10" width="50" height="50" rx="10" fill="#c00" /> x="50" y="100" width="50" height="100" rx="10" ry="50" fill="#0a0" /> x="120" y="200" width="50" height="50" rx="50%" fill="#00d" /> 専用属性 説明 x 原則、要素の左上を原点とした x 座標 y 原則、要素の左上を原点とした y 座標 width 横幅 height 高さ rx x軸の半径 ry y軸の半径 line 要素 xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> x1="0" y1="0" x2="300" y2="300" stroke="#e00" stroke-width="3" /> x1="250" y1="30" x2="20" y2="200" stroke="#00e" stroke-width="10" stroke-dasharray="20 5" /> 専用属性 説明 x1 開始地点の x 座標 x2 開始地点の y 座標 y1 終了地点の x 座標 y2 終了地点の y 座標 埋め込み方法 1. img要素として埋め込む xmlns="http://www.w3.org/2000/svg" width="300" height="300"> cx="100" cy="100" r="50" fill="tomato" /> Hello, SVG. img src="circle.svg" alt="">

上記では img 要素に対して背景色グレーを指定します。SVG自体は円以外は透過です。 img要素にwidth、heightを指定して縮小しても拡大しても基本的に画像が荒れることはありません。

にした結果

2. 背景画像として埋め込む xmlns="http://www.w3.org/2000/svg" width="300" height="300"> cx="100" cy="100" r="50" fill="tomato" /> div class="bg">Hello, SVG. .bg width: 300px; height: 300px; background: #eee url('circle.svg') 0 0; background-size: 30px auto; > 3. 要素（インラインSVG）として埋め込む body> svg width="300" height="300"> circle cx="100" cy="100" r="50" fill="tomato" />

※ ちなみに、width と height を指定しない場合、デフォルトで width="300" height="150" となります。

インラインSVGの場合、htmlと同じくDOMツリーが作成されます。 devTool で確認すると下記のようになります。

DOMツリーが作成されるので、JavaScript で DOM API を使って操作ができる ということになります。 試しに、マウスオーバー／マウスアウト で circle 要素の色が変わる操作をしてみます。

body> svg width="300" height="300"> circle cx="100" cy="100" r="50" fill="tomato" /> script> const svgElement = document.getElementsByTagName('svg')[0]; const circleElement = svgElement.getElementsByTagName('circle')[0]; const changeColor = (hex) => circleElement.style.fill = hex; circleElement.addEventListener('mouseover', changeColor.bind(this, 'gold')); circleElement.addEventListener('mouseout', changeColor.bind(this, 'forestgreen'));

このように、JavaScript や CSS を使って制御を行い場合は インラインSVG で記述します。

4. 外部メディアとして埋め込む body> object data="circle.svg" type="image/svg+xml">代替えコンテンツ embed src="rect.svg" type="image/svg+xml"> xmlns="http://www.w3.org/2000/svg" width="300" height="300"> cx="100" cy="100" r="50" fill="tomato" /> xmlns="http://www.w3.org/2000/svg" width="300" height="300"> x="100" y="100" width="100" height="100" fill="skyblue" /> ネームスペースがない場合 width="300" height="300"> cx="100" cy="100" r="50" fill="tomato" /> object要素、embed要素にサイズ指定がある場合

下記のように、object要素、embed要素にwidth、heightのサイズ指定がある場合、そちらが優先されます。 svgのサイズは300pxを指定していましたが、表示結果は 500px x 500px 、 600px x 600px となっているのが分かります。

object data="circle.svg" type="image/svg+xml" width="500" height="500">代替えコンテンツ embed src="rect.svg" type="image/svg+xml" width="600" height="600"> まとめ
  • SVG は画像でもありテキストファイルでもある
  • 基本的には IE9 以上, android 3 以上から使える
  • インラインで使う以外は SVGの名前空間の宣言が必須
  • viewport と viewbox の概念がある
  • 埋め込み方法は複数ある
    • img要素で画像として読み込む
    • CSSで背景画像として読み込む
    • インラインで読み込む
      • DOMツリーが生成されるので JavaScript でDOM操作ができる
      参考
      • Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術
      • ASCII.jp：サンプルコードで学ぶ SVGの読み方、書き方 (1/2)｜本気で使いこなす「SVG」再入門【2015年版】
      • 10分でわかるSVG 基礎編 (1/5)：Webグラフィックをハックする（2） - ＠IT