SVGのデメリットを簡単に解決する便利スクリプト

SVGのデメリットを簡単に解決する便利スクリプト
■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。

 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ
 → ケータイ乗り換え.com
 → SMARTPHONE STORE

コーディングにもデザインにも、使ってる技術に柔軟性があれば便利。
楽。早い。

SVG画像の便利さ

私はHTML/CSSのテンプレートを開発する時、SVG画像を良く使います。
HTMLと相性も良く、柔軟性が高いので。

例えば、テンプレートのベース色を変える要望が来たら、アイコン等の色をCSSだけで変更出来ます。PhotoshopやIllustratorを触らなくてもいいのが素敵。

急な要望にも即対応できます。

こんな感じ:

image07

http://codepen.io/anon/pen/pjLMgX

でも残念ながら・・・

そう、残念ながらSVGには1つだけデメリットはある。

SVGの色をCSSで変るため、SVGのソースをそのままHTMLの中に貼り付けるしかない。

複雑な画像だと、非常に長いソースになってしまってHTMLがすごく読み難くなる。

こんな感じ:

image06

http://codepen.io/anon/pen/vNRoXp

妥協する?違う技術を使う?

私の場合、色の簡単変更のため妥協してきた。ソースが読み難くなっても、この便利さは手放せない!

アイコンフォントと言う技術も使えるけど、そっちは色んなデメリットが結構出る:
https://css-tricks.com/icon-fonts-vs-svg/ (※英語版)

IMGタグのSVGにも色変更!

もう、妥協やめようか!?

「deSVG」と言うスクリプトを使えばソースにSVGを流し込まなくてもコントロール出来る!

スクリプトのページはこちら:
http://benhowdle.im/deSVG/

トップ画面:
image05

実際に使うとどうなる?

最初の「SVG埋め込み」と同じサンプルを使って試してみましょう。

この場合は、まず、SVGをタグで呼ぶ。
そして、

と、

を追加しましょう。

で、CSSで

を記述すると~・・・・・・・・

おー!

image03

http://codepen.io/anon/pen/mexNwL

色が変わった!すごくない?w

でも、これにも問題点が

<img>タグを使とHTTPのリクエストを増やしてしまいます。
その妥協が嫌であれば、上記のサンプル「SVGのソースをHTMLに直接埋め込む」方法をおすすめします。

プロジェクトや環境、利用頻度に応じてベストなオプションを選んでください。