SVG サイズ変更ツール

レイアウトを崩さずに寸法を調整します。アイコンをグリッドに合わせたり、デザイン仕様を一致させたりする場合に便利です。 SVG ファイルを開いてすぐに処理できます。

SVG が未読み込みです。ファイルをドロップして開始してください。

SVG エディターへようこそ

SVG をドロップするか「アップロード/アイコン」をクリック、または Ctrl/Cmd+V で SVG コードを貼り付け

サンプルアイコンから開始

下のサンプルを選ぶか、ご自身の SVG をアップロードして編集できます。

SVG サイズ変更ツールを使用する理由

ピクセルまたはパーセントのコントロール

SVG Resize は、正確な幅と高さの入力とパーセンテージのスケーリングをサポートします。これにより、設計仕様を一致させたり、さまざまなブレークポイントに合わせてアセットをスケールしたりすることが簡単になります。一貫性を保つために、サイズをデザイン トークンまたはグリッド システムに合わせることができます。数値入力により、エクスポートされた PNG サイズを簡単に一致させることもできます。

アスペクト比ロック

ロック オプションを使用すると、比率が維持され、歪みが防止されます。比率を維持すると、アイコンとイラストの視覚的なバランスが保たれます。これは、伸びてはいけないロゴの場合に特に役立ちます。

ViewBox 対応の出力

このツールは、アセットが CSS および HTML で正しくスケールされるように viewBox を維持または修正します。これにより、本番環境での予期しないトリミングや空白が回避されます。 viewBox を適切に設定すると、アセットを交換するときのレイアウトのずれも軽減されます。

ライブプレビュー

SVG サイズ変更は、ズームと背景のオプションで即座に更新されます。結果をプレビューすると、エクスポート前に間隔、パディング、配置を確認するのに役立ちます。コントラストのある背景を使用して、はみ出したストロークや余分なパディングを見つけます。グリッド ビューは、光学的な位置合わせを確認するのに役立ちます。

柔軟なエクスポート

SVG Resize を使用すると、サイズ変更された SVG をダウンロードしたり、PNG を 1 ステップでエクスポートしたりできます。これは、ドキュメントやプレゼンテーションにラスター フォールバックが必要な場合に役立ちます。簡単に引き継げるように、両方のバージョンを同じフォルダーに保存してください。両方の形式をエクスポートすると、レビュー中のやり取りが軽減されます。

ローカル処理

SVG Resize はブラウザ内で完全に実行されるため、ファイルがデバイスから流出することはありません。これにより、クライアントの資産が非公開に保たれ、イテレーションが高速化されます。ローカル処理により、大きなファイルのアップロードの遅延も回避されます。ネットワーク ポリシーによってアップロードがブロックされている場合にうまく機能します。

SVG のサイズを変更する方法

1

SVG を追加する

ファイルをドラッグ アンド ドロップするか、SVG マークアップを貼り付けます。 SVG Resize はソースをローカルにロードし、元の viewBox を保持します。 SVG に viewBox がない場合は、サイズを変更する前に viewBox を追加します。 SVG ファイルを開いてすぐに処理できます。

2

セット寸法

ターゲットの幅と高さを入力するか、比例してスケールを入力します。 SVG Resize ではライブ プレビューが表示されるので、外観を検証できます。ストローク幅をチェックして、バランスが取れていることを確認してください。

3

結果のエクスポート

サイズ変更した SVG をダウンロードするか、PNG をすぐにエクスポートします。 SVG サイズ変更によりファイル名がクリーンな状態に保たれるため、引き継ぎ時にアセットを追跡しやすくなります。 icon-name-24.svg のような一貫した命名パターンを使用してください。

SVG リサイズに関するよくある質問

SVG のサイズをオンラインで正確な寸法に変更できますか?
はい。 SVG Resize は幅と高さの正確なピクセル値を受け入れるため、レイアウト仕様に簡単に一致させることができます。これは、アセットが厳密なコンポーネント サイズに適合する必要がある場合に役立ちます。
SVG のサイズを変更するときにアスペクト比を維持するにはどうすればよいですか?
縦横比を維持するには、SVG サイズ変更のロック オプションを有効にします。 This prevents icons and logos from stretching. It also keeps circles from turning into ovals.
SVG サイズ変更ツールは viewBox を保持しますか?
SVG Resize は viewBox を維持し、必要に応じて更新するため、ブラウザでのスケーリングが正確に保たれます。 viewBox 値を正しく設定すると、CSS の応答性が向上します。これは、SVG が背景画像として使用される場合に重要です。
リサイズした後にPNGを書き出すことはできますか?
はい。 SVG Resize には、ドキュメント、スライド、またはラスターのみのツール用の PNG エクスポート オプションが含まれています。 PNG エクスポートは、プラットフォームが SVG をサポートしていない場合に便利です。これらは、クライアントを簡単にプレビューする場合にも便利です。
私のSVGはアップロードされていますか?
いいえ。SVG Resize はブラウザ内でローカルに実行されるため、ファイルがデバイスの外に流出することはありません。これにより、クライアント資産の機密性が保たれます。
ファイルサイズの制限はどれくらいですか?
SVG Resize は最大 10MB のファイルをサポートします。 SVG が非常に複雑な場合は、まず最適化することを検討してください。パスが単純であればレンダリングも高速になります。
Retina アセットのサイズを変更できますか?
はい。 SVG サイズ変更は、2 倍または 3 倍のサイズでエクスポートする場合に適しており、CSS で縮小して鮮明さを高めることができます。これは、デザイン システムのアイコン セットに役立ちます。疑わしい場合は、柔らかくならないように、より大きくエクスポートしてスケールダウンしてください。
SVG Resize Toolはダウンロードせずに無料で使用できますか?
はい。 SVG サイズ変更ツールはブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。
SVG サイズ変更ツールを使用するにはアカウントが必要ですか?
いいえ、SVG サイズ変更ツールはサインアップせずにブラウザで即座に動作し、ファイルはローカルに残ります。