2026.06.22
# コーディング・システム開発
【JavaScript】便利なプラグイン「deSVG」の紹介
こんにちは
MaromaroのTakaです。
HTMLコーディングで、
imgタグにそのままsvgを設定した場合に色変更などが出来ません。
その場合SVGタグをインラインで埋め込めば可能ではありますが、
物によってはソースが長くなったり、可読性が悪くなったりなどのデメリットがあります。
わざわざ入れるのも手間ではありますね。
今回紹介するdeSVGはsvgが入っているimgタグに対して実行すると、
何と丸ごとインライン表示に変換してくれる優れものです。
やり方は簡単で、
GitHubからjsをダウンロードします。
※必要なものはdesvg.jsのみです。
jsを読み込みます。
<script class="desvg.js"></script>あとは付与したいクラス名を決めて、
imgタグに付与し、scriptを実行するだけです。
今回はdesvgというクラス名にします。
<img class="desvg" src="test.svg" alt="test">
scirptの実行は対象DOM以降で読む形が良いかと思います。
※onloadだと遅延した場合にcssの指定次第で崩れる可能性があります。（imgとsvgタグ両方にcssを指定するなど工夫が必要）
<script>
deSVG('.desvg', true);
</script>実行後imgタグがインラインのsvgタグに差し変わるので、
あとはpathなどのDOMに対して、fillのcolorを変更したりなど、自由にDOMに対してCSSの指定が可能となります。
念のため、実行前は以下
実行後は以下の様になります。
以下の様にcssで色が変更可能となりました。
上記の様に指定は簡単なので、気軽に使えます。
以上、Takaでした。
