SVG とは

SVG って何？

svg は画像フォーマットの一つです。

画像フォーマットといっても png や jpeg などと違いファイル自体はバイナリではなくテキストファイルです。
※軽量化のためにバイナリ化することもできます。

svg 画像 (arrow.png)

arrow.png

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 43.923686 20.175814"
   height="20.175814mm"
   width="43.923687mm">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-10.354325,-85.356294)"
     id="layer1">
    <path
       id="path10"
       d="M 24.911488,85.425702 10.418335,95.444197 24.911488,105.4627 v -5.00925 H 54.241613 V 90.43495 H 24.911488 Z"
       style="fill:#ff2a2a;stroke:#000000;stroke-width:0.07279598px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  </g>
</svg>

1ピクセル毎の画素情報を持つのではなく線の引き方の情報を持つ仕組みになっています。
png も svg も原寸大ではほぼ変わりませんが、拡縮をした際に大きな差が出ます。

同じ倍率で拡大したsvg(左)とpng(右)です。
png の方が荒くなっていることがわかります。
svg は線の引き方の情報のため境界部分もきれいに表現されています。

また、単純な画像であれば png よりも小さいサイズのファイルにすることも可能です。

使用シーン

• グラフなどの図形画像
• 線のはっきりとしたイラスト
• サイトやSNSで使用するアイコン
• 一般的なフォントの文字

編集ツール

Inkscape という svg 編集に特化した クロスプラットフォームで使えるアプリケーションがあります。
オープンソースプロジェクトで現在も活発に開発が行われていますので svg を作成する方はこれを使えば間違いありません。

参考

Wikipedia : Scalable Vector Graphics
Wikipedia : Inkscape
W3C : SVG仕様
Inkscape公式サイト