imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」

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でスタイリングしたい時はぜひご活用ください。

imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」