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

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

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

FlickrのAPIとPHP/HTML/CSSを使って写真ギャラリーサイトを作りましょう。PHPのコ... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背... 最近サイドプロジェクトをネットに上げました: http://premflux.com/cc0/free-photo-japan-tsukuba-32576937024.html そのプロジェクトの開発をAからZまで細かく説明したいと...
ドキュメントは手書きでもよくない?... 開発をする上でドキュメントはとても大切です。 それはウォーターフォール型開発かアジャイル型開発かに関わらずとても大切です。 しかしドキュメントを作成に膨大な時間を費やすことで、ドキュメント作成自体が目的になってしまい、生産性を伴いません。...