SVGスプライトアイコンの作り方・使い方 - 一休.com Developers Blog

2018/12/02 38 users StorYBook アドベントカレンダー 宇都宮 アイコン

この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 ア... 続きを読む

IllustratorとIcoMoonでSVGスプライトのラクラク設定！ | Webクリエイターボックス

2016/02/10 102 users IcoMoon Illustrator SVG形式 一つ一つ

繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、 symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「 IcoMoon App 」を使う方法に落ち着いたので、やり方を紹介した... 続きを読む

ほんのちょっと高度なSVGスプライトの使い方：2 | Design Report – デザインレポート

2015/09/28 29 users アートワーク ほん Design Report 前回 仕様

前回のほんのちょっと高度なSVGスプライトの使い方続きです。 今回の話は一回で済まそうと思っていたのですが 単色アートワークと多色アートワークで必要な知識が変わってくる 1ゆえにSVG各要素の仕様に対する理解が必要 加えてSVG要素へのスタイル適用に関する理解が必要 という点から、一つにまとめると非常に長くかつ複雑になってしまうため、 2回に分け、今回は単純なアートワークでsymbol要素とg要素... 続きを読む

ほんのちょっと高度なSVGスプライトの使い方 | Design Report – デザインレポート

2015/08/20 59 users Design Report 使い方

当ブログではちょくちょくSVGについて書いていました。 （といっても、ほぼ月一更新なので、前に書いたのは1年くらい前かもしれませんが……） みなさま使ってらっしゃいますでしょうか？ 今回は ロゴにこそ、使ってみようSVGスプライト このブログでもロゴ（というレベルのクオリティではありませんが…）をSVGで表示させています。 また、お気付きの方もいらっしゃるかと思いますが、このトピックス「Web R... 続きを読む

GulpでSVGスプライトとアイコン一覧を一発生成 - Bit Journey's Tech Blog

2015/08/04 31 users SVG Gulp dex1t アイコンフォント ベクター素材

2015-08-04 GulpでSVGスプライトとアイコン一覧を一発生成 出口 (@dex1t) です。 ベクター素材をSVGスプライト化し、インラインSVGとして利用する仕組みを作ったので紹介します。 アイコンフォントかSVGか アイコンフォントとSVGの違いは、ググるとたくさん出てくると思うのですが、 現在開発中のサービスはモダンブラウザのみ対象にしている SVGのまま利用すれば、フォント化す... 続きを読む

アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル - かちびと.net

2013/06/24 17 users CodePen PNG SVG pen 備忘録

SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for sprites Check out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが... 続きを読む