送られてきたファイルからが見つかりました。危険ですか。

ファイルをどこで使うかで完全に決まり、報告書がその区別を示します。ページにインラインで貼り付けた場合、SVGのスクリプトはそのページのオリジンで実行されます。クッキーもストレージもDOMもそのページのものです。やCSS背景として読み込んだ場合は一切実行されません。このツールのプレビューは描画の前にスクリプトを取り除いており、描画に使うフレーム自体がどのみちスクリプトを実行できないので、ここでファイルを開いて見ることはどちらにせよ安全です。

SVGエディタ・解説

SVG Editor and Explainer

SVGをプレビューの隣で編集しながら、viewBoxと拡大、変形、各パスコマンド、継承された塗り、無駄なバイト、そして<img>やデータURIやインラインで何が壊れるかを解説します。

SVGを描画結果の隣で編集しながら、そのファイルが実際に何であるかを読み取ります。拡大に耐えるか、図形まで下りてくる変換がそれぞれ何をしているか、d属性が1コマンドずつ何を綴っているか、塗りが継承をたどってどう決まるか、編集ソフトの残しかすが何バイトを占めているか、同じファイルを<img>で使ったとき、CSS背景で使ったとき、インラインで貼ったときにそれぞれ何が壊れるか。指摘はすべて、対象になっている属性そのものを指し示します。解析したファイルの上で人が書いた規則を回しているのであってモデルではないので、あるものだけを報告し、ファイルの用途を推測することはありません。

🔒 ブラウザの中だけで動きますsvgeditorviewboxexplainaccessibility

例

SVG のソース

.svg ファイルを置いてください

このタブで読みます。どこにもアップロードしません。

ここに書くとプレビューが追いかけます。プレビューの図形を押すと、ソースがその要素へ飛びます。

プレビュー

背景

クリックできる枠が付くのは、ファイルだけ見て箱を割り出せる図形です。<text> と <use>、それに大きさのない <image> はレンダラーがないと分からないので、ソースのほうから選んでください。

解析した木から組み直したマークアップを、サンドボックスのフレームで描いています。あなたのバイトをそのまま流し込むことはありません。フレームは大きさの決まった箱で、ファイルにはその箱を丸ごと渡します。だから拡大できない文書は、箱を埋められない様子が目に見えます。

バイト

395

要素

図形

パスコマンド

入れ子の最大の深さ

このファイルが何か

説明フレーム
サイズがあり、拡大縮小もできます
width="24" と height="24" で固有のサイズが決まり、viewBox="0 0 24 24" のおかげでそのサイズは上限ではなく出発点になります。CSS で幅を変えれば、中身がそれに合わせて拡大縮小し直されます。アイコンならこの形が正解です。
説明座標
ユーザー単位一つの大きさ
内側の座標は、横が 0 から 24 まで、縦が 0 から 24 までです。宣言された幅 24 では、1 ユーザー単位が 1 CSS ピクセルで描かれます。この値は、ファイルが実際に受け取る大きさによって変わります。
説明パス
絶対コマンドと相対コマンドが混ざっています
同じパスの中に絶対コマンドが 3個、相対コマンドが 6個あります。どちらも正当で、描かれる形も同じです。実際の違いは、すべて相対で書いたパスなら最初の M だけを直せば動かせるのに、このパスはそうはいかない点です。
説明塗り
currentColor：色はページが決めます
1個の属性が currentColor で塗られています。currentColor は、SVG が置かれた場所で継承された CSS の `color` プロパティに解決されます。ページにインラインで置くなら、アイコンにはまさに望ましい動きです。周りの文字色をそのまま使い、テーマの切り替えにも手間なく追従します。けれども <img> や CSS の background-image として使うと、継承元の要素がないので何にも解決されず、黒になります。
説明アクセシビリティ
名前：「보관함에 저장」
<title> はグラフィックのアクセシブルな名前で、たいていのビューアーはマウスを載せたときのツールチップとしても表示します。だから、ファイル名のように書いた <title> はないよりも悪いのです。この <title> は「보관함에 저장」です。
説明アクセシビリティ
<desc> がありません
<title> は短い名前で、<desc> は中身そのものが大事なグラフィック（グラフ、図、地図）のための長い説明です。アイコンには要りませんし、空の <desc> を入れるのは入れないより悪いです。

選んだ要素

プレビューで図形を押すか、ソースの要素の中にカーソルを置いてください。

SVG 最適化で無駄を落とす · CSS のデータ URI にする · パス一本だけを手で直す

使い方

SVGを貼り付けるか、ファイルを置きます
ソース欄に貼り付けるか、下の領域に.svgファイルを置きます。読み取りはすべてこのタブの中で行われます。まずは枠の上にある4つの例を押してみてください。どれも実在する別々の形のファイルで、報告される内容もそれぞれ違います。
まずフレームの項目を読みます
この文書が4つの形のどれなのかを教えてくれて、その後の話の大半がそこで決まります。viewBoxにwidthとheightが揃っていれば固有の大きさを持ちながら拡大もでき、viewBoxだけなら与えられた箱を埋め、viewBoxがなくwidthとheightだけならまったく拡大しません。デザインツールからコピーしたアイコンがサイズ変更を受け付けないのは、たいていこれが理由です。プレビューはファイルに固定の箱を渡すので、どれなのかを目で確かめられます。
図形を押して2つの枠を突き合わせます
プレビューの輪郭を押すと、ソース側のその要素にカーソルが移り、要素パネルが埋まります。いちばん外側から下りてくる変換の連なり、積み上がった行列が何をしているか、継承をたどって決まった塗り、パスであれば全コマンドを平易な言葉にした説明が出ます。ソースでカーソルを動かせば逆向きにも選択されます。
探さずに「位置を表示」を押します
指摘はどれも対象のソース範囲を持っているので、ボタンを押すとその文字だけが正確に選択されます。idが重複している2つ目のグラデーションを1つ目ではなく指し、タグ全体ではなくその属性ひとつを指します。
容量の指摘は最適化ツールに渡します
容量の項目はバイト数を数え、それが何なのかに名前を付けます。編集ソフトのメタデータ、使われていないグラデーション、誰も選んでいない小数点以下7桁といったものです。ただしこのツールはファイルを書き換えません。その作業はSVG最適化が文書全体へ一度に行い、前後の差分を並べるので、何も動いていないことを確かめられます。

よくある質問

CSSで幅を指定してもアイコンが大きくなりません。なぜですか。

ほぼ必ず、ファイルにwidthとheightがあってviewBoxがないからです。viewBoxがないとユーザー単位がそのままCSSピクセルになり、ブラウザが倍率を取り直すための対応関係そのものが存在しません。箱だけが大きくなり、絵はその場に残ります。フレームの項目がそれを指摘し、追加すべきviewBoxをそのまま書き出します。たいていはファイルにすでにある数字を使った「0 0 <幅> <高さ>」です。

アイコンを2つインラインで入れたら、2つ目のグラデーションが消えました。なぜですか。

idが衝突しています。デザインツールはa、Layer_1、SVGID_1_のような名前を自動で付けるので、両方のファイルが1つのページに入ると、すべてのurl(#a)が文書中で先に現れたほうに解決されます。つまり2つ目のアイコンが、黙って1つ目のグラデーションやクリップパスを借りてしまいます。移植性の項目は、まさにこのために書き出しツール由来のidを印します。インラインで入れる前に、すべてのidにそのファイル固有の接頭辞を付けてください。

ページでは表示されるのに、CSS背景にすると何も描かれません。何が違うのですか。

違うところが3つあり、報告書が当てはまるものを名指しします。xmlnsがないのはHTMLパーサーなら見逃してくれますが、それ以外の場所では致命的です。currentColorはページの外では継承する相手がないので黒になります。外部参照は<img>やbackground-imageではそもそも取得されないため、それを必要とする要素は何も描きません。そして16進数の色の#は、%23と書かないかぎりデータURIをそこで切ってしまいます。

パスの穴が塗りつぶされてしまいます。位置を動かすべきですか。

いいえ、向きを反転させてください。既定のfill-rule="nonzero"では、内側の輪が外側の輪と逆向きに巻いているときだけ穴になります。穴が塗りつぶされるなら位置ではなく向きの問題です。パスの項目が、サブパスがいくつあるか、どの規則が判定しているかを示します。サブパスひとつを反転させるのはSVGパス編集の仕事です。

送られてきたファイルから<script>が見つかりました。危険ですか。

ファイルをどこで使うかで完全に決まり、報告書がその区別を示します。ページにインラインで貼り付けた場合、SVGのスクリプトはそのページのオリジンで実行されます。クッキーもストレージもDOMもそのページのものです。<img>やCSS背景として読み込んだ場合は一切実行されません。このツールのプレビューは描画の前にスクリプトを取り除いており、描画に使うフレーム自体がどのみちスクリプトを実行できないので、ここでファイルを開いて見ることはどちらにせよ安全です。

塗りのパネルが実際の見た目と食い違います。なぜですか。

ファイルに<style>ブロックがあり、この報告書がそれを適用していないからです。CSSセレクタを解決するにはCSSエンジンが要るので、ここに出る値は表示属性とインラインのstyleだけから読んだものです。<style>ブロックがあれば、報告書が先にそう断ります。スタイルシートが上書きした値を黙って見せることはしません。