Help us understand the problem. What is going on with this article?

HTMLとCSSでSVGを使うためのメモ

More than 3 years have 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. アニメーションをつける

サンプル

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away