商用利用無料、UIデザイン用のSVGアイコンが220種類！改変・再配布も可の太っ腹ライセンス -System UIcons
システムとプロダクトのUI用にデザインされた、オープンソースのSVGアイコンを紹介します。Webサイトやスマホアプリに最適です！ アウトラインのシンプルなデザインで、220種類のアイコンが揃っています。SVGなので、サイズやカラーなども簡単に変更して利用できます。 System UIcons System UIcons -GitHub System UIconsの特徴 System UIconsのダウンロード System UIconsの使い方 System UIconsの特徴 System UIconsは、システムとプロダクトのUIによく使用されるアウトラインのアイコンです。フォーマットはSVGなので、使いやすいと思います。 ライセンスはThe Unlicenseで、商用プロジェクトでも無料で利用できます。改変・再配布もOKです。
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
SVGにも対応！滑らかな動きを実現するモーションライブラリ11選
iPhone Xには「Super Retina HDディスプレイ」が搭載されており、今後のスマートフォンの主流が「超高画素」になることは間違いないでしょう。 これらのディスプレイでJPEGやGIF画像を見ると画像が荒れて見えることがありますが、その対処法としての画像が劣化しないSVGの使用の拡大は、Webデザイン界では急務となっています。 ベクターデータは、単に静止画像で活用されるだけでなく、アニメーションでの利用もしやすいのが特徴です。しかし、SVGなどをそのままアニメーションに利用するのは難しいので、モーションライブラリと呼ばれるアニメーション用ライブラリを導入するのが手っ取り早いでしょう。このようなライブラリを使えば、JavaScript側で、関数などを使ってアニメーションを実装できるようになるからです。 今回は、滑らかな動きを実現するJavaScriptモーションライブラリ11選を
ビジネス系のイラストはおしゃれなのが無いと困っている人に！商用無料で使えるイラストのSVG素材 -unDraw
ビジネス系のサイトをはじめ、ランディングページ、ポートフォリオ、もちろん個人ブログにもぴったりなイラストのSVG素材が無料でダウンロードできるサイトを紹介します。 シンプルでセンスのあるイラストが揃っており、しかもクレジット表記不要の太っ腹ライセンスなので、使い勝手がよいと思います。 unDraw unDrawの特徴 イラストのSVG素材 素材のダウンロード unDrawの特徴 unDrawではランディングページ、スマホアプリ、プロダクトなどで利用できるイラストのSVG素材が無料でダウンロードできます。 イラストのフォーマットは、SVGと透過PNG イラストのテーマカラーは変更可能 MITライセンスで、使用時のクレジット表記は不要 テーマカラーの変更は、オンラインで簡単にできます。SVGだけでなく、PNGにも対応しています。
種類豊富でカラーバリエーションも豊かなアイコンセット「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」
種類豊富でカラーバリエーションも豊かなアイコンセット「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」 ユーザーを視覚的に誘導してくれるアイコン。1つの種類でカラーバリエーション豊かなものがあると、アイコンのばらつきで雰囲気を損ねることなくデザインに統一性を持たせることができます。今回ご紹介する「Freebie: Funkies Icon Set (100 Icons, SVG & PNG)」は、5つのバリエーションでデザイナーの役に立ってくれるアイコンセットです。 シンプルでミニマルなテイストのアイコンが100種、セットでダウンロードできるようになっています。 詳しくは以下 フルカラーのもの、枠線にグラデーションがかかったもの、くすんだ色味など、さまざまなバリエーションが収録されており、表現したいテイストによって使い分けることができそう。
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
IllustratorとIcoMoonでSVGスプライトのラクラク設定！
2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、本当にコーディングがめんどくさい！新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト！ SVGスプライトとは？ SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」に目
SVGのPathをアニメーション化してくれる大人気jQueryプラグイン「DrawSVG」
Pathを書こう 基本的なPathの動きは全てHTMLに書かれている。 以下のHTMLタブを参考にしてみるといいだろう。 シンプルな使用法 See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. スクロールでPathを移動する。 See the Pen Draw on scroll by Leonardo Santos (@lcdsantos) on CodePen. イメージのMaskPathをアニメーション化する。 See the Pen Animate mask path by Leonardo Santos (@lcdsantos) on CodePen. その軽さ2キロバイト以下という軽量化ぶり。1年前は1キロバイト以下だったんだけども、少しずつ機能が追加されていますね。それでも十分な軽さです。 お
ほんのちょっと高度なSVGスプライトの使い方
当ブログではちょくちょくSVGについて書いていました。 （といっても、ほぼ月一更新なので、前に書いたのは1年くらい前かもしれませんが……） みなさま使ってらっしゃいますでしょうか？ 今回は「ほんのちょっと高度なSVGスプライトの使い方」と銘打って、『グラフィックのモジュール化』を行うための基礎的な考え方と方法をお伝えします。 ロゴにこそ、使ってみようSVGスプライト このブログでもロゴ（というレベルのクオリティではありませんが…）をSVGで表示させています。 また、お気付きの方もいらっしゃるかと思いますが、このトピックス「Web Resource」とその他のトピックスでは使用しているロゴの形状が異なっています。 しかし、これらはすべて「一つのSVGスプライトファイル」の中の「同一データ」です。 アイコン等をひとまとめにして、httpリクエストをみだりに増やさず、かつ非常に軽量（これだけのグ
SVGの画像を表示してみよう - リシンプル
いろいろな表現ができるウェブページですが Retinaなど、解像度が異なるデバイスで表示した際に カクカクの画像になるのが、かなりデザインという観点から許せない。 そんな時に、使えるのが「SVG」。 結構前からある技術ではありますが、なかなか浸透はしないようです。 それもそのはず。 今までIE8などのブラウザでは、表示できないこともあり 一般化してなかったのです。 ただ、HTML5の普及とともに多くのブラウザーでサポートされるようになり 去年あたりから徐々に見かける機会が増えてきました。今回はそんなSVGの表示方法や 非対応ブラウザの処理をまとめていきます。 1. SVGって何なの？ ]SVG（Scalable Vector Graphics）は、Illustratorなどで作成したようなベクター画像を表示する技術です。 JPEGなどの画像は、拡大したり縮小したりすると、どうしても�丸い部
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
200種類の汎用性に優れたSVGアイコンとその使い方が勉強になる！新しいデザインに役立つUIコンポーネント素材 -WPF UI
今までとは一味違う新しいデザインを組み立てるのに役立つ、美しくデザインされたUIコンポーネント素材を紹介します。アイコンを得意としているクリエイターの制作なので、汎用性に優れたアイコンが素材に含まれているだけでなく、その使い方にも注目です。 素材は商用無料で、ライセンスは良い子だけが使える「Good Boy License」。 手を洗わない子は使っちゃダメ！ WPF UI Framework WPF UI Framework -GitHub ダウンロードできる素材のフォーマットは、2種類。 .psd (Photoshop用) .sketch (Sketch用) アイコンは、200個の.svgファイルで含まれています。 コンポーネントにはWindows 8をテーマにしたさまざまなものが揃っています。 200種類のSVGアイコン オフキャンバス メニュー ソート機能付きのグリッド ツールバー
sprite画像はもう終わり？gulpでIcon Fontをつくろう！ | Goodpatch Blog
こんにちは。太朗です。 最近案件で使ったアイコンフォントが便利だったのでご紹介致します。 アイコンフォントのメリット スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！ アイコンフォントをgulpで作る では、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。 以下がgulpファイルの例です。 gulp.coffee 'use strict'; gulp = require 'gulp' $ = require('gulp-load-plugins')() # svg を圧縮する gulp.tas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール
これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges
スマホに合ったステップリストをインラインSVGで ｜ スターフィールド株式会社
SVGの最適化や操作法、アニメーション等の使い方をまとめた・「SVG ON THE WEB」
CSSやSVGで実装するローディングアニメーション - NxWorld
SVGのシンプルなローディングアニメーション画像を手軽に作成出来る・「SVG Circus」
