deSVGは、imgタグで設置しているSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリです。
SVGの色をCSSで変更しようと思った場合、imgタグで設置されているSVGファイルは変更できず、インラインSVGとしてHTMLにコードが記述されている必要があります。
ですが、SVGのコードは非常に長くなる場合もあり、HTMLに直接記述するのは嫌だなーと思うかもしれません。そんな時はdeSVGを使えば、HTMLにはimgタグとして記述し、ページが読み込まれた時にインラインSVGに変換するといったことが可能になります。
例えば、以下のようにimgタグでsample.svgを読み込んでいたとします。
<img src="sample.svg" alt="" class="svg">
deSVGを使うと、以下のようなインラインSVGに変換することができます。
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="380.13" height="160.94" viewBox="0 0 380.13 160.94">
<defs>
<style>
.cls-1 {
stroke: #a0a0a0;
stroke-miterlimit: 10;
stroke-width: 6px;
}
</style>
</defs>
<title>sample</title>
<g>
<path class="cls-1" d="M105.93,440l17.15-20.57c10.69,9.88,24.81,16.54,37.92,16.54,15.54,0,23.81-6.66,23.81-17.15,0-11.1-9.08-14.53-22.39-20.17l-20-8.48c-15.13-6.25-30.26-18.36-30.26-40.15,0-24.41,21.39-43.17,51.65-43.17,17.35,0,34.7,6.86,46.81,19.17L195.5,344.74c-9.48-7.87-19.36-12.31-31.67-12.31-13.11,0-21.59,5.85-21.59,15.74,0,10.69,10.7,14.52,23.41,19.57L185.22,376c18.15,7.46,30.06,19,30.06,40.55,0,24.41-20.38,45.19-54.88,45.19A79.5,79.5,0,0,1,105.93,440Z" transform="translate(-101.83 -303.81)"/>
<path class="cls-1" d="M222.34,309.63h31.27l19.77,72.63c4.64,16.55,7.67,31.48,12.51,48.22h1c4.64-16.74,8.07-31.67,12.71-48.22L319,309.63h30.27l-45.8,149.3H267.93Z" transform="translate(-101.83 -303.81)"/>
<path class="cls-1" d="M358.92,384.89c0-49.23,31.88-78.08,71.62-78.08,21.59,0,36.52,9.28,46.2,19.17l-15.93,19c-7.27-7.06-15.74-12.51-29.26-12.51-24.81,0-42.16,19.37-42.16,51.45,0,32.48,14.93,52.05,44.18,52.05,7.26,0,14.53-2,18.76-5.65V400.83H425.9V376.41H479V443.8c-10.08,9.88-27.64,17.95-48.42,17.95C389.79,461.75,358.92,434.72,358.92,384.89Z" transform="translate(-101.83 -303.81)"/>
</g>
</svg>
なお、deSVGはjQuery等には非依存で単体で動作し、3.21KBと非常に軽量なスクリプトです。
deSVGの使い方
ステップ1. deSVGのダウンロードと設置
まずはGitHubからファイル一式をダウンロードします。ダウンロードしたファイルを解凍し、desvg.jsをサーバーに設置しましょう。
ファイルを設置したら、HTMLの</body>直前に以下を追加して、desvg.jsを読み込みます。
<script src="desvg.js"></script>
ファイルパスは適宜変更してください。
ステップ2. HTMLのマークアップ
imgタグには、以下のようにクラスを追加しておきます。クラス名は任意のものでOKです。
<img src="sample.svg" alt="" class="svg">
ステップ3. deSVGの実行
desvg.js読み込みの後に、以下を追加してdeSVGを実行します。
<script>
window.addEventListener('load', function(){
deSVG('.svg', true);
});
</script>
.svgクラスが付いているimg要素のSVGがインラインSVGに変換されるようになります。
SVGの色を変更する
インラインSVGに変換したSVGの色を変更するには、CSSで以下のように指定します。
.svg path {
fill: #ffff00; /* 塗りつぶしの色 */
stroke: #ff0000; /* 枠線の色 */
}
変換されたSVGには.replaced-svgというクラスが追加されるので、以下のようにしてもOKです。
.replaced-svg path {
fill: #ffff00;
stroke: #ff0000;
}
あとがき
手軽で良いですね。
インラインSVGに変換して、色を変更したりアニメーションを追加したりと、CSSでスタイリングしたい時はぜひご活用ください。