SVG Viewer & Editor

このツールについて

SVGマークアップを貼り付けると、ブラウザキャンバスで即座にレンダリング結果を確認できます。SVGはXMLベースのベクター形式で、あらゆる画面サイズで完全にスケールします。

背景モード（チェッカー・白・黒）で透明領域や色のコントラストを確認できます。ズームで細部を検査してください。

使い方

1. EditorタブにSVGコードを貼り付けるか直接入力してください。
2. PreviewタブでレンダリングされたSVGを確認してください。
3. ズームと背景を調整して検査しやすくしてください。
4. 準備ができたらSVGをコピーまたはダウンロードしてください。

活用事例

デザイナーはFigmaやIllustratorのSVGエクスポートを検証し、開発者はインラインSVGマークアップをデバッグし、フロントエンドエンジニアはチェッカー背景で透明領域を確認します。

よくある質問

• SVGコードはサーバーに送信されますか? — いいえ。プレビューはすべてブラウザ内でレンダリングされます。何もアップロードされたり保存されたりしません。
• SVGが空白に見えるのはなぜですか? — ルートの<svg>要素にviewBoxまたは明示的なwidth/heightがあるか、fill色が背景と異なるかを確認してください。
• 編集して再ダウンロードできますか? — はい。Editorタブで編集し、Previewで確認してからSVGをダウンロードしてください。