未経験でも転職出来る!!Web制作者になった元飲食店員が語るBLOG

  1. HTML
  2. アイコンをSVGで表示する際、imgタグで出力時のカラー変更の方法

アイコンをSVGで表示する際、imgタグで出力時のカラー変更の方法

どうも、Tommyです。

アイコンをSVGで出力する際に、色を変更したいですよね。
ただSVGの場合いろいろな出力のやり方がありますが、『imgタグ』で出力方法だと基本的にはcssで色を変更できません。

私も、いろいろ調べたのですがあまり検索に出てこなかったので記事にしておこうと思います。

SVGの出力方法

今回は、imgタグで出力させる方法について紹介していきます。

基本的にSVGのアイコンは、ネットからダウンロードしてくるかIllustratorから書き出して使います。

この方法だと、普段扱っている『jpg・png・gif』の画像を表示させる時と同じように『SVG』もブラウザに表示することができます。

<img src="images/test-svg.svg" alt="">

Check Point

画像として表示させるよりも、SVGの方が格段に軽くなります。
また、ベクター画像なので拡大縮小に強い点でもメリットがあります。

imgタグでSVGの色を変更する方法

普通のSVGを出力するっとなると、長いコードを記述する方法だと思います。
この方法だと、cssで色を変更出来るため使い勝手が良いです。

ただ、コードが長くなるためちょっとしたアイコン向けではないのかなっと個人的には思います。

imgタグで出力した際になんとか色を変更できないか、いろいろ調べた結果『deSVG.js』を使えば、cssで色を変更出来ることがわかりました。

まず、下記のコードをコピペしてファイルを作成して下さい。
こちらが、『deSVG.js』です。

(function() {
    "use strict";

    var desvg = function(selector, removeInlineCss) {
        removeInlineCss = removeInlineCss || false;

        var images,
            imagesLength,
            sortImages = {},

            // load svg file
            loadSvg = function (imgURL, replaceImages) {
                // set up the AJAX request
                var xhr = new XMLHttpRequest();
                xhr.open('GET', imgURL, true);

                xhr.onload = function() {
                    var xml,
                        svg,
                        paths,
                        replaceImagesLength;

                    // get the response in XML format
                    xml = xhr.responseXML;
                    replaceImagesLength = replaceImages.length;

                    // bail if no XML
                    if (!xml) {
                        return;
                    }

                    // this will be the <svg />
                    svg = xml.documentElement;

                    // get all the SVG paths
                    paths = svg.querySelectorAll('path');

                    if (removeInlineCss) {
                        // if `removeInlineCss` is true then remove the style attributes from the SVG paths
                        for (var i = 0; i < paths.length; i++) {
                            paths[i].removeAttribute('style');
                        }
                    }
                    svg.removeAttribute('xmlns:a');

                    while(replaceImagesLength--) {
                        replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
                    }
                };

                xhr.send();
            },

            // replace the original <img /> with the new <svg />
            replaceImgWithSvg = function (img, svg) {
                var imgID = img.id,
                    imgClasses = img.getAttribute('class');

                if (imgID) {
                    // re-assign the ID attribute from the <img />
                    svg.id = imgID;
                }

                if (imgClasses) {
                    // re-assign the class attribute from the <img />
                    svg.setAttribute('class', imgClasses + ' replaced-svg');
                }

                img.parentNode.replaceChild(svg, img);
            };



        // grab all the elements from the document matching the passed in selector
        images = document.querySelectorAll(selector);
        imagesLength = images.length;

        // sort images array by image url
        while (imagesLength--) {
            var _img = images[imagesLength],
              _imgURL;

            if (_img.getAttribute('data-src')) {
              _imgURL = _img.getAttribute('data-src')
            } else {
              _imgURL = _img.getAttribute('src')
            }

            if (sortImages[_imgURL]) {
                sortImages[_imgURL].push(_img);
            } else {
                sortImages[_imgURL] = [_img];
            }
        }

        // loops over the matched urls
        for (var key in sortImages) {
            if (sortImages.hasOwnProperty(key)) {
                loadSvg(key, sortImages[key]);
            }
        }

    };

    window.deSVG = desvg;
})();

また、このjsを動かすために、

$(function(){
    deSVG('クラス名',true);
});

SVGの色を変更したいimgタグに対して『クラス』をつけましょう。

では、ここから例としてコードを書いていきます。

<img class="svg_img" src="images/test-svg.svg" alt="">
$(function(){
    deSVG('.svg_img',true);
});
.svg_img path{
    color: #f00;
    fill: currentColor;
}

『css』では、クラス名のあとに『path』というタグに色変更の指定をしております。

以上で、imgタグでSVGを表示させたものの色を変更させるときのやり方です。

ブラウザなどで、ページの検証をすればわかるのですが、『deSVG.js』でimgタグに入れたSVGからSVGの生コードに変換されてます。

そのため、cssで色の変更が出来るようになったということです。
つまり、色を変更させたいということは自らSVGの生コードを書いておくのか、jsで書き換えさせるのかどちらかということです。

できれば、自らSVGの生コード書いておいたほうが余分なファイルを用意する必要がないため良いとは思いますが、これに関しては好き嫌いがあるかなっと思いました。

まとめ

以外に知られていない、imgタグでSVGを出力した際にCSSで色の変更をするための方法について紹介しました。

SVGは、デメリットがほぼない素晴らしいものです。あるとしたら、出力の仕方が少し癖があるので扱いにくいという点だけだと思います。

今まで画像として表示していたアイコンやテキスト画像を、SVGに変えるだけでかなりのデータ量が軽くなります。

またSVGアニメーションも出来ると、エンジニアとして幅がグッと広くなりますので、頑張ってみてはいかがでしょうか。