Resource - SVG

シンプルで汎用的な、オープンソースで提供される300以上のSVGアイコンセット・「Tabler Icons」

Tabler Icons Tabler Iconsはシンプルで使いやすい、オープンソースで提供される汎用的な300以上のSVGアイコンセットです TablerはOSSのシンプルなダッシュボードを提供するプロジェクトで、その一環で...

Github GistのコードをSVGのダミー画像に変換するWebアプリ・「Faux Code Generator」

Faux Code Generator Faux Code GeneratorはGithub Gistで書いたコードをSVGのダミー画像に変換するWebアプリです 。Github Gistで書いたコードのURLを入力してテーマを...

SVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリ・「Iconset」

Iconset IconsetはSVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリです MacアプリのIconJarと似たような感じでしょうか。フォルダを作ってセットで管理しつつ、アイコン単体にタグ付けす...
Ads

用意されたSVGのシンプルなアニメーションアイコンを編集してダウンロードできる・「Motion」

Motion Motionはあらかじめ用意されているSVGで書かれたシンプルな線画アイコンのアニメーション速度やカラー、ストロークの太さ等を調整してDL出来るソフトウェアです 現在ベータ版となっており、多くのアイコンは無料版で使...

オープンソースのSVGベースなプロトタイピングツール・「UXBOX」

UXBOX UXBOXはオープンソースとしてソースコードが公開されているプロトタイピングGUIツールです。ブラウザで動作します 作成したプロトタイプデータはSVGで吐き出されるそうで、多くのベクターツールで再編集したりWebでの...

シンプルなテキスト言語でダイアグラムを書いてダウンロードできるWebアプリ・「Diagram.codes」

Diagram.codes Diagram.codesはシンプルな書き方でダイアグラムを作成、DL出来るWebアプリです 割と複雑めなフローチャートやシーケンス図など様々なダイアグラムを描くことができます というわ...

モックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」

Wireframer Wireframerはモックアップ等でダミーテキストを表現する為のSVGを作成できるシンプルなWebアプリです たまにインフィニティスクロールのローディング時での採用も見かけますね。テキストが表示されますよ...

任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」

SVG Artista SVG Artistaは任意のSVGにアニメーションエフェクトを付与するWebアプリです。 SVGのコードを貼るか、読み込ませると、コードを解析してCSSを作成、アニメーションさせてくれる、というもの。 ...

1000以上ものシンプルなアイコンをsketchファイルやSVG、PSDやFigmaファイルなども同梱して無償配布するオープンソースのアイコンセット・「Material Icons Library」

Material Icons Library Material Icons Libraryは1000種以上のアイコンを無償配布するオープンソースのアイコンセットです。アイコンはSVGで配布されるだけでなく、sketchファイルやPSD...

SVGアイコンを好みのカラーパレットに変更、ダウンロードできる・「SVG Colorizer」

SVG Colorizer SVG Colorizerは任意のSVGアイコンを好みのカラーパレットで色を変更、ダウンロードできるWebアプリです。アプリ側で用意したアイコンの他、任意のSVGファイルをアップロードすると自動で解析し、カ...

シンプルなSVGアイコンをカスタマイズ後にダウンロードできる・「ICONSVG」

ICONSVG ICONSVGはシンプルなSVGアイコンをカスタマイズした後でダウンロードできるアイコン配布ツールです。アイコンはオリジナルではなく、以前ご紹介したOSSのアイコンセット・Featherを使用しており、太さの調整や角丸...

オープンソースのSVGアイコンのセット・「Ikonate」

Ikonate IkonateはOSSとして公開されているSVGアイコンのセットです。カスタマイズ性、パフォーマンスを重視しているそうです。数もそこそこ用意されており、いずれも汎用的なものとなっています。また、本サイトではカスタマイズ...

SVG製の小規模なチャートを描けるライブラリ・「Dailychart.js」

Dailychart.js Dailychart.jsはSVGにで描ける小規模なチャートライブラリです。主に株価チャートの実装を目的に作られているようです。データは直接カスタムデータ属性に入力して実装する形となります。クセもなく扱...

350以上あるWebフレンドリーでオープンソースなSVGアイコンセット・「BoxIcons」

BoxIcons BoxIconsはWebフレンドリーなオープンソースのSVGアイコンセットです。350以上のアイコンが用意されています。使い方はfont-awesomeライクでCSSを読み込み、classを付与すればいいだけです。 ...

テンプレートをカスタマイズして手軽にSVGの背景を作成できる・「SVG Backgrounds」

SVG Backgrounds SVG Backgroundsは好みのテンプレートを選んで簡単にカスタマイズ、SVG背景として利用できるジェネレーターです。30種ほどのテンプレートが用意されており、それぞれ色やサイズを変更する事ができ...

商用でも無料で使えるSVGで描かれた様々なイラストを公開する・「unDraw」

unDraw unDrawは商用でも無料で使えるSVG製のイラストを公開しているプロジェクトサイトです。ギリシャのイラストレーターさんが作成、公開しているもので、色の変更をしてからのDLも可能となっています。MITライセンスだそうで商...

開発者向けのOSSなSVGアイコン集・「DEVICON」

DEVICON DEVICONは開発者向けのSVGアイコン集です。angularjs、apache、github、gulp、nodejsなどといった、開発者が良く目にするアイコンがまとまっています。SVGなのでカスタマイズもしやすくな...

スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」

Progress Nav Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの...

ブラウザでSVGを編集、ダウンロード出来るWebサービス・「Vecteezy Editor」

Vecteezy Editor Vecteezy EditorはブラウザでSVGを編集、ダウンロード出来るWebサービスです。操作も簡単でわかりやすい印象です。本ツールは、無料のベクター素材を配布するvecteezyが提供しているWe...

markdownでデータも視覚化出来るようにする・「Visdown」

Visdown Visdownはmarkdownでデータも視覚化出来るようにするツールです。markdownのみでcsv等を読み込んでデータ内容をグラフにして表示しよう、というもの。グラフはSVGで描かれます。markdown自体、も...

雪の結晶を作成、svgで保存出来る・「Snowflaker」

Snowflaker Snowflakerは雪の結晶を作成してsvgで保存できるWebサービスです。設定できる項目は1つにするか並べるか、雪の幅、模様のみとなっています。よくある季節ネタサイトですかね。クリスマス向けにいかがでしょうか...

ユニークな模様のパターンをSVGで配布する・「Hero Patterns」

Hero Patterns Hero Patternsはちょっとユニークな模様のパターン素材をSVGで配布するプロジェクトサイトです。結構昔に人気のあったSubtle Patternsっぽい感じ。使いたい模様をクリックすればメインカラ...
Ads