2020.07.15 2020.09.16

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

JavaScript

この記事は、最初の投稿から4年以上が経過しています。

最終更新から1585日が経過しています。

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

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

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

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

目次

画像にSVGファイルを使うメリット
deSVGの使い方
まとめ

画像に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>

desvg CDN by jsDelivr - A CDN for npm and GitHub

A free, fast, and reliable CDN for desvg. deSVG

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

GitHub - benhowdle89/deSVG: Remove inline SVG bloat from your HTML document

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ではないので注意してください｡