コンテンツへ移動
SVG Nexus / EXPLAINER 登録不要 | 100%ブラウザ完結処理

SVGとは?

SVG(スケーラブルベクターグラフィックス)はアイコン・ロゴ・イラストのためのブラウザ標準形式です。どんなサイズでも鮮明で、属性1つで色を変えられます。

1分でわかるSVG

SVGファイルはプレーンテキストです。ブラウザ・テキストエディタ・デザインツールで開き、HTMLのように読み、色・サイズ・形状を画質を劣化させずに変更できます。だからUI・ロゴ・ボタンはベクターで配布されます。

SVG NexusはオープンソースのSVGアイコンライブラリとイラストをカタログ化し、React・Vue・HTML・CSS・デザインツールへそのままコピーできます。登録不要、アップロード不要です。

いくら拡大しても鮮明

パスは数式であってピクセルではありません。同じファイルが16pxのファビコンでもレティナのロゴでも4Kのスライド図でも鮮明です。

属性1つで色替え

fill や stroke を一度変えるだけで図形全体が追従します。CSS の keyframes と hover は、JavaScript なしでインライン SVG に効きます。

テキストは軽い

アイコンは数KBへ圧縮され、どんなサーバーからも gzip で効率よく配信でき、検索エンジンやスクリーンリーダーも読めます。

どのスタックにもコピーできるSVGコード

すべてのツールを見る

カタログのアイコンページもアップロードしたSVGも、ブラウザツールがフレームワーク向けに書き換えます:JSX、Vue、Svelte、CSS、data URI、PNGエクスポート、スプライト。

テーマからSVGアイコンを探す

すべてのカテゴリを見る

カタログは交通・金融・医療・天気・休日などのテーマでアイコンを整理します。テーマを開けば数秒でベクターをコピーできます。

SVGとPNGのどちら?

拡大・色替えが必要なアイコンやUI画像にはSVGを使い、写真に近いディテールやSNS用プレビュー、ラスタライズされる環境にはPNG/WebPを書き出します。どちらも同じソースから出せます。

商用利用も無料

どのアイコンにも元のライブラリとライセンスが表示されます。MIT・ISC・Apache-2.0は商用製品も対応。ブランドロゴは別規定で、いつもライセンス表にあります。

ライセンス →

SVGの質問と回答

SVGはPNGより優れていますか?

アイコン・ロゴ・UIなら「はい」です:SVGは描画命令を保存するため拡大・色替えでき軽量です。PNGはディテールの多いビットマップ出力で便利です。

SVGファイルの開き方と編集方法は?

ブラウザ・テキストエディタ・デザインツールにドラッグします。SVG Nexus Studioならブラウザ内で色・レイヤー・パスを編集できます(インストール不要)。

アイコンを商用利用できますか?

当サイトのオープンソースライブラリはMIT・ISC・Apache-2.0のように商用を許可するライセンスで提供されています。各アイコンページは正確なライセンス名を表示し、ブランドロゴには追加規定があります。

SVGがぼやけて見えるのはなぜ?

ぼやけたSVGは、早い段階でラスタライズされたか、誤ったビューポートサイズで書き出されたものです。最後のレンダリングまでベクターのまま保ち、元ファイルから再出力してください。

SVGアセットから始めよう

カタログを検索し、ブラウザのスタジオでアセットを開き、きれいなベクターコードをそのまま出力:アイコン、ロゴ、イラスト、それらを加工するツールが揃っています。

76,166個のベクターアイコンを検索するには入力してください...

移動 | Enter で開く すべてのアイコンを見る

比較

アイコンの出典とライセンス

ライセンス 商用利用 クレジット 変更と色替え
MIT許可パッケージに通知許可
ISC許可パッケージに通知許可
Apache-2.0許可通知ファイルとともに必須許可
CC BY 4.0許可クレジット必須許可
CC-BY-SA-4.0許可同一条件で配布同一条件で配布
Trademark / Brand参照目的のみ権利者の指針制限あり

アイコンプレビュー