7,000+ Icon Fonts, SVG, 3D Icons and Animated Icons with Unicons by IconScout
Discover the ultimate collection of free icon fonts, SVG icons, 3D icons and animated icons with Unicons Bring your designs to life with free icon fonts, SVG icons, 3D icons and animated icons with Unicons by IconScout. Whether you’re a designer or developer, Unicons has you covered with high-quality icons in a variety of icon styles such as line, monochrome, solid and thin line.
Iconbuddy — 200K+ open source free svg icons
The ultimate source for icons.Download, Customize, Edit and Personalize. Over 200k+ open source icons.
Generate unique SVG design assets | Haikei
Growing number of generatorsGet started with one of our flexible SVG generators that will help you create unique data-driven shapes without hassle. Choose between stacked or layered waves, steps, peaks, blobs, symbols, grids, gradients, and much more. Easy to integrate into your workflowWhether you are creating a poster or a website, integrating Haikei into your workflow is easy! Export your backg
Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく
WebサービスやWebサイトを開発するうえで最低限おさえておきたいアクセシビリティのポイントを雑多に挙げてく。ある程度のボリュームになったら記事にする予定。
SVGのviewBoxをわかりやすく紐解く｜NEWS｜株式会社INDETAIL（インディテール）
11月も後半になり今年も残すところあと僅かとなってきました。 こんにちは、rockdです。 皆さんはSVG使ってますか？ はじめてSVGを使うときにイマイチよくわからないのが、viewBoxの設定です。 今回はそんなわかりづらいことで有名な（？）viewBoxについて解説していきたいと思います。 viewBoxとは？ viewBoxはsvgタグの中に記述する属性です。 viewBoxを指定することで、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定します。 viewBoxで指定できる値は4つです。 viewBox="x, y, width, height" x,yは左上からみたx座標とy座標の位置、そしてwidth,heightは描画エリアの幅(座標値)と高さ(座標値)です。 4つの値は、カンマもしくは半角スペースで区切って使うことができます。 サンプルを使って解説 vi
SVGの描画領域 - Qiita
ビューポート 図形を描画する領域のサイズです。 一番外側のsvgタグのwidth、heightで指定します。 (svgタグにposition:absoluteやposition:fixedが指定されていればpositionが優先されます) ビューポートの単位 長さの単位は em, ex, px, pt, pc, cm, mm, in, %を利用できます。 単位を省略した場合はpxになります。 ビューボックス viewBox属性 SVGの描画領域の定義に使います。 viewBoxで指定できる値は4つです。 viewBox="x, y, width, height"(カンマか、半角スペースで区切る) 値 内容
30分でできる！ はじめての「SVGアニメーション」に挑戦【デザイナー向け】 | シグナルバナナ
こんにちは。デザイナーの佐藤です。 今回のテーマは「SVGアニメーションに挑戦」です。Webデザインのお仕事をしている方の中にも、まだSVGやSVGを使ったアニメーションに触れたことがないという方はいらっしゃるのではないでしょうか。 実は、SVGアニメーションはAdobe Animate CCのアドオンを使用して簡単に作成できます。シグナル社内のデザイナー勉強会で好評だった初心者向けの作成手順を、みなさんにも公開します！ そもそもSVGとは？ SVG（Scalable Vector Graphics）とは、ベクター形式で画像を表示するフォーマットです。JPEGやPNGなどのビットマップデータとは違い、座標などの数値をもとに計算式によって画像を描画するため、次のような特性を持ちます。 ・ファイルサイズが小さい ・拡大縮小しても画質が劣化しない ・アニメーションに利用すると、GIFアニメよりも
【svgアニメーション】After Effectsで制作したアニメーションをWebで使う方法（Lottie） | PRAWN COCKTAIL(プロウンカクテル)
この記事の目標「After Effects」と「Lottie」というアニメーションライブラリを利用してWebアニメーションを制作してみたいと思います。 試しに作ってみたものがこちらです。 このように「After Effects」で制作したアニメーションをWeb上に表示させるまでを今回の記事の目標にします。 流れとしては以下のようになります。 「After Effects」でアニメーションを制作。「Bodymovin」を使いJSON形式で書き出す。「Lottie」を使って実装する。 BodymovinをインストールまずはAfter Effectsのプラグインである「Bodymovin」をインストールします。 Adobeからダウンロードできます。 のはずが上手くいかなかったので以下の方法でダウンロードしました。 LottieのGitHubからダウンロードします。 赤枠のボタンをクリックするとツ
商用利用無料、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です。
SMILによるSVGアニメーション - Qiita
SMILはSynchronized Multimedia Integration Languageの略で、SVGのアニメーション機能です。 ※IEはSMILをサポートしていません。 SMIL以外の方法でのSVGアニメーションはこちらをご参照ください。 SVGのアニメーション方法の比較 主なタグ(3種類) animate animateTransform animateMotion animate 単純なアニメーション キーフレームが始点と終点のみのアニメーションに使います。 <svg width="600" height="600" viewBox="0, 0, 600, 600" xmlns="http://www.w3.org/2000/svg"> <circle cx="10" cy="10" r="10" fill="#3498db"> <animate attributeType
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
SVGのアニメーション | mkasumi.com
CSSのアニメーションやSVGを勉強している間に、SVGもアニメーションできることを知ったので触ってみました。 SVGでアニメーションさせるには3つの方法があります。 SMILアニメーション Javascript CSSアニメーション どんなことができる？ Shape Hover Effect with SVG jQuery Rain | Border Animation Effect with SVG jQuery Rain | Circular Progress Button with SVG How to style SVG with CSS - part 2/3 | Le blog de Studio.gd hoverしたときの動きとか、SVGのパスで特殊な表現ができるようになる。 普段使っているCSSでもアニメーション事態は可能なので学習のハードルが低い。 実際に作ってみる 今回
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Icônes
もうこれでSVGアイコンを探すときに困らない！ 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
SVG Repo - Free SVG Vectors and Icons
All Vector Collections - SVG Repo
Free Line Icons for a Sleek UI - Unicons | IconScout
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
Blobs.app - Generate Beautiful Blob SVG Shapes
Webクリエイター ボックス on Twitter: "SVG：imgタグで設置したSVG形式の画像をインラインに展開→CSSで装飾できるようにするスクリプト【deSVG】 https://t.co/w9y9ZW7P81"