More than 1 year has passed since last update.

Qiita初投稿です。

2014年にフリーランスとなってからというもの、なかなか勉強の時間がとれず、おざなりになってしまっている技術がいくつかあります……
その中でもSVGの扱い方について、簡単にではありますが調べたのでメモしておきます。
昨日までの自分に教えるような気持ちで書きます!

まず、SVGは使えるのか?

ブラウザ対応状況

Can I use... Support tables for HTML5, CSS3, etc

だいたい大丈夫です(2016/07/27現在)
IEも9以降であれば表示はできるっぽいです。

メリット

  • 拡大・縮小に強い(きれい)
  • 軽い
  • 使い方によってはCSSで装飾したり、アニメーションさせることも可能
  • アクセシビリティ上も良いことがある(まだあまり調べてない)

デメリット

  • 写真やイラスト等には向かない(どんな画像かによる。これまでGIFやPNGで書き出していたタイプの画像が向いていそう)
  • 実装状況にバラつきがある(表示自体は問題ないが、インタラクションをつけようとすると問題があったりするみたい)

使い方

img要素で読み込む

<img src="test.svg">

background-imageから読み込む

<div class="test"></div>
.test{
  background-image: url("test.svg");
}

HTML中に直接SVGのコードを記述

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
   <style>.cls-1{fill:#ccc;}</style>
  </defs>
  <title>名称未設定-1</title>
  <circle class="cls-1" cx="50" cy="50" r="50"/>
</svg>

SVGはXMLなので、空要素は最後に「/」をつけること!(さもないと正常に表示されません)

object要素で読み込む

<object type="image/svg+xml" data="test.svg" width="100" height="100"></object>

iframeみたいな感じになるらしい。

CSSでの装飾

↑ の3番、HTMLにSVGタグで埋め込む場合、CSSでいろいろ装飾できます。
いつも使ってるCSSのプロパティと全然違うので、最初は「???」となりますが、たぶん慣れます。
たとえば、背景色を変える場合普通はbackground-colorですが、SVGに対しての場合はfillです。

使えそうなプロパティ

塗りつぶし

  • fill … 塗りつぶし。transparent もOK
  • fill-opacity … 透明度。0〜1

  • stroke … 線色
  • stroke-width … 線幅。px は不要。小数点OK
  • stroke-dasharray … 点線の周期。2 4 とか 2 2 1 2 とか
  • stroke-dashoffset … 点線の開始位置をずらす

書き方

<svg id="test" xmlns="http://www.w3.org/2000/svg">
  <circle class="icon" cx="50" cy="50" r="50"/>
</svg>

この場合

#test{
  fill: red;
}

でも

.icon{
  fill: red;
}

でもOK。

グラデーション

グラデーションはCSSのみでは無理。

  1. SVG側にlinearGradient要素をつくる ※IDでなくてはだめ
  2. linearGradient要素内に更にstop要素を作り、グラデーションの色切り替えポイントを指定
  3. CSSでは、まずSVG要素のfillに、linearGradient要素のIDをurl(〜)で指定
  4. stop要素のカラーをそれぞれ指定
<svg id="test" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop class="stop1" offset="0%"/>
      <stop class="stop2" offset="100%"/>
    </linearGradient>
  </defs>
  <circle class="icon" cx="50" cy="50" r="50"/>
</svg>
#test{
  fill: url("#gradient1");
}
.stop1{
  stop-color: red;
}
.stop2{
  stop-color: black;
  stop-opacity: 0;
}

Gradients - SVG | MDN

とりあえずの現実的な使い方

1. SVGスプライト

  1. Illustratorでアートボードをひとつ作成
  2. スプライトにしたい画像をテキトウに貼り付ける(すべて同じレイヤー)
  3. サブレイヤー名をID名にする
  4. 全画像の位置を重ねる
  5. SVGで別名保存
  6. テキストエディタで開き、svg要素以下をdefs要素でラップ

すると、

<svg class="icon">
  <use xlink:href="test.svg#icon-home3"/>
</svg>
.icon{
  fill: red;
}

こういう感じで簡単にSVG画像を表示できるSVGスプライトが完成します。

IllustratorとIcoMoonでSVGスプライトのラクラク設定! | Webクリエイターボックス
IllustratorでSVGスプライトをつくってみよう – Design Report – デザインレポート

CSSスプライトのほうが便利な場面もあると思うので、そのあたりは臨機応変に。

2. アニメーションをつける

サンプル

塗りつぶしや線を利用してアニメーションをつけるとオシャレ。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.