こんばんはーばさっちです。 皆さんはSVGを記述する時ってインラインSVGですか?imgタグでしょうか？ できればインラインで書いてCSSで色の変更ができるのが一番いいんですが、 インラインSVGってコードが長くてなんか分かりづらいですよね… どうせならimgタグみたいに簡単に記述して色の変更してみたいですよね？ そんなことを可能にしたのが、「deSVG」です。 この「deSVG」を使うのimgタグで記述したSVGがインラインSVGに変換することができちゃいます。 1、まずは本体をダウンロードしたら「desvg.js」というファイルを読み込みましょう!! 2、次に下記のように記述し準備はOK!! <script> window.addEventListener(‘load’, function(){ deSVG(‘.svg’, true); }); </script> 3、後はsvgファイルを読み込むこの時に指定したclass（今回はsvg）を記述します!! <img src=”images/test.svg” alt=”” class=”svg”> これで完了です!! 色の変更は下記のようにクラス+pathでOK .svg path{ fill: #000; } imgタグで書ければ記述も簡単だしコードもシンプルでいいですよね!!
Staff blog
