画像をSVGに変換する

はじめに

このガイドは、入力の準備からSVGダウンロードを採用するかの判断までを案内します。何を変更したかを記録し、最終ファイルを確認し、代替として使える原本を残すことが目的です。

トレースはピクセルから図形を推定し、デザインレイヤーを復元するものではありません。その違いはRaster vs Vectorで説明します。ここでは変換前後の実務上の判断に集中します。

変換を判断する3つの基準

1. 見た目の構造: 重要な部分を管理可能な図形として表現できますか？
2. 実際の利点: 現在の原本では満たせない要件は何ですか？
3. 出力のコスト: 最終ダウンロードは容量、見た目、編集要件を満たしますか？

写真や複雑なスクリーンショットは、明確なベクター要件がある場合だけ試します。失敗の診断はWhen NOT to use SVGで扱うため、写真ごとに同じ実験を繰り返す必要はありません。

比較できる入力を準備する

変更していない原本を保管します。表示サイズ、背景、文字の内側の空間や細い線など、残す必要がある部分を決めます。不要な余白だけを切り取り、図形に属する滑らかな輪郭や影は切らないようにします。

入力とモードは一度に1つだけ変更します。切り抜き、背景除去、モード変更を同時にすると、何が細部の欠落を起こしたか分かりません。PNGとJPGのガイドではそれぞれの輪郭の問題を扱います。

アップロード前にトレースモードを選ぶ

色に意味があるならColorから始めます。Line artは編集可能な線の中心線を保証しません。モード名から構造を推測せず、出力の図形を確認してください。

実際の変換例: 単純なロゴ

2026年9月13日に計測したColor / Originalの保存済み出力です。削減率だけでなく文字、マーク内の隙間、白いキャンバスを確認する練習として使ってください。

元のPNG

SVGKITの出力

元ファイル

480,220 B

SVG

19,246 B

パス

177

計測日: 2026-09-13 · 設定: Color / Original

元ファイルをダウンロードSVGをダウンロード計測記録 (JSON)

公開PNGは480,220バイト、保存済みSVGは19,246バイトで177パスです。約96.0%の削減はこの書き出しだけの結果です。圧縮転送量や描画時間の計測ではなく、デザイナーの元のオブジェクトを復元したという意味でもありません。

実際に配信するファイルを確認する

ダウンロードしたSVGをツールの外で開き直します。実際の表示サイズと拡大表示を比較し、使用する背景でも確認します。文字内部の空間、隙間、小さな点、輪郭の色、透過すべき背景を見ます。

原本、モード、最終バイト数、パス数、採否を記録します。共通のパス数上限はありません。時々使うイラストと何百回も繰り返すアイコンでは条件が異なります。意味を持つ細部が失われた場合、ファイルが小さくても採用しません。

よくある失敗

違う切り抜き範囲で比較する

キャンバスを揃えます。狭く切り抜くとマークが大きく表示されるため、鮮明になったように見える場合があります。

全設定を同時に変更する

変更していない入力に戻り、1つずつ調整します。そうしなければ改善した結果を再現しにくくなります。

最適化で消えた線を復元しようとする

SVGKITはトレース後に自動最適化します。マークアップのコストは減らせても、トレースで捨てた情報は復元できません。

ベストプラクティス

• -採用したダウンロードを原本とモードに関連付けて保管します。
• -画像タブだけでなく実際の埋め込み先でも確認します。
• -後から編集や最適化をしたら再確認します。
• -置き換えが承認されるまでラスター原本を残します。

実務での手順

1. 1
   表示サイズ、背景、残す細部を決めます。
2. 2
   原本を保管し、別の作業用コピーを準備します。
3. 3
   モードを選び、アップロードして結果を待ちます。
4. 4
   プレビューを確認し、最終SVGをダウンロードして開き直します。
5. 5
   見た目、バイト数、編集要件を原本と比較します。
6. 6
   短い記録とともに採用するか、原本を残して失敗を診断します。

FAQ

変換のたびにSVG Optimizerを実行すべきですか？

いいえ。SVGKITの変換には最適化が含まれます。編集後、別ツールの出力の整理、意図的な設定比較に独立した最適化を使います。

プレビューが正常でもダウンロードを開き直すのはなぜですか？

配信するのはプレビューではなくファイルです。選び間違いを確認し、実際の背景、表示サイズ、埋め込み先で検証できます。

トレースした文字は選択できますか？

通常は文字ではなく図形になります。選択、検索、文言の編集が必要なら実際のテキストを使います。