商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
SVGでレイティングに使用するスター（星形）を実装するテクニックを解説
Webページやスマホアプリで見かけるレイティングに使用するスター（星形）を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の要件 スターを実装する基本のHTML アクセシビリティ SVGを再利用する方法 スターのスタイル 部分的なスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 アウトラインスタイルのスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 スタ
実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック
Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
無料で商用利用できる161種類のSVG形式のアイコンパック「GlyphPack」
同じウェブサイトでもデバイスによってデザインが崩れていたりすると、複数のデバイスを使い回すマルチタスクユーザーにとっては地味ながらストレスに感じるもの。そんなマルチデバイス化が必要なウェブデザインのアイコンにおいて、どんなサイズにしても劣化させずに使えるSVG形式で、無料かつ商用利用も可能というベクターアイコンパックが「GlyphPack」です。 GlyphPack - The Most Indispensable Web Font Icon Pack http://glyphpack.com/ GlyphPackは無料で商用利用も可能、どんなデバイスでも劣化せずに簡単に使えるSVGアイコンパック。今後のアップデートで新しいアイコンが追加されることもあるとのこと。さまざまな用途に対応可能な「アプリケーション」「エラー」「メディア」「ファイルタイプ」「ナビゲーション」「SNS＆ブランド」のア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、UIデザイン用のSVGアイコンが558種類！デザインに合わせたカスタマイズも簡単な優れもの
