毎日使う開発者ツールを、すべて一か所に。

コンバーター、フォーマッター、ハッシュ、バリデーター、そして何度も開き直す小さなユーティリティが、タブの海に散らばることなく一か所にまとまります。

/ ツール

■

/ ツールファインダー

109 個のツール

/ SVG ビューアー

SVG コード

プレビュー幅 (px)

プレビュー高さ (px)

/ 選択中のツール

■

SVG ビューアー - 無料のフォーマッターツール

シンタックスハイライト付きで SVG コードを表示・プレビューします

■ 01

SVG とは?

SVG (Scalable Vector Graphics) は、2 次元グラフィックス用の XML ベースのベクター画像フォーマットです。ラスター画像とは異なり、SVG は品質を落とさずに任意のサイズに拡大縮小できるため、ロゴ、アイコン、イラストに最適です…

■ 02

どのように動作するのか?

テキストエリアに SVG コードを貼り付けます。ツールはライブプレビューを表示し、コードをシンタックスハイライト付きで表示します。プレビューの寸法を調整して、SVG がどのように拡大縮小するか確認できます。「Copy」ボタンで SVG コードをコピーできます…

■ 03

サンプルケース

シンプルな円と path 要素をカバーしているので、一般的な入力と出力をすばやく比較できます。

/ 関連ツール

/ コード

■

選択したツールのソースコード。右側のライブ版と並べて表示されます。

/ ソースコード

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG