テンプレートをカスタマイズして手軽にSVGの背景を作成できる・「SVG Backgrounds」
SVG Backgrounds SVG Backgroundsは好みのテンプレートを選んで簡単にカスタマイズ、SVG背景として利用できるジェネレーターです。30種ほどのテンプレートが用意されており、それぞれ色やサイズを変更する事ができ...
Resource - SVG
商用でも無料で使える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への対応な...
SVG製の国旗を手軽に表示出来る・「SassyFlags」
SassyFlags SassyFlagsはSVGで作られた各国の国旗を手軽に表示出来るライブラリです。空要素に指定されたclassを振るだけで国旗を表示する事が出来ます。SVGが使われていますので調整もしやすいですね。国旗はAmaz...
SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」
deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように...
SVGアイコンをアニメーションエフェクト付きで切り替える為のスクリプト・「SVG Morpheus」
SVG Morpheus SVG MorpheusはSVGアイコンから別のSVGアイコンへモーフィングさせる為のスクリプトです。非依存型で単体で動作してくれます。導入も楽そう。オプションやらサポートされたイージングの種類は本サイトにて...
描画アニメーションエフェクト付のSVGを作成する為のライブラリ・「vivus」
vivus vivusはSVGアイコン等に描画アニメーションエフェクトを付加出来るライブラリです。strokeDashoffsetプロパティを利用してストロークを管理しているようですね。ライセンスはMITです。詳細は以下より。 ...
SVGの概要や使い方を学べるチュートリアルサイト・「Up and Running with SVG」
Up and Running with SVG Up and Running with SVGはSVGの概要や使い方をざっくり学べるチュートリアルサイトです。SVGとは何か、安全性、ツールの紹介、CSSによるスタイリング、JSによる操...
シンプルなアイコンのSVGコードを公開する・「SVG Icons」
SVG Icons SVG Iconsはシンプルなアイコンを描いたSVGのコードを公開するWebサイトです。まだ3セットほどですが、分かりやすくて良いですね。dribbbleで公開されているフリーのアイコンをSVG化しているようです。...
SVGのシンプルなローディングアニメーション画像を手軽に作成出来る・「SVG Circus」
SVG Circus SVG CircusはSVGのスピナーをオンラインで作成出来るツールです。形状はシンプルですが、お手軽で良いですね。各エレメントのエフェクトを設定してExport SVGを押せばコードが発行されます。 SV...