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 のサイズを変更する方法
SVG を追加する
ファイルをドラッグ アンド ドロップするか、SVG マークアップを貼り付けます。 SVG Resize はソースをローカルにロードし、元の viewBox を保持します。 SVG に viewBox がない場合は、サイズを変更する前に viewBox を追加します。 SVG ファイルを開いてすぐに処理できます。
セット寸法
ターゲットの幅と高さを入力するか、比例してスケールを入力します。 SVG Resize ではライブ プレビューが表示されるので、外観を検証できます。ストローク幅をチェックして、バランスが取れていることを確認してください。
結果のエクスポート
サイズ変更した SVG をダウンロードするか、PNG をすぐにエクスポートします。 SVG サイズ変更によりファイル名がクリーンな状態に保たれるため、引き継ぎ時にアセットを追跡しやすくなります。 icon-name-24.svg のような一貫した命名パターンを使用してください。
SVG リサイズに関するよくある質問
SVG のサイズをオンラインで正確な寸法に変更できますか?
SVG のサイズを変更するときにアスペクト比を維持するにはどうすればよいですか?
SVG サイズ変更ツールは viewBox を保持しますか?
リサイズした後にPNGを書き出すことはできますか?
私のSVGはアップロードされていますか?
ファイルサイズの制限はどれくらいですか?
Retina アセットのサイズを変更できますか?
SVG Resize Toolはダウンロードせずに無料で使用できますか?
SVG サイズ変更ツールを使用するにはアカウントが必要ですか?
関連する SVG ツール
これらのツールで SVG サイズ変更を使用して、一貫したアセットを回転、最適化、エクスポートします。
SVG 回転・反転
SVG サイズ変更の前に方向を調整して、最終的な寸法がレイアウトと一致するようにします。これにより、回転後の幅と高さが予測可能になります。
ツールを開くSVG オプティマイザー
出力を軽量に保つために、SVG サイズ変更後にファイルを圧縮します。ファイルが小さいほど、アプリやデザイン ツールでの読み込みが速くなります。
ツールを開くSVG ビューア
SVG サイズ変更の前後でアセットをプレビューして、配置を確認します。グリッドの背景を使用してパディングを確認します。
ツールを開くSVG から PNG
ラスター フォールバックが必要な場合は、SVG サイズ変更結果と一緒に PNG をエクスポートします。これはプレゼンテーションやドキュメントに便利です。
ツールを開く