SVGスプライトアイコンの作り方・使い方 - 一休.com Developers Blog
この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 アイコンは、一般的に、以下のような方式で使用されると思います。 ビットマップ画像(gif, png等) アイコンフォント(Font Awosome等) SVG このうち、ビットマップ画像によるアイコンは拡大・縮小に弱いため、様々な解像度の画面に対応する必要のある現代には不向きです。アイコンフォントはベクター画像なので拡大・縮小に強く、豊富なアイコンがライブラリとして提供されているのが魅力です。SVGもアイコンフォントと同様のベクター画像ですが、フォントには
SVG アイコンを CSS 変数とか併せて良さげに使う | Basicinc Enjoy Hacking!
こんにちは。@rigani_c です。 みなさん、SVG 吸ってますか？ SVG 吐いてますか？ Web ページ上で自前の SVG アイコンを使用するときの良さげな手法を持ってきました。 結論からいうと SVG スプライトを use タグ使って id 指定で呼んで CSS 変数でスタイルを変更する。更に currentColor 使うと WebFont っぽくなって最高 です。 環境は macOS Mojave の Chrome 70 です。 それではご査収ください。 本記事で SVG アイコンに求めたいこと 以下の通りです。 Web サイト内共通の CSS でパーツごとに色を変えられる ページの表示を阻害しない 修正や管理が楽にできる（@rigani_c 的に） これだけ満たしていれば御の字ですね！ そもそも SVG ってそんなにええのん？ めっちゃいいです。 PNG で 50KB とか
Multi-Colored SVG Symbol Icons with CSS Variables | frontstuff
Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects. Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add tran
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
Mediumに学ぶ！SVGシンボルとCSSでロゴやグラフィックを効率よく使い回すノウハウ
SVGの一部をCSSで操作してもっと効率よく使い回ししたい…そんなときは、ちょっとした発想の転換が必要です。ヒントはMediumのロゴにありました。 2016年、SVGは、ファイルサイズ、スケーラビリティ、CSSのおかげで、Webページで広く使われるようになりました。 場合によってはアイコンフォントのほうが好まれることもありますが（「Build Your Own SVG Icons」参照）、アイコンシステムとして使われることもあります（「The Great Icon Debate: Fonts Vs SVG」参照）。 それだけではありません。SVGはロゴやグラフィック要素にも使えます（少なくとも、過度に複雑なものでなければ）。また、もともと柔軟性に富んでいるので、レスポンシブなWebサイトを作るには完璧な味方になってくれます（Sara Soueidan「Making SVGs Respon
How SVG Fragment Identifiers Work | CSS-Tricks
The viewBox attribute goes: left, top, width, height. Note that second attribute, the top, notching up by 32 each time. We’re just showing a different part of the whole document. Adding those special viewBox’s into the SVG itself You can drop those special, specific viewBox values into the SVG in a <view> element, that is specifically for this: <view id="icon-clock-view" viewBox="0 0 32 32" /> <vi
asamuzaK.jp : ♪Story in the SVG また繋がるフラグメント (c) AAA
使えば爽快！ SVG Spriteの改訂版。 SVGのsymbolとuseを使ってSVGスプライトを利用する方法を、再度、考えてみた。 SVG#fragmentを利用したSVGスプライトのテストケース Safari用のバグ対策を施したテストケース 今回のSVGのサンプルソース。 ターゲットになっていないuse要素はCSSで非表示にしてしまうことがコツといえばコツ。 あと、ルートのsvg要素には、widthもheightもつけず、viewBoxのみ。 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"> <style> use:not(:target) { display: none; } </style> <symbol id="re
‘Reskinnable’ SVG Symbols: How to Make Them (..and Why) — SitePoint
‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)Canvas & SVGDesignHTML & CSSIllustrationSketchUI Design The widespread adoption of SVG in modern web pages has really ramped in 2016 thanks to its, file size, scalability and CSS. It can be used for icon systems (take a look at Build Your Own SVG Icons), although icon fonts, in some cases, can be preferable (some info here: The Great Icon Deba
外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する | UNORTHODOX WORKBOOK | Blog
SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても、CSSで背景画像として表示させるものではなく、HTMLにインラインで表示させるためのSVGスプライトになります。 何もしなくてもuseタグのxlink属性で外部SVGファイルを参照できることは知っていたのですが、IE9+でサポートされてなく、またEdgeでも怪しいとのことだったので、その方法は利用してきませんでした。ポリフィルを使ったフォールバックもあるようですが、そのためだけのフォールバックも何だか気持ちが悪かったので。。 今までやっていた方法 これまではbodyの開始タグすぐ下にsvgタグを置き、その中へ画像ごとにsymbolタグで囲み直したsvgをずらーっと並べus
SVG Quirk Test
* = Safari does not support SVG Stacks ** = 15 sprite requests with fragment identifier + 1 request for sprite without fragment identifier Test method The tests were run with a simple Python server based on the script below. The amount of requests are counted according to the log in the command line. The files tested are exactly the same as the linked pages in the comparison table. The Cold cache
SVG Sprite Workflow That Works
Update (08 Sep 2017): I found that sometimes SVG icons don’t appear on IE11 even if the SVG code looks good. One of the examples is: The solution on IE11 is to remove the .st# classes in the <path> 😮 and define the color with CSS explained below. So the above SVG code may should look like: Update (23 Sep 2016): One of my colleagues (Michal Prazuch) noted me that xlink:href is not working on Safar
実践、SVGスプライト | 前編 SVGアイコンの実装手法
ビットマップ画像スプライトは、フルカラーという利点がありますが、ビットマップであるがゆえに拡大縮小に弱く、マルチスクリーン対応をするシーンでは、これが大きな欠点となります。 一方でアイコンフォントは、フォントがベクターデータであるため拡大縮小に強く、またCSSのcolorやfont-sizeを利用することで、色や大きさのバリエーションを用意できますし、:hover擬似クラスとの相性がいいのも特長です。ただし単色という欠点があります。フルカラーが求められるアイコンなどには不向きです。 SVGでアイコンを埋め込む SVGはスケーラブルかつフルカラーであるという特長があります。つまりビットマップ画像スプライトやアイコンフォントの欠点を補うことができます。ではどのようにアイコンを埋め込めばいいのでしょうか。 SVGの、特にアイコン向けの埋め込みは3つの方法が知られています。 インライン埋め込み（テ
SVG icons are easy but the fallbacks aren't
Use of the icon font is in decline. Recently it’s been argued that there are many good reasons to think about not using them and switch to using SVG images instead. At the Financial Times we agree that, on balance, it’s time to explore the transition for ourselves. Browser support for SVG is very good; over 94% of browsers have full compatibility with the SVG 1.1 spec and you can raise that to 96%
How to work with SVG icons
There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team at Kaliop. It works well for our needs, which include: Content and communication websites, often based on big CMSes, rather than full-JS web apps. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context
Introducing spritesh
We at Edenspiekermann are big fans of Gulp. We use it in most of our projects, even Rails ones to replace or rather connect to the assets pipeline. Gulp is usually responsible for most of our build process in basically any project. But on small projects, like single page websites or tiny websites, we don’t really need Gulp. However, we still need to be able to build our SVG sprites. Our usual proc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
Quick Tip: SVG <use> Style Two Colors by Fabrice Weinberg on CodePen
Safari SVG Sprite Bug? - Nico Brünjes
https://glitter-style.jp/labo/web-resource/svg-sprite-usage-2/