SVGView

SVG 回転 オンライン

SVG ファイルを無料でオンライン回転。SVG を 90°・180°・270° 回転したり、水平・垂直に反転して、結果をすぐにダウンロードできます。

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

SVG エディターへようこそ

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

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

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

SVG 回転＆反転ツールを使用する理由

クイックアングル回転

SVG 回転では、ワンクリックで一般的な角度を回転できるため、方向をすばやく調整できます。これにより、エッジが鮮明に保たれ、コード内の手動変換が回避されます。これを使用して、タブ、ナビゲーション、またはミラーリングされた UI 状態のアイコンを配置します。

水平方向と垂直方向の反転

このツールは、UI 方向の変更、RTL レイアウト、またはアイコンのバリエーションのアートワークを反映します。反転は正確で、元のプロポーションがそのまま維持されます。これは、再描画せずに左右のバリアントが必要な場合に役立ちます。

ライブプレビュー

SVG Rotate は更新を即座に表示するため、エクスポートする前に間隔と配置を確認できます。プレビューにより、本番環境での予期せぬ事態が防止され、レビューが迅速に行われます。コントラストのある背景を使用して、はみ出したストロークやパディングを見つけます。

SVG または PNG をエクスポート

SVG Rotate を使用すると、変換された SVG をダウンロードしたり、ドキュメントやスライド用の PNG をエクスポートしたりできます。これは、ラスターのフォールバックを迅速に行う必要がある場合に便利です。 PNG エクスポートは、プラットフォームが SVG をサポートしていない場合にも役立ちます。チームが適切なファイルを選択できるように、両方の形式を一緒に保管してください。

ViewBox に適した出力

SVG Rotate は viewBox を保持または調整するため、変換後もスケーリングが正しく維持されます。これにより、CSS と HTML でのレイアウトが安定します。 viewBox を適切に処理すると、予期しないクリッピングも減少します。ファイルに viewBox がない場合は、回転する前に viewBox を追加してください。

ローカルのプライベート処理

SVG Rotate はアップロードせずにブラウザ内で完全に実行されます。クライアント資産を安全に保ち、制限されたネットワークでも動作します。ローカル処理により、大きなファイルの反復処理も高速に行われます。

SVG を回転または反転する方法

1

SVG を追加する

ファイルをドラッグ アンド ドロップするか、SVG マークアップを貼り付けます。 SVG Rotate はソースをローカルにロードし、元の viewBox をそのまま保持します。最も予測可能な結果を​​得るには、アートワークが中央に配置されていることを確認してください。 SVG ファイルを開いてすぐに処理できます。

2

回転または反転

回転角度または反転方向を選択すると、プレビューが即座に更新されるのを確認できます。 SVG Rotate は形状を整列させて出力を鮮明に保ちます。余分なパディングが表示される場合は、ソースの viewBox を調整します。

3

結果のエクスポート

変換された SVG をダウンロードするか、ワンクリックで PNG をエクスポートします。 SVG Rotate はファイル名を整然と保ち、素早い受け渡しを可能にします。バリアントには、icon-arrow-right.svg のような一貫した名前を使用します。

SVG 回転 オンラインのよくある質問

オンラインで SVG を回転するには？
上のエディターに SVG をドロップし、90°・180°・270° のボタンを選ぶか任意の角度を入力して「適用」をクリックします。プレビューはすぐに更新され、ソフトをインストールせずに回転後のファイルをダウンロードできます。
SVG を 90 度回転できますか？
はい。時計回り 90° と反時計回り 90° のどちらもワンクリックです。viewBox は自動で調整されるため、図形は中央のまま、端が切れません。
SVG を 180 度回転できますか？
はい。180° ボタンで上下が反転します。半回転では viewBox が自分自身に重なるため値は変わらず、レイアウトもずれません。
回転すると画質は落ちますか？
いいえ。回転は transform として SVG 自体に書き込まれるため、パス・グラデーション・テキストはどのサイズでもベクターのまま鮮明です。ラスタライズは行われません。
SVG を左右反転できますか？
はい。水平反転は図形を左右に鏡映し、RTL レイアウトや戻る矢印、反転アイコンのバリエーションに便利です。垂直反転は上下を反転します。
回転と反転を同時にできますか？
はい。回転してから水平反転するなど、順番に適用できます。各操作は現在の結果に対して行われるため、自由に組み合わせられます。
回転時に viewBox を気にする必要はありますか？
いいえ。回転ごとに width・height・viewBox を再計算するので、書き出した図形は比率を保ち、CSS や HTML でも正しく拡大縮小されます。viewBox が無い SVG は先に「viewBox を修復」してください。
回転後に PNG へ書き出せますか？
はい。変換後の SVG をダウンロードするか、スライドや資料、SVG を表示しないチャット用に PNG を書き出せます。
この SVG 回転ツールは無料ですか？
はい。SVG のオンライン回転は完全無料で、登録も透かしもなく、ファイル数の制限もありません。
SVGView は SVG をアップロードしますか？
いいえ。回転と反転はすべてブラウザー内でローカルに実行されます。ファイルが端末の外に出ることはないため、NDA 案件やオフライン作業にも安全です。
ファイルサイズの上限はありますか？
最大 10MB 程度まで快適に動作します。非常に大きい、またはフィルターの多い SVG は描画に少し時間がかかります。不要なフィルターやパスを削除すると速くなります。

関連する SVG ツール

SVG Rotate をこれらのツールと組み合わせて、一貫したアセットのサイズ変更、最適化、エクスポートを行います。これらのヘルパーは、サイズや方向を問わずアセットの一貫性を保ちます。

SVG リサイズ

SVG 回転後にアセットのサイズを変更し、寸法がレイアウト グリッドと一致するようにします。これにより、アイコン セット間で間隔の一貫性が保たれます。

ツールを開く

SVG オプティマイザー

出力を軽量に保つために、SVG 回転後のファイル サイズを削減します。最適化により、エディターのメタデータも削除されます。これは、アセットを Web バンドルで配布するときに役立ちます。

ツールを開く

SVG ビューア

SVG 回転の前後でアセットをプレビューして位置合わせを確認します。背景を切り替えて透明度を確認します。ズームを使用してピクセルのエッジを検査します。

ツールを開く

SVG から PNG

ラスター フォールバックが必要な場合は、SVG 回転結果と一緒に PNG をエクスポートします。これは、スライド内のアセットを共有するときに役立ちます。わかりやすくするために、PNG には同じ方向の名前を付けてください。

ツールを開く

関連 SVG ブログ

SVG ワークフロー、トラブルシューティング、本番運用の実践記事を続けて読めます。