アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう

2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して

[KoshianX]

ようやくsvgの時代が来るか

[kurocraft7522]

SVGとは？

[cibea]

SVG

[daizo1117]

“<?php include_once("svg-defs.svg"); ?>”

[kimix]

ベクター画像の表示の仕方[アイコンフォント][フォント][webデザイン][svg][コーディング][css]

[kupoyuki]

今度やってみようかな　svg、ついつい画像で使ってしまうけど（意味ない）

[hmbd]

基本的な使い方

[tiri_gami]

おもしろいー、知らなかったー

[easygoing247]

svg

[ytkwsm]

対応ブラウザについて

[zzitne]

SVG使えるかな

[blog0009]

アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス @webcreatorboxさんから

[otchy210]

Retina 対応が 1 ファイルで可能なのが最大の利点。さらに base64 化すればデータ URI スキームとして css に埋め込めて gzip 圧縮率も高いので、便利&高速。モバイルで必須な技術と思う。

[jdash]

『アイコンを表示させるためにソースに意味を持たないアルファベットを書かなければならず』←電車時刻表フォント「DiaPro」では意味のある言葉を書かないとアイコンが出ないのでフォント作成者の怠慢でしかないのでは

[shikiarai]

SVGの時代が来ると言い続けて10年以上経ちました。10年後が楽しみですね。

[re_fort]

Lazy Line Painter感動するよね http://lazylinepainter.info

[kurobuchi]

SVGが何も考えず使えるようになったら幅が広がりそう。

[peki2]

SVG！

[aliliput]

ふぁっ最近はブラウザで直接svg表示できるのかーー

[trashtoy]

アイコンフォントはSymbolフォントの「ゥ」でハートマークを表示させるのと同じレベルのバッドノウハウなので、SVG化がもっと促進されるべき

[kaochan0_0]

なるほど

[shino-sun]

アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の

[s99e209]

webフォントよりもSVGの方がデザインしやすそうなので今度やってみよう。

[lastel]

わかりやすい

[jun200]

アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう

[yosi0422jp]

おお、これすごい。時間できたら作ってみよ。→アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス

[emj1025]

SVG

[qrac_jp]

今後、解像度はもっと上がるだろうから習得しておかないとなー。

[kojika17]

object要素を使用したフォールバックの記述もあると嬉しかったです

[hedeyoshi]

SVGスプライトのやり方。面白そうだけどうちの案件ではまだ使えなそう。