SVG を切り抜く
☞ すべてブラウザ内で処理 — アップロードは一切ありませんここに SVG をドロップ
またはクリックして選択 — SVG のみ
プレビュー
SVG を切り抜く
SVG の上で枠をドラッグして、残したい範囲を選びます。変わるのは viewBox だけ — パスはすべてそのままなので、いつでも元の範囲に戻せます。
またはクリックして選択 — SVG のみ
プレビュー
刃物ではなく窓
SVG は 1 つの座標系の中に図を持っていて、viewBox はそれを覗く窓です。その窓を動かせば画像は切り抜かれます。パスは編集されず、点も削除されず、描き直しも起きません。だから結果はどんなサイズでもピクセル単位で正確ですし、あとで窓を広げれば図全体が戻ってきます。
引き換えに、ファイルは小さくなりません。窓の外の部分はファイルの中に残っていて、表示されないだけです。本当に消したい場合は、まずここで切り抜いてから SVG 最適化ツールに通してください。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
残したい範囲を囲むか、viewBox の数値を直接入力します。
同じ図柄に、新しい窓がついた状態です。
かんたん回答
小さくなりません。これは想定どおりです。切り抜きは viewBox を動かすだけなので、外側の図形はファイルに残っています。ブラウザが描かないだけです。残りも整理したい場合は、切り抜いたファイルを SVG 最適化ツールに通してください。
はい。何も削除されていないので、切り抜いたファイルをもう一度ここで開き、枠を外側に広げれば元の図全体が戻ります。JPG の切り抜きとの実質的な違いはここです。
viewBox のユーザー単位、つまり SVG 自身の座標系だからです。幅 24 単位のファイルが 512 ピクセルで描画されることもあります。width と height 属性は比例して調整されるので、切り抜いたファイルは想定どおりの大きさで表示されます。
ファイルの width と height に合わせて自動的に追加されます。viewBox がなければ動かす窓もなく、切り抜きの対象が存在しません。追加しても見た目は何も変わりません。
元の SVG に width と height 属性がなかった場合(CSS でサイズを決めるアイコンでは一般的です)、そのままです。これらの属性は、もともと書かれていたときにだけ書き換えられます。
いいえ。ファイルの解析と書き換えはブラウザ内で行われます。