高解像度ディスプレイでもきれに表示できるSVG形式の画像。アイコンの表示などでは一般的に普及してきたかと思います。SVG形式ではカスタマイズがしやすいところもメリットのひとつですね。今回はブラウザー上で簡単に自分好みに変更できるSVGアイコンや背景パターン、イラストを配布しているWebサイトを紹介します。

↑私が10年以上利用している会計ソフト！

SVGアイコン

ICONSVG

ICONSVGは矢印やインターフェイスまわりで使えるシンプルなアイコンを揃えています。サイズや線の太さ、色などをカスタマイズできます。SVGコードが表示されるので、そのままコピペして利用できますよ。「Download icon」ボタンからファイルをダウンロードすることも可能。商用利用OK。

Ikonate

IkonateもシンプルなSVGアイコンをまとめています。サイズや太さ、色をカスタマイズし、必要な分だけ選択してダウンロードできます。SVGファイルの他、インラインで記述されたHTMLファイルも含まれているので、そこからコピペ可能です。商用利用OK。

SVG背景パターン

SVG Backgrounds

SVG Backgroundsでは、シマシマやドット、モザイク柄など、あらかじめ用意されている様々なパターンの色をカスタマイズできます。CSSコードが表示されるので、背景画像として設置したいセレクターに指定しましょう。例えば body の背景にしたいなら、以下の位置に貼り付けます。

CSS

body{
  /* ここにCSSコードをコピペ */
}

ライセンスはCC BY 4.0。有料プランもあります。

SVG Pattern Maker

SVG Pattern Makerは丸、四角、ラインを使ったシンプルなパターンをカスタマイズして作成できます。SVGファイルをダウンロード可能。「データをコピー」したものは背景画像のurlとして指定します。background-attachment: fixed; を併記しないとうまく表示されません。

CSS

body{
  background: url(' /* ここにコピーしたコードを貼り付け */ ');
  background-attachment: fixed;
}

SVG STRIPE GENERATOR

SVG STRIPE GENERATORではシンプルなラインのみを扱っています。色や角度、線の幅をカスタマイズできます。「CREATE SVG FILE」ボタンをクリックすると背景として設置するためのコードが表示されます。こちらも background-attachment: fixed; を併記するといいでしょう。

CSS

body{
  /* ここにコピーしたコードを貼り付け */ ;
  background-attachment: fixed;
}

Hero Patterns

Hero Patternsも同様に、用意されたパターンの色や透明度をカスタマイズできます。コードをコピペして背景として利用可能。装飾のないSVGファイルをダウンロードすることもできます。

CSS

body{
  /* ここにCSSコードをコピペ */
}

ライセンスはCC BY 4.0。

Trianglify.io

Trianglify.ioはグラデーションがきれいなローポリ風パターンを作成できるジェネレーター。サイズや形、含める色を変更できます。保存は画面下の「EXPORT」ボタンから。SVGの他、PNGでもダウンロードできますよ。

SVGイラスト

unDraw

スタイリッシュなデザインにうまく取り入れられそうなイラストを扱うunDraw。イラストそのものは変更できませんが、画面上部からアクセントカラーとなる部分を好きな色に変更できます。画像をクリックしてSVG、PNG形式でダウンロード可能。商用利用OK。

ManyPixels

ManyPixelsもイラストの色をカスタマイズできます。アクセントカラーだけでなく、全体の色味が変更できますよ。ビジネスシーンやスポーツのイラストも多々あります。SVGとPNG形式でダウンロード可。商用利用OK。

様々な場面で使えそうな汎用性の高いものが多いですね！みなさんのおすすめもあれば教えてください！