画像をブラウザーで切り抜いてから SVG に変換する場合、最初に分けたいのは、画面上の大きさと元画像のピクセル数です。たとえば、幅 1,200 px の画像を幅 600 CSS px で表示しているとき、画面上の 100 px は元画像では 200 px に相当します。
ここでは、画像全体が変形せず表示されている場合の座標変換と、SVG 出力を確認するポイントを整理します。ツール固有の実装に依存しない考え方です。
1. 元画像と表示領域を別々に扱う
元画像が 1,200 × 800 px、画像そのものの表示領域が 600 × 400 CSS px なら、倍率は縦横とも 2 です。
scaleX = originalWidth / displayedImageWidth
scaleY = originalHeight / displayedImageHeight
sourceX = selectedX * scaleX
sourceY = selectedY * scaleY
sourceWidth = selectedWidth * scaleX
sourceHeight = selectedHeight * scaleY
表示画像の左上から (50, 40)、幅 200、高さ 100 の範囲を選んだ場合、元画像では (100, 80)、幅 400、高さ 200 の範囲になります。出力サイズを変えずに切り抜くなら、結果は 400 × 200 px です。
注意したいのは、親要素のサイズをそのまま displayedImageWidth に使わないことです。たとえば object-fit: contain の余白がある場合、親要素の左上と表示画像の左上は一致しません。ポインター位置から画像の表示開始位置を引いてから倍率を掛けます。CSS の回転や変形がある場合は、この単純な式だけでは扱えません。
2. 境界と丸め方を決める
画像の外にはみ出した選択範囲は、元画像の範囲内に制限します。ピクセル単位の切り抜きでは、左上と右下を別々に丸める方が、幅だけを丸めるより扱いやすくなります。
left = max(0, floor(sourceX))
top = max(0, floor(sourceY))
right = min(originalWidth, ceil(sourceX + sourceWidth))
bottom = min(originalHeight, ceil(sourceY + sourceHeight))
width = right - left
height = bottom - top
ここでは外側へ丸める方針です。切り抜き対象の細い線が端にある場合に、丸めだけで線を落としにくくなります。最後に width > 0、height > 0 を確認します。
devicePixelRatio は画面の高精細描画に関係しますが、元画像のピクセル数とは別の値です。元画像のサイズに既に合わせた変換結果へ、さらに無条件で掛けると二重に拡大してしまいます。
3. 切り抜きと縮小を一度に混同しない
切り抜きは残す範囲を決める操作、リサイズは出力するピクセル数を決める操作です。上の 400 × 200 px の範囲を 800 × 400 px で書き出すことはできますが、補間でピクセルを増やしても、元画像になかった輪郭情報が復元されるわけではありません。
SVG のトレース前には、不要な余白を先に取り除き、残したい細い線や小さな隙間が画像内で十分な大きさを持つかを確認します。写真の細かなノイズと、ロゴの意味のある小さな穴は区別して扱いたいところです。
4. 拡張子ではなく SVG の内容を確認する
.svg という名前だけで、画像がベクターの輪郭になったとは判断できません。
-
<image>要素に元の JPEG や PNG を埋め込んだ SVG は、拡大しても元画像のピクセル制約が残ります。 -
<path>などの図形要素で輪郭を表した SVG は、図形として描画されます。ただし、パスが存在するだけで、形状の正確さや編集のしやすさまでは保証されません。 - 元画像と出力を同じ見た目の大きさで比較してから、拡大して角、曲線、細い線、穴の残り方を確認します。
画面のプレビューがきれいでも、必要な小さな隙間がつぶれていれば別の設定が必要です。逆に、ノイズまで細かく拾い過ぎると、輪郭が複雑になります。最終用途で必要な形が残っているかを基準にします。
関連する作業例
私は JPG to SVG のメンテナンスに関わっています。ブラウザーでの画像の切り抜き・リサイズと SVG 変換では、準備した画像を同じページでトレースへ渡せます。画像処理は端末内で行われ、元画像と SVG を比較してからダウンロードできます。
この記事の座標計算と出力の確認方法は、このツール以外の Canvas ベースの画像処理にも応用できます。