ハシウェブ

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

【deSVG】imgタグのSVGファイルをCSSで色変更する方法【JavaScript】

【deSVG】imgタグのSVGファイルをCSSで色変更する方法【JavaScript】

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

悩み

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

目次
  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で指定します。
background-colorではないので注意してください。

.desvg path{
  fill: #e00;
}

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

笑顔

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

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

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

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

まとめ

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

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

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

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