SVGコードビューワー オンライン - SVGマークアップを確認・プレビュー

SVGとは？

SVG（Scalable Vector Graphics）は、ピクセルデータを保存する代わりに、XMLベースのコードで形状を数学的に記述する画像フォーマットです。JPEGやPNGと異なり、SVGグラフィックはどんなサイズでも完璧にシャープに表示されます。そのため、Webのアイコン、ロゴ、イラスト、UIグラフィックの標準フォーマットになっています。

SVGコードビューワーが必要な理由

• 即座のビジュアルプレビュー：SVGコードを貼り付けると、ベクターグラフィックがリアルタイムで表示されます。
• 壊れたSVGのデバッグ：コードとプレビューを並べて見ることで、問題を簡単に特定できます。
• 圧縮SVGのフォーマット：1行に圧縮されたコードを読みやすいインデント付きマークアップに変換します。
• クリーンなコードのコピー：HTML埋め込み用の整形済みコードをワンクリックで取得できます。
• SVG構文の学習：任意のアイコンを貼り付けて、形状の構築方法を探索しましょう。

HTMLへのSVG埋め込み方法

アイコンにはインラインSVGが推奨されます。CSSでスタイリング可能で、ダークモードに対応し、追加のHTTPリクエストも不要です：

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M..." fill="currentColor"/>
</svg>