viewBoxを詰めるか、PNGへラスタライズしてSVGアイコンやイラストをトリミング。無料で、ベクター特有の挙動も正直に解説します。
画像をアップロード
ドラッグ&ドロップ、またはクリックしてアップロード
PNG、JPG、WebP、GIF、BMP対応
.svgファイルをページにドラッグするか、クリックして選択します。ブラウザ標準のSVGエンジンを使ってCanvasに描画します。
描画されたSVGの上で、残したい範囲にトリミング枠をドラッグします。
出力解像度でトリミング後のSVGをプレビュー表示するため、書き出し前に鮮明さを確認できます。
ダウンロードをクリック。標準はトリミング範囲をラスタライズしたPNGですが、viewBox属性のみ更新したSVGも選択できます。
モードによります。標準ではトリミング範囲をラスタライズしたPNGで、多くのアプリに貼り付けやすい形式です。SVGモードに切り替えると、ルートのviewBox属性とwidth/heightを更新し、トリミング範囲を新しいキャンバスとしたベクターSVGとして書き出します。
ラスター画像のトリミングは単純にピクセルを破棄するだけですが、SVGトリミングは(a) viewBoxを書き換えて表示範囲を制限する(パス自体はファイル内に残る)か、(b) 表示範囲をPNGにラスタライズするか、いずれかになります。本ツールは両方に対応しています。PNG出力を選ばない限り、新しいviewBoxの外側のパスも削除されません。
はい。.svgをドロップしてグリフ周辺をトリミング枠で囲み、viewBoxを詰める(ベクターのまま、アイコンフォントに最適)か、256×256pxのPNGとして書き出してSVG非対応の場所でも利用できます。
PNG書き出しでは保持されます。グラデーション、不透明度、エッジのぼかしなどはChromeと同じ描画結果になります。SVG viewBoxモードではファイルの<defs>ブロックが書き換えられないため、グラデーションのストップ値やアルファチャンネルは完全にそのまま残ります。
Web用途では、表示サイズの2倍がベストです(256pxの枠なら512px幅で書き出し)。Retinaディスプレイでも鮮明に表示されます。印刷用途では最終サイズに対して300DPIで書き出してください。横4インチの印刷なら横1200pxのPNGが目安です。