imgで読み込んだsvgファイルをcssでコントロールできる「svgControl.js」

svgデータを扱うのはimgタグにファイルパスを書き込むだけでいいので、楽だし、拡大縮小に適しているから今どきのフォーマットだと便利に使っていたんですが、タグ構成のsvgデータは、namespaceという非常に厳しいセキュリティがデフォルト仕様の為、imgタグで読み込んだsvgデータは、ページ内のcssでコントロールすることができません。 これを解決するには、htmlタグに直接svgタグとその内容を記述することで、そのページでcssコントロールできるsvgデータになるのですが、htmlファイルが膨大になってしまう可能性もあり、あまりオススメできるやり方ではありません。 軽いアイコンなどのシンプルsvgデータであれば、ピンポイントで利用しても良いかもしれませんが、システムで動的に変動するsvg画像データなどは、記述も管理も非常にめんどくさいことが容易に想像できます。 やはりsvgのデータ管理はsvg拡張子のファイル単位で行い、htmlではタグで呼び出すだけで、コントロールまでできてしまうのが一番ラクなのにな〜。 と考えていたら、それなら、「imgタグをコントロールできるsvgタグにコンバートしてやればいいではないか！」という思考になり、ソッコーでライブラリモジュールを構築してしまいました。

Github

結構使える事が想定できたのでGithubにアップしておきました。 使いたい人はMITライセンスにしているので、ご自由にお使いください。 https://github.com/yugeta/svgControl

機能説明

基本的にIMGタグに設置されている.svg拡張子を探して、svgタグに変換しています。 初期バージョンでは、ページ内で使用している上記条件を満たすものは全て変換対象になってしまうので、除外したい場合は、変換処理に除外処理をいれなければいけません. また、imgタグで一度読み込んだデータを再度ajaxで読み込むことになるので、1画像で2回のトラフィックが発生してしまうので、ページスピードを考えると、svgタグで記述する機能を付けておきました。 IMGタグのsrc属性をそのままsvg属性に変更してあげるだけで、あとは、ライブラリが勝手にsvgの内容をファイルから読み込んで追記してくれます。 これならトラフィックも1回なので、環境にやさしいですね。

使い方

1. htmlソース内に下記コードを記述する。 <script src="svgLoad.js"></script> jsライブラリのパスは、それぞれの環境に合わせて書き換えてください。 2. ページ内のimgタグをsvgタグに変更（できなければimgタグのままでも良し） 以上！ jQueryなどの外部ライブラリは一切使っていないので単独のスタンドアロンで使用することができます。

対応ブラウザ調査

[Windows] IE8 : SVGが未対応 IE11 : SVGタグ記述のみしか表示されず・・・ Edge : OK Chrome : OK Firefox : OK Opera : OK

[Mac] Chrome : OK Firefox : OK Safari : OK Opera : OK

どのブラウザも最新バージョンであれば問題なく動作できるようですが、IEの他のバージョンは確認できなかったので、どなたか確認されたら教えてくださいませ。 でもきっとIE系はNGなんだろうな・・・ホントに残念なブラウザだ・・・