ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

SVGをCSSで色変更する!deSVGでインラインSVGに変換!

SVGをCSSで色変更する!deSVGでインラインSVGに変換!

「色違いの画像を1つにして共通化したい」
「SVGファイルをCSSで編集できるようにしたい」

悩み

こういった悩みにお答えします。

じつは、JavaScriptライブラリ「deSVG」を使うことで解決できます。

この記事を読み終えると、色違いのアイコンなどをひとつのSVGファイルで使いまわすことができるようになり、効率的にWebサイトをつくることができます。
また、読み込みファイル数も減るので読み込み速度も速くなります。

目次
  1. 画像にSVGファイルを使うメリット
  2. deSVGの使い方
    1. プラグインの読み込み
    2. HTMLを記述する
    3. JavaScriptを記述する
    4. CSSでSVGを編集する
  3. まとめ

画像にSVGファイルを使うメリット

画像にSVGファイルを使うメリットは以下になります。

  • ベクター画像なのでファイル容量が小さくい (読み込み速度が速くなる)
  • 画像サイズを拡大縮小してもほやけることがない
  • CSSで編集ができる

要するに、ファイルサイズが小さくなるので読み込み速度が速くなり、レスポンシブでぼやけないようにするために、大きすぎる画像にしたり、いくつもサイズ違いの画像をいくつも用意する必要がありません。

ただ、「CSSで編集ができる」のは、HTMLに直接、SVGを書き込んだときで、imgタグのsrcで読み込んだときはCSSで編集はできません。
だからといって、HTMLに直接SVGを書き込むとHTMLソースが読みにくくなるというデメリットがでてきます。

これを解決するために、JavaScriptライブラリ「deSVG」を使って、imgタグのSVGファイルをインラインSVGに変換する処理をいます。

POINT
SVGを編集するにはインラインSVGにする必要がある

deSVGの使い方

と、いうことでdeSVGを使い方を解説します。

この笑顔のアイコンSVG画像に色をつけます。

笑顔

プラグインの読み込み

CDNから読み込みます。

<script src="//cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js"></script>

jsDelivr - A free, fast, and reliable CDN for Open Source

Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.

ダウンロードしたファイルを使う場合は、GitHubからダウンロードします。

benhowdle89/deSVG

Remove inline SVG bloat from your HTML document. Contribute to benhowdle89/deSVG development by creating an account on GitHub.

HTMLを記述する

HTMLは普通にimgタグでsrcを指定し、deSVGで使うためにclass名をつけます。
他で使っていないclass名であればなんでも大丈夫です。

今回は「desvg」というclass名にします。

<img class="desvg" src="smile.svg" width="200" height="200" alt="笑顔">

JavaScriptを記述する

HTML読み込み時に、deSVGを実行します。
body閉じタグ前に以下を記述します。
「.desvg」は、HTMLにつけたclass名にします。

<script>
window.addEventListener('load', function(){
  deSVG('.desvg', true);
});
</script>

これだけで、imgタグのSVGファイルがインラインSVGに変換されます。

開発ツールで指定したimgタグが以下のようなインラインSVGに変換されていることを確認してください。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="desvg replaced-svg"><path d="M10 20a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16zM6.5 9a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm7 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm2.16 3a6 6 0 01-11.32 0h11.32z"></path></svg>

CSSでSVGを編集する

SVGの構成にもよりますが、簡単な構成であればsvgタグ内のpathに色を指定します。
SVGファイルの色指定はfill(塗りつぶし)で指定します。
CSSで背景色を指定するにはbackground-colorと思ってしまいますが、SVGにはbackground-colorではないので注意してください。

.desvg path{
  fill: #e00;
}

これで先程の黒色のアイコンSVG画像を赤く塗りつぶすことができました。

笑顔

タイトルには色変更する方法と書きましたが、色以外にもいろいろなことが指定でき、アニメーションなどさまざまなカスタマイズに応用できます。

POINT
SVGの塗りつぶし色指定にはfillを使う!

こちらの記事で詳しく解説されています。

SVGでアウトラインをカスタマイズしてみよう

これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…!?今回はSVGのアウトライン(線)の装飾に注目!オブジェクトを徐々に描いていくラインエフェクトにも挑戦します!SVGの基本的な情報 […]

SVGファイルはデフォルトのままでは、エクスプローラのサムネイルでどんな画像なのか確認することができません。
以下の記事で、WindowsでSVGをサムネイル表示させる方法を紹介しています。

WindowsでSVGをサムネイル表示!【SVG Explorer Extension】

WindowsエクスプローラでSVGをサムネイル表示させる方法を知りたいですか?この記事では、SVG Explorer Extension(Svg See)の導入(ダウンロード、インストール)手順、導入後サムネイルが表示されないときの対処法を紹介しています。ぜひご覧ください。

まとめ

deSVGの使い方を解説しました。

SVGをCSS編集できるようになると同じような画像をいくつも読み込む必要もなくなるので、保守・管理がしやすくなります。

Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。