1分でわかるSVGファイルの作り方・使い方・表示方法とは

1分でわかるSVGファイルの作り方・使い方・表示方法とは

SVGファイルとは

JPEGやPNGのようなビットマップデータではなくイラストレーターなどで扱うベクターデータ。ベクターデータなのでどれだけ拡大してもぼやけずにきれいな状態で表示される。

(^_^;) そんなの見たことがないが

最近はWebサイトで利用されることが多くなってきているため気付いていないだけで何度か見ているはずです。

このブログの右上にあるTwitterとRSSのアイコンはSVGファイルが表示されているため見たことがないということはない。

SVGファイルなのでどんなに拡大してもぼやけずにきれいな状態で表示されます。

PNGファイル RSS登録
SVGファイル RSS登録

SVGファイルのメリット・デメリット

メリット

  • 形が複雑でなければファイルサイズがビットマップより小さい
  • 色やサイズの変更が容易
  • 拡大してもぼやけずにきれいな状態で表示される
  • テキストエディタでも編集可能

デメリット

  • 通常はOSのサムネイル表示で確認できない
  • ブラウザによっては表示できない。
    (IE8以下およびAndroid 2.3以下で表示できない)
    http://caniuse.com/#feat=svg
  • use要素でファイルを読み込んでいる場合は
    IE11以下およびEdge 12以下で表示できない

未対応ブラウザはSVGをPNGに

デメリットのブラウザ未対応のため表示できない件に関しては代替でPNG画像を表示させるようにすることで対応する。

iwb.jpではmodernizr.jsを読み込んで未対応ブラウザは<img class=”svgpng”の箇所の拡張子を.svgから.pngに置換させている。

modernizr.jsはSVGが利用可能だとhtmlタグにclass=”svg”が自動で付くので注意。

if (!Modernizr.svg) {
  var svgpng = document.querySelectorAll('.svgpng');
  for(var i = 0; i < svgpng.length; i++) {
    svgpng[i].src = (svgpng[i].src).replace('.svg', '.png');
  }
}

SVGファイルの作り方

SVGは画像ファイルではなく文書データなのでテキストエディタだけでも作成可能。

SVGファイルのコードはこのようになっている。

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <style>
      .cls-1 {
        fill: #ff7c01;
      }

      .cls-2 {
        fill: #fff;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <rect id="rect_1" data-name="rect" class="cls-1" width="48" height="48" rx="7" ry="7"/>
  <path id="shape_1" data-name="shape1" class="cls-2" d="M40.953,41H34.367A26.88,26.88,0,0,0,26.917,22.2C18.684,13.264,7,13.734,7,13.734V7s15.761-.313,25.485,11.049S40.953,41,40.953,41ZM24.094,25.958C30.211,33.637,29.5,40.924,29.5,40.924H22.918s-0.078-7.209-4.783-11.519A18.193,18.193,0,0,0,7,25.1V18.357S17.978,18.279,24.094,25.958ZM11.783,31.835A4.466,4.466,0,1,1,7.314,36.3,4.468,4.468,0,0,1,11.783,31.835Z"/>
</svg>

このコードはRSSアイコンのものでHTMLに直接記述しても同じように表示できる。SVGの色はCSSを利用するため、例えばfill: #ff7c01をfill: #0000ffにすればオレンジのアイコンではなく青のアイコンになる。

RSS登録

SVGを書き出すソフト

テキストエディタで作成可能だが通常はIllustlatorやPhotoshopでベクター画像を作成してSVGファイルを書き出す。

※PhotoshopはCC以降のバージョンでないとSVGファイルが書き出せないので注意!