Resource - SVG

任意の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ファイルをアップロードすると自動で解析し、カ...
Ads

シンプルな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っぽい感じ。使いたい模様をクリックすればメインカラ...

CSSやSVG、GIF等でローディングアイコンを作成出来る・「loading.io」

loading.io loading.ioはブラウザでローディングアイコンを作成、ダウンロードできるWebアプリです。型を選択してサイズやアニメーションのスピード、色等をカスタマイズし、SVGやCSS、GIF等でダウンロードする事がで...

ダミー画像をSVGで作成出来るオープンソースのダミー画像生成ツール・「placeholder.pics」

placeholder.pics placeholder.picsはダミー画像をSVGで作成出来るソフトウェアです。Goで書かれており、OSSとしてソースコードが公開されています。ダミー画像そのものはサイズ指定、背景カラー、グラデーシ...

JavaScriptで作られたSVG背景パターン作成ツール・「Dynamic SVG Background Pattern Maker」

Dynamic SVG Background Pattern Maker See the Pen Dynamic SVG Background Pattern Maker by Dudley Storey (@dudleystorey) ...

EvernoteやVine、Twitterなど、100以上の有名なWebサービスのブランドロゴをSVGアイコンとして公開する・「Simple Icons」

Simple Icons Simple Iconsは日本でもおなじみのEvernoteやTwitter、Facebookなどなど有名なWebサービスのロゴのSVGアイコンセットです。現在137のアイコンが用意されています。よく見かける...

日本にも対応の、地図をピクセルマップ化してPNGやSVGでダウンロード出来るジェネレーター・「Pixel Map Generator」

Pixel Map Generator Pixel Map Generatorは地図をピクセルマップにしてPNGやSVG、HTMLでダウンロードできるジェネレーターです。上図のように日本及びマウスホバーによる都道府県名の表示にも対応し...

CanvasやSVGによるパターンを作成出来る・「Halftone Patterns」

Halftone Patterns Halftone PatternsはブラウザでCanvasやSVGによるパターンをジェネレート出来るWebサービスです。CanvasかSVGかの選択、エレメントと背景色、サイズやエレメントの大きさ、...

SVGの最適化や操作法、アニメーション等の使い方をまとめた・「SVG ON THE WEB」

SVG ON THE WEB SVG ON THE WEBはSVGの使い方をまとめたガイドラインのドキュメントサイトです。SVGの準備、基本的な使い方、最適化法、CSSやJSによる操作、アニメーションエフェクトの付与やRWDへの対応な...
Ads