Resource - SVG

SVGのカスタムシェイプを直感的に作れるシンプルなWebアプリ・「Shape Divider」

Shape Divider Shape Dividerはヒーローイメージやセクション間で使えそうなSVGのカスタムシェイプを直感的に作れるシンプルなWebアプリです 実際に完成図を見ながらセッティング、作成できるので特別な知識な...

任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタ・「Norde Source」

Norde Source Norde Sourceは任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタです 各OSに対応したデスクトップアプリで現在は無料で利用する事が出来ます ...

任意のSVGに自由に色付け出来るシンプルなデスクトップアプリ・「SVG Splash」

SVG Splash SVG Splashは任意のSVGに自由に色付け出来るシンプルなデスクトップアプリです 使い方も簡単で色を選んで変更したい箇所をマウスでクリックするだけです。あとはコードをコピーしたりダウンロードしたり ...
Ads

シンプルで汎用的な、オープンソースで提供される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と似たような感じでしょうか。フォルダを作ってセットで管理しつつ、アイコン単体にタグ付けす...

用意された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...
Ads