SVG研究① | まずはSVGのことを知ろう！

Update:

IE対応のSVGアニメーション その① | jQueryプラグイン DrawSVGを使って実装してみた
憧れのSVGアニメーションをマスターしたい！ しかもIE対応の! 調べたらjquery.drawsvg.js、vivus.jsを使えばIEでも問題なく実装できるっぽい。というわけで、今回はjquery.drawsvg.jsを使ってSVGアニメーション実装までのメモです。スタート！jQueryプラグイン DrawSVGを用意しますjQueryはすでに手元にあるものと仮定して進めます。上記サイトからjquery.drawsvg.jsを持ってきて、適所に格納します。アニメーション用のSVGを用意しますAdobe Illustratorもあるものと仮定して進めます。今回はデモ用に四角と螺旋を作ってみました。sam...

SVGアニメーションの記事を書いたとき、まだSVG書き出しについて理解していませんでした。なんなら力技でpolylineをpathに置き換えています。
このブログは個人の好きでやってるのでいいのですが、会社の案件でそんなことやったら「工数の無駄！」と詰められます。
そろそろ真面目にSVGの勉強するぞ！と決意をしました。まずはSVGのことを知ろうと思います。

SVGとは

まずおさらいも兼ねて「SVGって何よ？」というところから。

  • 正式名称Scalable Vector Graphics。頭文字を取ってSVG。「拡大縮小できるベクター画像」という意味。
  • ベクター形式の画像フォーマット
  • そのため拡大しても解像度の高いモニタで見ても滲まない
  • テキストデータなので基本的にラスター画像よりファイルサイズが軽い
  • ほとんどのブラウザ・端末で表示できるようになっている
  • サーバーの設定によっては使用できない場合があるので要確認
ベクター画像とラスター画像

SVGのソースコードの中身を見てみよう

SVGファイルをテキストエディターで開くとソースコードを見ることができます。

シンプルなSVGファイルのソースコード例
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
  <style>
    .a {fill:#a67c52;}
  </style>
  <rect class="a" x="0" y="0" width="50" height="50"/>
</svg>

svgタグ自体

XML名前空間

このsvgタグの中に、xmlns="http://www.w3.org/2000.svg"が記述されています。
ここで「難しいこと発生した？」とちょっとヒくかもしれませんが、svgタグであることを表す仕様なので特に気にしなくて大丈夫です。そういうもんだと思ってください。

ビューポート

widthとheightはSVG自体のサイズではなく「ビューポート」の大きさです。イラレで言うところの「アートボード」ですね。
em, ex, px, pt, pc, cm, mm, in, %の単位を使用することができますが、基本的にpxを使用すると思います。単位を省略するとpxとして扱われるし。

ビューボックス

となるとviewBoxは？と不思議になります。
viewBox="0 0 50 50"と4つの数値が並んでいるので、「上、右、下、左」でしょ！とピンと来ましたがなんと違います。

viewBox="x, y, width, height"です。左上を起点とし、x = 左からの位置、y = 上からの位置、width = ビューポートの幅、height = ビューポートの高さ、となっています。
（数値は半角スペース、あるいはカンマで区切ります。）

widthとheightはまた出てきましたね。基本的にビューポートのwidthとheightと同じ数値にしておきます。xとyも基本的に0にしとくと扱いやすいと思います。

svgタグの内側

基本的な要素

rect（矩形） x：左上座標X
y：左上座標Y
width：幅
height：高さ
stroke：線の色
stroke-width：線の幅
fill：矩形内の塗りつぶし色
line（直線） x1：開始X座標
y1：開始Y座標
x2：終了X座標
y2：終了Y座標
stroke：線の色
stroke-width：線の幅
polygon（多角形） points：折り返しの座標
stroke：線の色
stroke-width：線の幅
fill：塗りつぶしの色
polyline（折れ線） points：折り返しの座標
stroke：線の色
stroke-width：線の幅
fill：塗りつぶしの色
circle（円） cx：中心座標X
cy：中心座標Y
r：半径
stroke：線の色
stroke-width：線の幅
fill：円内の塗りつぶし色
ellipse（楕円） cx：中心座標X
cy：中心座標Y
rx：X軸方向の半径
yx：Y軸方向の半径
stroke：線の色
stroke-width：線の幅
fill：矩形内の塗りつぶし色
path（パス） d：
text（文字） x：X座標
y：Y座標
fill：文字の色
font-size=フォントサイズ
※改行はできません。
image（画像） ※使わないと思うので省略します。

要素のタグ内にfillやstrokeなど記述してもいいですし、classを付加してCSSで記述することもできます。

gタグ

gタグで囲むと中の要素はグループ化されます。
このgタグに属性を記述することで、中の要素にまとめて適用させることができます。

イラレの場合、グループ化する、レイヤーを分けるとgタグで囲まれて書き出されます。
レイヤー名がgタグのidとなるため、半角アルファベットでレイヤー名を付けておくと後で楽です。

aタグ

HTMLのaタグと似ていますが、リンクの記述の仕方が若干異なります。
<a xlink:href=""></a>

defsタグ

中の要素は表示はされませんが、定義として使用されます。
アニメーションの動かすルートに使ったりします。

animateタグ

SVG内でアニメーションの指定をすることができます。

要素の編集

CSS

使用できるCSSプロパティが独自に定義されています。共通のものもあります。
日本語訳された仕様は以下のサイトです。

SVG 1.1 仕様 （第２版） 日本語訳
W3C SVG 1.1 仕様の日本語訳

メディアクエリも使用できます。

変形

SVG2から使用できます。CSSプロパティのtransform属性で、要素を変形することができます。

移動 transform="translate(x, y)"
……起点を移動。y省略時は0となる。
回転 transform="rotate(a)"
……a度、時計回りで回転
拡大縮小 transform="scale(x, y)"
……拡大縮小率。1で1倍。xとyが同じ数値の場合はxだけでOK。
シアー transform="skewX(<a>)"
……x軸を基準にa度傾斜
transform="skewY(<a>)"
……y軸を基準にa度傾斜

詳しくはMDNを参照してください。全てが書いてます。

SVG: Scalable Vector Graphics
Scalable Vector Graphics (SVG) は、二次元ベースのベクター形式のための XML に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば CSS, DOM, JavaScript, SMIL などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する HTML のような位置づけです。 XML

SVGコードの最適化

Illustratorで「別名で保存」を使ってSVG書き出しした場合、svgタグ内に不要なコードまで含まれてしまいます。
慣れてればどのコードが不要でどのコードが必要か分かるのですが、正直おっかないですよね。
そんな場合、オンラインツールのSVG圧縮ツールを使うと、不要なコードが消されファイルサイズも軽い状態に整えることができます。

SVGOMG - SVGO's Missing GUI

HTMLへの配置

配置方法は複数あります。

  • imgタグで配置する
  • CSSで背景画像に指定する
  • svgタグとしてHTMLに直接配置する（この場合xmlns属性は無くても可）
  • objectタグ等、外部メディアとして配置する

外部メディアで配置することは多くないと思います。
imgタグ、CSSは普段やっている画像の配置と同じですね。

複数のアイコン書き出し時のワンポイントTips

アイコンをそれぞれオブジェクトで書き出すと、配置の際にサイズ調整で手間取ってしまうことがあります。
baseの四角（塗り・線無しの透明な四角）を置いて書き出しした方が、各アイコンのバランスを取るのも楽です。

次記事紹介

pathでしか動かないアニメーション用SVGを作成するにはーー。試行錯誤してみました。

SVG研究② | illustratorでアニメーション用SVG作成の試行錯誤メモ
上記記事で使用したSVGアニメーションのjQueryプラグイン「DrawSVG」ですが、これを使って動かす場合、SVGはpathで記述されている必要がありました。記事内の例ではアナログで置き換えましたが、そんなことやってられない＆複雑な形状ではお手上げです。やはりIllustratorで作成したい！その試行錯誤記録です。イラレでアニメーション用のSVGを作成するレッツ・トレース！SVGは座標座標で順に記述していくため、イラレで描く順番（方向）も重要になります。ここでは円・四角などの図形ツールは使用せずパスツールで記述していきます。...

関連記事: