[B! SVG][fonts] efclのブックマーク

From fonts to SVG: an icon migration strategy

Erwin Hofman (@blue2blond) started building his own CMS in 2004, which is now used by several Dutch web agencies. The CMS also became his playground to eventually help e-commerce agencies adopting and improving (perceived) performance, Core Web Vitals and accessibility. A lot, maybe even too much has been written about icon loading strategies already. CSS-tricks.com already had a great (inline) SV

efcl 2021/12/08

FontAwesome-fatigue icon fontからsvg iconへ

リンク

SVGでプログラマブルな書体を作る話｜dwango creators' blog（ドワンゴクリエイターズブログ）

こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。どういうことかというと、例えばであるとか、といったことができるかもしれない

efcl 2016/06/27

SVGでプログラマブルなフォント

SVG
fonts

リンク

Delivering Octicons with SVG

EngineeringDelivering Octicons with SVG GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes are mostly under-the-hood, you’ll immediately feel… GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While

efcl 2016/02/23

GitHubはアイコンフォントをやめて、SVGを使ったアイコンを利用するように切り替えた。 SVGをアイコンとして埋め込む方法、パフォーマンス、欠点や落とし穴について

fonts
SVG

リンク

Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi

efcl 2014/04/23

アイコンフォントとインラインSVの比較。 IE+9/Android3+ならSVGを使う方が良いとこの話

リンク

The SVG Font Machine | Glyphter

General FAQ Release Notes Feb. 26, 2023 Auto-resize option added in the settingsto allow overriding the default behavior of resizing an icon to fit the box. How do I make an SVG? You can export SVGs from any vector software like Adobe Illustrator, Inkscape or Sketch. File > Save As > SVG I already have an SVG font but I want to add more characters to it. Can I do that with Glyphter? Sure! Just dra

efcl 2014/03/21

SVGを使って任意の文字にアイコンを入れたアイコンフォントを作るツール

SVG
fonts

リンク

安全でアクセシブルなアイコン・フォント

Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？　どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に