SVG画像をオンラインでトリミング

viewBoxを詰めるか、PNGへラスタライズしてSVGアイコンやイラストをトリミング。無料で、ベクター特有の挙動も正直に解説します。

画像をアップロード

ドラッグ&ドロップ、またはクリックしてアップロード

PNG、JPG、WebP、GIF、BMP対応

Step by Step

How to SVGトリミング

01

SVGをアップロード

.svgファイルをページにドラッグするか、クリックして選択します。ブラウザ標準のSVGエンジンを使ってCanvasに描画します。

02

トリミング範囲を選択

描画されたSVGの上で、残したい範囲にトリミング枠をドラッグします。

03

結果をプレビュー

出力解像度でトリミング後のSVGをプレビュー表示するため、書き出し前に鮮明さを確認できます。

04

PNGまたはSVGでダウンロード

ダウンロードをクリック。標準はトリミング範囲をラスタライズしたPNGですが、viewBox属性のみ更新したSVGも選択できます。

Core Features

What You Get

ブラウザ標準エンジンでSVGをレンダリング — グラデーション、ストローク、フィルターも正確に描画
PNG/WebPへのラスタライズ、またはviewBox更新済みSVGの2つの出力モード
1倍〜4倍まで書き出し解像度を調整可能で、PNGも鮮明に
PNG書き出し時はトリミング範囲外の透過を保持
選択した解像度でのリアルタイムプレビュー
100%ブラウザ処理 — SVGはアップロードされません
Use Cases

When to Use This

SVGアイコンセットのviewBoxをグリフ単位でぴったり詰めてトリミング
SVGイラストをトリミング済みPNGとしてラスタライズし、スライドやSNSに利用
SVGインフォグラフィックの特定領域を抜き出してPNG単体として配信
ロゴSVGの余白を詰めてからHTMLやREADMEに埋め込み
FAQ

Frequently Asked Questions

出力はベクターSVGのままになりますか?

モードによります。標準ではトリミング範囲をラスタライズしたPNGで、多くのアプリに貼り付けやすい形式です。SVGモードに切り替えると、ルートのviewBox属性とwidth/heightを更新し、トリミング範囲を新しいキャンバスとしたベクターSVGとして書き出します。

SVGトリミングはJPG・PNGのトリミングと何が違いますか?

ラスター画像のトリミングは単純にピクセルを破棄するだけですが、SVGトリミングは(a) viewBoxを書き換えて表示範囲を制限する(パス自体はファイル内に残る)か、(b) 表示範囲をPNGにラスタライズするか、いずれかになります。本ツールは両方に対応しています。PNG出力を選ばない限り、新しいviewBoxの外側のパスも削除されません。

HeroiconsやLucideなどのSVGアイコンをトリミングできますか?

はい。.svgをドロップしてグリフ周辺をトリミング枠で囲み、viewBoxを詰める(ベクターのまま、アイコンフォントに最適)か、256×256pxのPNGとして書き出してSVG非対応の場所でも利用できます。

グラデーションや透過は保持されますか?

PNG書き出しでは保持されます。グラデーション、不透明度、エッジのぼかしなどはChromeと同じ描画結果になります。SVG viewBoxモードではファイルの<defs>ブロックが書き換えられないため、グラデーションのストップ値やアルファチャンネルは完全にそのまま残ります。

トリミングしたSVGからPNGを書き出すときの最適なサイズは?

Web用途では、表示サイズの2倍がベストです(256pxの枠なら512px幅で書き出し)。Retinaディスプレイでも鮮明に表示されます。印刷用途では最終サイズに対して300DPIで書き出してください。横4インチの印刷なら横1200pxのPNGが目安です。