SVGビューア・コードエディタ

SVGビューアでファイルを表示する方法

1. ファイルを開くか、コードを貼り付けます。 「ファイルを開く」を使うか、プレビューにSVGをドロップするか、エディタにコードを貼り付けます。
2. プレビューを確認します。 透明・ライト・ダークの背景を切り替えて、輪郭や白い図形を確認します。
3. コードを編集します。 入力に合わせてプレビューが更新されます。「コードを整形」でインデントを整えられます。
4. コピーまたはダウンロードします。 編集したSVGを保存するか、コードをコピーします。

どんな背景でもSVGを表示して確認

SVGアイコンには白いものや透明な部分を使ったものが多く、白いページの上では見えなくなります。背景を切り替えれば、市松模様、白、暗い背景の上で画像を確認できるので、白いロゴ、塗りの抜け、はみ出した輪郭を見つけられます。

プレビューの下には、指定されたwidthとheight、viewBox、要素数、ファイルサイズが表示されます。サイズの問題はたいていこれらの値で説明がつきます。widthとheightのないSVGは親要素のサイズに合わせて広がり、viewBoxが間違っていると図が切れたり小さくなったりします。

コードエディタ付きのオンラインSVGビューア

エディタはXMLを色分けし、長いグループを折りたたみ、行番号を表示します。閉じていないタグなどの誤りがあると、真っ白な画像ではなくパーサーのエラーを表示するので、どの行を直せばいいかがわかります。

プレビューは画像として描画します。SVGの中のスクリプトは実行されないため、人から受け取ったファイルも安全に開けます。

ちょっとした修正に使える無料のSVG編集ツール

よくある編集なら数秒で終わります。fillの色を変える、固定のwidthとheightを削除してアイコンをレスポンシブにする、非表示のレイヤーを消す、アクセシビリティのために<title>を追加する、といった作業です。不要なデータまで本格的に整理するなら、SVG圧縮ツールにかけてください。

SVGビューアのよくある質問