これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
SVGとPNG完備のおしゃれなイラスト素材！ あらゆるメディアで完全無料で利用できる太っ腹ライセンス -Transhumans
商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく、イラスト素材のダウンロード方法から。 イラストをクリックすると各イラストのページに移動するので、「download SVG」「download PNG」ボタンをクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr
これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
ソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロー...記事の続きを読む
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ
SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在
Webサイトやスマホアプリをはじめ、プレゼン・スライド・インフォグラフィックなど、さまざまなプロジェクトで無料利用できる矢印・アローのSVG素材を紹介します。 矢印・アローは200種類以上あり、すべて手描きです。直線でデザインされたのもいいですが、手描きもなかなかいい味をだしますよね。 Handy Arrows Handy Arrows -GitHub Handy ArrowsはDaryaKroによる手描き矢印のギャラリーです。SVGコードを1クリックでコピー、Reactコンポーネントに即時に変換、SVGファイルを1クリックでダウンロードできます。 ライセンスはCC BY 4.0で、個人でも商用プロジェクトでも無料で利用できます。ただし、クレジットの表示が必要となります。
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
選択 ベクター化したいビットマップ画像を選んで、このページにドラグ・ドロップしてください。 JPEG や PNG などのビットマップ画像は、それぞれの色を備えた「ピクセル」と呼ばれる小さな正方形のグリッドで表現されています。 処理 画像は、分析、処理され、ピクセルから幾何学的図形に変換されます。 その結果生成されたベクター画像は、ぼやけることなくどんな解像度でも拡大・縮小することができ、印刷、切り抜き、刺繍、その他に使用することができます！
How to Draw a Clock with SVG and JavaScript that Shows the Actual Time
Use text-to-svg to create unique SVG cut files with our AI Generator tool. 100% FREE, no signup.
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。 SVGとは SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。 また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。 ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。 SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体の
SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos – Svgl A beautiful library with SVG logos – Svgl 各サービスのロゴはSVG形式でコピーまたはダウンロードすることができます。 「Svgl」では下記のジャンルに分かれた形で様々なサービスロゴが400種類以上も提供されています。 ※2024年5月28日現在 ・AI – 人工知能 ・Browser – ブラウザ ・CMS – コンテンツ管理システム ・Community – コミュニティ ・Compiler – コンパイラ ・Crypto – 暗号 ・Database – デ
SVG Flag Icons
Powered by Nucleo: Icon Manager for Mac/Windows SVG Flag Icons Explore over 200 optimized SVG country flag icons — Perfectly crafted on a 32px grid No results found. Suggest missing flag. SVG Flag of Aaland Islands SVG Flag of Afghanistan SVG Flag of Albania SVG Flag of Algeria SVG Flag of Andorra SVG Flag of Angola SVG Flag of Antigua Barbuda SVG Flag of Argentina SVG Flag of Armenia SVG Flag of
GitHub - yawaramin/dream-html: Render HTML, SVG, MathML, htmx markup from your OCaml Dream backend server
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
サイト制作・ブログ・WEB開発・Notionに幅広く使える！SVGアイコン(SVG ICONS)素材サイトを紹介「サイトにSVCアイコンを取り入れたい」「ブログをかっこよくしたい」「無料で使えるSVCサイトが知りたい」 SVGアイコン(SVG ICONS)素材の需要は高いです。しかしSVCアイコンサイトはたくさんあり、どのサイトを使えば良いのかよく分からず、選ぶのも面倒ですよね。 そこで今回は、無料で使えるSVCアイコンサイトをサイトの特徴と併せて紹介します。自分にピッタリのSVCアイコンサイトを見つけましょう。 今回紹介するSVGアイコンサイトはすべて「無料」「商用利用可能」ですが、利用規約が変更になっている場合もありますので、必ず公式サイトの利用規約を確認してからダウンロードするようにしてください。
X (旧Twitter)のSVGロゴアイコン Twitterの名称がXに変更され、ロゴのアイコンも青い鳥から黒いXに変更されました。 今後はWebサイトで使用されているTwitterアイコンをXアイコンに差し替える作業が必要となります。 SVGロゴアイコンの作成方法と保存場所 Xの黒のSVGのロゴのアイコンの素材は、公式では用意されていません。 しかし、XのヘルプセンターなどのXのロゴのアイコンがSVGになっているので、これを利用すればXのロゴをSVGで作成できます。 SVGのコード作成 Xの公式サイトで使用されているSVGのパスを不要なコードを除くと以下のようになります。 <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg"> <path d="m714.163 519.284 446.727-519.284h-1
GitHub - rossmoody/svg-gobbler: Open source browser extension for finding, editing, exporting, optimizing, and managing SVG content.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Illustratorでアイコンなどを余白も含めた正方形サイズでSVG書き出しするベストプラクティス｜DTP Transit 別館
池原さんが問題提起されていた「アイコンなどを余白も含めた正方形サイズでSVG書き出し」する方法について考えてみます。 Illustratorで、アイコンなどを余白も含めた正方形サイズでSVG書き出ししたい場合、一番スマートな方法は…？ — けんじ / UX Designer (@kenji_clown5) January 30, 2024
VSCode で drawio.(png|svg) を使うと捗る - Link and Motivation Developers' Blog
お久しぶりです。データユニットの みく / Ryo Koizumi (@slpwalks) です。 みなさん、作図はお好きですか？ なんだかんだでかっちりとしたアーキテクチャ図を書くときは draw.io (drawio.com) にお世話になることが多いですが、ファイルの扱いがちょっとめんどくさいなと思うことが多いです。 drawio ファイルをそのまま Confluence, Notion などのページに埋め込むと描画が遅い レンダリング済みの画像ファイルを置くと後の人が編集できない 両方置くと同期を取るのが大変 編集可能なアーキテクチャ図という革命 draw.io には VSCode Extension が存在し、VSCode からシームレスに drawio ファイルを扱うことができます。 marketplace.visualstudio.com これだけでも便利ですが、「ファイル」
今回は、 SVG と CSS でアニメーションを作る方法をご紹介します。 Step1. 破線を作る まず簡単に、直線をアニメーションさせるところから始めましょう。SVG で線を引くには <line> 要素を使います。 <!DOCTYPE html> <html lang="ja"> <head> <style> .my-line { stroke: #000; stroke-width: 3; stroke-linecap: round; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 30"> <line class="my-line" x1="10" y1="18" x2="300" y2="18" /> </svg> </body> </html> 上記のコードをブラ
リッチな表現に！After Effectsを使った動くSVGアニメーションの作り方と実装方法｜BiNDup こんにちは、デザイナーのオモトです。 私がノーコードCMS「BiNDup」を使う上で、活用している実用的なカスタマイズ・テクニック第3弾です。 今回は、「Adobe After Effectsで作ったSVGアニメーションの作り方と、BiNDupに実装する方法」について解説します。 専門用語や工程数が多く、複数のアプリを経由する、だいぶ高度な使い方になるので、こういうこともできるんだなーぐらいに思っておいていただけると幸いです。 また複数のアプリを経由すると、編集データや素材がごちゃごちゃして、後で見返した時に大混乱が起きることが多いので、フォルダの整理方法を含め、丁寧に解説していきます。 設定できなかった方にはAdobe IllustratorとAfter Effects、BiNDu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG アイコンの表示に mask-image CSS プロパティを使用する
地味に役立つ！ 手描きでさまざまな形状がいい感じ、200種類以上の矢印・アローのSVG素材 -Handy Arrows
「Microsoft Edge」がSVG画像のコピペに対応 ～他のChromium系ブラウザーにも恩恵／ネイティブアプリとのやり取りも簡単に
UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
PNG や JPG ファイルをオンラインで SVG ベクターに変換 - Vectorizer.AI
SVG Tutorial - Learn how to code images in HTML with SVG
AI text prompt to SVG
Freestyle SVG Exporterを使用してBlenderで作成したモデルをイラストレーターでも使えるSVG形式で書き出す方法｜3DCG最新情報サイト MODELING HAPPY
様々なサービスロゴをSVG形式でダウンロードできる「Svgl」｜BLACKFLAG
SVGアイコン素材サイト14選【無料・商用利用可】Notionからサイト制作まで自由に。 | KodoCode
X (旧Twitter)のSVGロゴアイコンの作成方法と保存場所
SVGでラインアニメーションを作る - Qiita
リッチな表現に！After Effectsを使った動くSVGアニメーションの作り方と実装方法｜BiNDup｜成果につながるWebスキルアッププログラム