SVG ViewBox フィクサー

スケーリングの問題を回避するために、欠落しているまたは間違った viewBox 値を修復します。アイコンやレスポンシブなレイアウトに最適です。 SVG ファイルを開いてすぐに処理できます。

SVG ファイルをドラッグ&ドロップ

またはクリックして選択、もしくは SVG コードを貼り付け

.svg ファイルのみ対応
Ctrl+V / Cmd+V で SVG コードを貼り付け

SVG ViewBox Fixer を使用する理由

ビューボックスを自動修正

SVG viewBox fixer は、不足している viewBox 属性を検出し、安全な値を自動的に生成します。これにより、応答性の高いコンテナーやデザイン システムでアイコンを予測どおりに拡大縮小することができます。これは、適切なアートボードなしでエクスポートされたアセットに特に役立ちます。 viewBox がアートボードと一致すると、スケーリングはデバイス間で一貫したままになります。

修理寸法

SVG viewBox フィクサーは幅と高さを内部座標系と同期させるため、アセットは一貫してレンダリングされます。これにより、サイズ変更時のクリッピングや予期しないパディングが防止されます。また、SVG が UI コンポーネントのアイコンとして使用される場合にも、配置の一貫性が維持されます。グリッドベースのレイアウトでは一貫性が重要です。

アスペクト比セーフ

SVG viewBox フィクサーは、スケーリングの問題を修復しながらアスペクト比を保持します。アートワークは、ブレークポイントやデバイス サイズに応じて比例したままになります。これにより、レスポンシブ レイアウトでロゴが伸びたり、アイコンが歪んだりすることがなくなります。

警告をクリアする

SVG viewBox フィクサーは、エクスポート前に欠落している属性または矛盾した属性を強調表示します。これらの警告により、試行錯誤が減り、QA チェックが迅速化されます。これらを使用して、拡大縮小時に破損する可能性のあるファイルを特定します。

クリーンなSVGをエクスポート

SVG viewBox fixer は、viewBox、幅、高さが修正されたクリーンなファイルを出力します。結果は手動で編集しなくてもすぐに本番環境に使用できます。また、アイコン セット間でサイズが一致しない可能性も低くなります。

ローカル処理

SVG viewBox fixer はブラウザで実行されるため、ファイルはアップロードされません。クライアント資産、社内ブランド ファイル、オフライン ワークフローにとって安全です。ローカル処理により、アップロード制限やネットワークのブロックが回避されます。

SVG viewBox を修正する方法

1

SVG をアップロードする

マークアップをドラッグ アンド ドロップまたは貼り付けます。 SVG viewBox fixer はソースをローカルにロードし、レビュー用のプレビューを準備します。修正を適用する前に、現在のディメンションを検査できます。 SVG ファイルを開いてすぐに処理できます。

2

viewBoxを修正

SVG viewBox fixer を実行して、正しい viewBox を自動検出して適用します。プレビューを確認して、アートワークが正しくフレーム化されていることを確認します。必要に応じて、設計ツールでソースを調整し、修正を再実行します。

3

SVGをエクスポートする

修正された SVG をダウンロードするか、編集を続行してください。 SVG viewBox フィクサーはファイル名をそのままの状態に保ち、リポジトリ内で簡単に置き換えることができます。明確な監査証跡が必要な場合は、両方のバージョンを保持してください。設計ドキュメントで修正された viewBox 値を書き留めておくことも役立ちます。

SVG ViewBox フィクサーに関するよくある質問

viewBox が SVG スケーリングにとって重要なのはなぜですか?
viewBox は、SVG が正しくスケールされるように内部座標系を定義します。 SVG viewBox フィクサーは、この属性が存在し、アートワークの境界と一致することを確認して、トリミングや歪みを防ぎます。これがないと、CSS のサイズ変更によりアイコンが引き伸ばされたりクリップされたりする可能性があります。
viewBox を修正すると SVG の外観が変わりますか?
SVG viewBox fixer は、スケーリングを改善しながらビジュアル出力を同じに保つことを目的としています。元の SVG が間違った寸法に依存していた場合、viewBox を修正すると意図した配置を復元できます。常に複数のサイズでプレビューして結果を確認してください。
SVG に幅または高さしかない場合はどうなりますか?
SVG viewBox fixer は、利用可能な寸法から欠損値を推測し、安全な viewBox を適用します。これにより、レスポンシブなレイアウトで歪みなくサイズを変更できるようになります。また、SVG が間違った原点からスケールされるという一般的な問題も回避されます。
後から SVG のサイズを変更することはできますか?
はい。 SVG viewBox fixer が正しい viewBox を設定した後は、比率を崩すことなく CSS または属性を使用してサイズを変更できます。これはアイコン セットと UI コンポーネントにとって不可欠です。高さを固定して幅: 100% を使用し、アスペクト比を維持することもできます。
SVG はどこかにアップロードされていますか?
いいえ。SVG viewBox フィクサーはブラウザ内でローカルに実行されるため、ファイルがデバイスから流出することはありません。これは、機密のブランド資産やクライアントの仕事にとって安全です。また、大きなファイルの待ち時間も短縮されます。
viewBoxを修正した後に最適化したほうがいいでしょうか?
はい。 SVG viewBox フィクサーによりスケーリングが修正され、最適化によりファイル サイズが削減されます。多くのチームはまず viewBox を修正し、リリース前にオプティマイザーを実行します。このシーケンスにより、バイトをトリミングしながらビジュアルが安定します。
スプライトやアイコン ライブラリでも機能しますか?
SVG viewBox フィクサーは、個々のアイコンとスプライト エントリに対して機能します。スプライト ワークフローの場合、結合する前に各アイコンの viewBox を修正して、サイズ変更の一貫性を保ちます。これにより、最終的なスプライトでのサイズ変更が回避されます。
修正を確認するにはどうすればよいですか?
プレビューを使用して、幅、高さ、および viewBox の値を検査します。 SVG viewBox フィクサーの出力は、クリッピングや予期しない間隔が生じることなく、さまざまなサイズでスムーズにスケーリングする必要があります。応答性の高いコンテナーでのテストは、適切な最終チェックです。ブラウザの開発ツールで SVG を調べて、計算されたボックスを確認することもできます。
SVG ViewBox Fixer はダウンロードせずに無料で使用できますか?
はい。 SVG ViewBox Fixer はブラウザで無料で使用できます。ダウンロードやインストールは必要ありません。
SVG ViewBox Fixer を使用するにはアカウントが必要ですか?
いいえ、SVG ViewBox Fixer はサインアップせずにブラウザで即座に動作し、ファイルはローカルに残ります。