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

Pocket
LINEで送る


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プロパティが独自に定義されています。共通のものもあります。
日本語訳された仕様は以下のサイトです。

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

変形

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を参照してください。全てが書いてます。

ソースコードの最適化

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

HTMLへの配置

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

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

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

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

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

Pocket
LINEで送る

back to top