SVG をリサイズ

SVG リサイズ

SVG に新しい幅と高さを与えます — あるいは完全に外して、コンテナに合わせて伸縮させることも。図柄そのものには一切手を触れません。

SVG をリサイズ

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

ここに SVG をドロップ

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

描き直しは起きない

SVG のリサイズが無劣化である理由

ラスター画像は新しいサイズで描き直す必要があり、その過程でディテールが失われたり、なかったものが作られたりします。SVG が持っているのは描画の指示なので、リサイズは「どの大きさで描くか」というメモを変えるだけです。ファイル内のパス・色・グラデーションはすべてそのままです。

そのメモが width と height の組です。その下にある viewBox は内部の座標系を定義するもので、こちらは触りません。図形が切り取られずに拡大縮小されるのは、まさにそのためです。

3 ステップ

SVG をリサイズする手順

01

SVG をドロップ

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

02

サイズを決める

幅を入力するか、倍率を選ぶか、レスポンシブにします。

03

ダウンロード

同じ図柄が、指定したサイズで手に入ります。

かんたん回答

SVG リサイズのよくある質問

リサイズすると画像がぼやけますか?

ぼやけません。ぼやける対象がそもそもありません。ファイルが記述しているのはピクセルではなく形なので、どんなサイズでもその都度新しく描かれます。25% でも 400% でも同じです。

width と height を外すとどうなりますか?

SVG がレスポンシブになります。これらの属性がないと、ブラウザは縦横比を viewBox から取り、要素をコンテナいっぱいに広げるので、CSS 側でサイズを決められます。コンポーネントライブラリのアイコンでは一般的な選択です。

viewBox がないファイルで表示がおかしくなりました

その場合は viewBox が自動的に追加されます。viewBox がないと、SVG は自分の座標を素のピクセルとして扱うため、幅を変えても拡大縮小ではなく、図が切れたり余白が足されたりします。追加される viewBox は元のサイズと一致するので、位置がずれることはありません。

縮小するとファイルは小さくなりますか?

ほとんど変わりません。変わるのは 2 つの数値だけです。ファイル自体を小さくしたい場合は SVG 最適化ツールに通してください。エディターのメタデータや過剰な小数桁が取り除かれます。

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

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