SVG を切り抜く

SVG クロップ

SVG の上で枠をドラッグして、残したい範囲を選びます。変わるのは viewBox だけ — パスはすべてそのままなので、いつでも元の範囲に戻せます。

SVG を切り抜く

☞ すべてブラウザ内で処理 — アップロードは一切ありません

ここに SVG をドロップ

またはクリックして選択 — SVG のみ

刃物ではなく窓

SVG を切り抜くと実際に何が変わるのか

SVG は 1 つの座標系の中に図を持っていて、viewBox はそれを覗く窓です。その窓を動かせば画像は切り抜かれます。パスは編集されず、点も削除されず、描き直しも起きません。だから結果はどんなサイズでもピクセル単位で正確ですし、あとで窓を広げれば図全体が戻ってきます。

引き換えに、ファイルは小さくなりません。窓の外の部分はファイルの中に残っていて、表示されないだけです。本当に消したい場合は、まずここで切り抜いてから SVG 最適化ツールに通してください。

3 ステップ

SVG を切り抜く手順

01

SVG をドロップ

.svg ファイルを選びます。ファイルは端末内に留まります。

02

枠をドラッグ

残したい範囲を囲むか、viewBox の数値を直接入力します。

03

ダウンロード

同じ図柄に、新しい窓がついた状態です。

かんたん回答

SVG クロップのよくある質問

切り抜くとファイルは小さくなりますか?

小さくなりません。これは想定どおりです。切り抜きは viewBox を動かすだけなので、外側の図形はファイルに残っています。ブラウザが描かないだけです。残りも整理したい場合は、切り抜いたファイルを SVG 最適化ツールに通してください。

切り抜きは取り消せますか?

はい。何も削除されていないので、切り抜いたファイルをもう一度ここで開き、枠を外側に広げれば元の図全体が戻ります。JPG の切り抜きとの実質的な違いはここです。

数値がピクセルではないのはなぜですか?

viewBox のユーザー単位、つまり SVG 自身の座標系だからです。幅 24 単位のファイルが 512 ピクセルで描画されることもあります。width と height 属性は比例して調整されるので、切り抜いたファイルは想定どおりの大きさで表示されます。

ファイルに viewBox がありませんでした

ファイルの width と height に合わせて自動的に追加されます。viewBox がなければ動かす窓もなく、切り抜きの対象が存在しません。追加しても見た目は何も変わりません。

レスポンシブのままですか?

元の SVG に width と height 属性がなかった場合(CSS でサイズを決めるアイコンでは一般的です)、そのままです。これらの属性は、もともと書かれていたときにだけ書き換えられます。

ファイルはアップロードされますか?

いいえ。ファイルの解析と書き換えはブラウザ内で行われます。