本文へスキップ
DiffResolver

SVG ファイルの比較

2 つの SVG ファイルをオンラインで比較します。描画したピクセルで見た目を比べるか、XML として構造を比べるか。アイコンの更新や生成した図に最適です。無料で、アップロードはありません。

ファイルがブラウザーから出ることはありません。

SVG のマークアップを貼り付け
左の .svg をここにドロップ
右の .svg をここにドロップ
オプション
比較の方法
描画倍率
ピクセルの連結

SVG の比較について

2 つの SVG を、構造(XML ツリー)としてか、見た目(描画して)比較します。アイコンの更新、生成した図、デザインシステムの変更に便利です。

使い方

  1. 2 つの SVG ファイルを貼り付けるか読み込みます。
  2. 「オプション」の「比較の方法」で「描画」か「マークアップ」を選びます。
  3. 「描画」のモードでは「描画倍率」を選び、SVG がページの色を前提にしているなら「背景」を設定します。

サンプルで試す

円から角の丸い四角へと作り直したアイコンです。

このツールが扱わないこと

  • 外部への参照(ほかのファイルへの xlink:href)は取得しません。
  • CSS のアニメーションは動かしません。比較は静止した状態で行います。

よくある質問

ファイルがブラウザーの外に出ることはありますか。

ありません。すべての比較はあなたのブラウザーの中で動きます。貼り付けた内容、ドロップしたファイル、読み込んだファイルがサーバーに送られることはありません。ページを読み込んだあとは、オフラインになってもツールは動き続けます。

このツールは無料で使えますか。

無料です。DiffResolver のツールはすべて無料で、アカウントも登録もインストールも要りません。処理はあなたの端末で動くので、サーバー側の利用制限もありません。

SVG は「マークアップ」と「描画」のどちらで比較すべきですか。

「マークアップ」は、どの要素と属性が変わったかを正確に示すので、手で編集したアイコンに向きます。「描画」は両方のファイルを画像として描画してピクセルの差分を取るので、マークアップでは関係なく見える変更も捉えます。

「描画」のモードで SVG が真っ白になるのはなぜですか。

外部のファイルを参照する SVG や、ページの背景を前提にした SVG は、空や透明として描画されることがあります。「オプション」で「背景」を設定し、外部への参照はファイルの中に取り込んでください。

ファイルサイズの上限はありますか。

アップロードしないので、サーバー側の上限はありません。実際の上限を決めるのは、あなたの端末のメモリーです。テキストは 10 MB、画像は 40 MB、ドキュメントは 100 MB、アーカイブは 500 MB を超えると、処理が遅くなる可能性をツールが知らせますが、ファイルをブロックすることはありません。

このツールはオフラインでも動きますか。

動きます。最初の訪問のあと、ブラウザーがツールのコピーを保持するので、一度開いたページはネットワークがなくても動きます。ブラウザーのメニューから DiffResolver をアプリとしてインストールすることもできます。インストールは任意で、通常のタブでも同じように動きます。

データはどこに保存されますか。

ファイルはどこにも保存されません。ページのメモリーの中だけにあり、タブを閉じると消えます。このブラウザーに残るのは、あなたが自分で保存したものだけです。スナップショット、ツールの設定、テーマがこれにあたります。消すときは、設定を開いて「ローカルデータをすべて消去」を選んでください。

関連する考え方

関連ツール