SVG をリサイズ
☞ すべてブラウザ内で処理 — アップロードは一切ありませんここに SVG をドロップ
またはクリックして選択 — SVG のみ
プレビュー
SVG をリサイズ
SVG に新しい幅と高さを与えます — あるいは完全に外して、コンテナに合わせて伸縮させることも。図柄そのものには一切手を触れません。
またはクリックして選択 — SVG のみ
プレビュー
描き直しは起きない
ラスター画像は新しいサイズで描き直す必要があり、その過程でディテールが失われたり、なかったものが作られたりします。SVG が持っているのは描画の指示なので、リサイズは「どの大きさで描くか」というメモを変えるだけです。ファイル内のパス・色・グラデーションはすべてそのままです。
そのメモが width と height の組です。その下にある viewBox は内部の座標系を定義するもので、こちらは触りません。図形が切り取られずに拡大縮小されるのは、まさにそのためです。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
幅を入力するか、倍率を選ぶか、レスポンシブにします。
同じ図柄が、指定したサイズで手に入ります。
かんたん回答
ぼやけません。ぼやける対象がそもそもありません。ファイルが記述しているのはピクセルではなく形なので、どんなサイズでもその都度新しく描かれます。25% でも 400% でも同じです。
SVG がレスポンシブになります。これらの属性がないと、ブラウザは縦横比を viewBox から取り、要素をコンテナいっぱいに広げるので、CSS 側でサイズを決められます。コンポーネントライブラリのアイコンでは一般的な選択です。
その場合は viewBox が自動的に追加されます。viewBox がないと、SVG は自分の座標を素のピクセルとして扱うため、幅を変えても拡大縮小ではなく、図が切れたり余白が足されたりします。追加される viewBox は元のサイズと一致するので、位置がずれることはありません。
ほとんど変わりません。変わるのは 2 つの数値だけです。ファイル自体を小さくしたい場合は SVG 最適化ツールに通してください。エディターのメタデータや過剰な小数桁が取り除かれます。
いいえ。ファイルの解析と書き換えはブラウザ内で行われます。