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

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

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

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に直接埋め込む」方法をおすすめします。

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

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント