Web Tool Lab
/
SVG プレビュー
SVG プレビュー
背景
White
Dark
Trans
書き出し
1x
2x
3x
SVG をコピー
PNG (2x)
SVG コード
クリア
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"> <defs> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f59e0b" /> <stop offset="100%" stop-color="#ef4444" /> </linearGradient> </defs> <rect width="200" height="200" rx="24" fill="#fef3c7" /> <circle cx="100" cy="90" r="40" fill="url(#grad)" /> <rect x="60" y="140" width="80" height="12" rx="6" fill="#d97706" opacity="0.5" /> <rect x="75" y="160" width="50" height="8" rx="4" fill="#d97706" opacity="0.3" /> </svg>
プレビュー
SVGプレビューアの特徴
SVGコードを貼り付けて即座にプレビュー
PNG形式での書き出しに対応
SVGコードの編集とプレビューをリアルタイム連動
アイコンやロゴの確認作業に便利
使い方
1
SVGコードをエディタに貼り付け
2
プレビューエリアで描画結果を確認
3
必要に応じてPNG形式でダウンロード