ガイドと記事

SVGとPNGの違い：どちらを使うべき？

Webサイトのアイコンやロゴ、UIには、どんな画面サイズでもくっきり表示されるSVGを使用してください。メール署名やSNS用サムネイルなど固定ピクセル画像が必要な場合はPNGを使用します。

CSSでSVGアイコンをアニメーションさせる方法

インラインSVGにCSSクラスを追加し、stroke-dasharrayのkeyframesでHover色変化や読み込みアニメーションを定義します。

FigmaやブラウザでSVGアイコンを編集する方法

SVG NexusからSVGコードをコピーしてFigmaやIllustratorに直接貼り付けるか、ブラウザ上のベクタースタジオを開いてソフト不要で編集できます。

React、Next.js、VueでSVGアイコンを使う方法

アイコンページのReact TSXまたはVue 3タブを選択し、currentColorとTailwind CSSに対応したコンポーネントコードをコピーします。

インライン SVG と画像タグ

カーソルを合わせた色の変化や CSS アニメーションが必要なら、インライン SVG かコンポーネントを使います。画像検索に載せたいときは、幅、高さ、代替テキストを付けた画像タグを使います。

グラデーションとクリップ ID の衝突を防ぐ

多色のセットは paint0_linear のような内部 ID を再利用しがちです。同じページで 2 つのアイコンが同じ ID を使うと、誤ったグラデーションが描かれます。SVG Nexus はアイコンごとに内部 ID の範囲を分けます。

使いやすいアイコンと RTL の反転

飾りのアイコンは aria-hidden と focusable false で隠します。アイコンだけのボタンには分かりやすい aria-label を付けます。右から左に書く言語では矢印を左右反転します。

外部の SVG ファイルを安全にする

SVG は XML 形式なので、信頼できないファイルにはスクリプトやイベント処理が含まれることがあります。script 要素を削除し、厳しいセキュリティポリシーと nosniff ヘッダーで配信してください。