SVG を回転
☞ すべてブラウザ内で処理 — アップロードは一切ありませんここに SVG をドロップ
またはクリックして選択 — SVG のみ
プレビュー
SVG を回転
SVG を 90° 単位で回し、好きな向きに反転できます。図全体が 1 つの transform で包まれるだけなので、ファイル内のパスはデザイナーが残したままの状態を保ちます。
またはクリックして選択 — SVG のみ
プレビュー
transform 1 行
写真の回転はすべてのピクセルを再サンプリングする作業です。SVG の回転は transform を 1 つ書くだけの作業です。図はキャンバスを軸に回るグループで包まれ、キャンバス側(viewBox と width・height)は回転が 90° または 270° のときに縦横を入れ替えます。パスの座標は 1 つも書き換わりません。
結果が正確なのもそのためです。補間もなく、輪郭がにじむこともなく、4 回回してもずれません。90° を 4 回で、元のファイルがバイト単位でそのまま戻ってきます。
3 ステップ
.svg ファイルを選びます。ファイルは端末内に留まります。
90° 単位で回し、好きな軸で反転し、両方を重ねることもできます。
同じ図柄が、新しい向きで手に入ります。
かんたん回答
ここではできません。90° 単位ならキャンバスは図にぴったり収まりますが、37° では収まらず、余白の追加、より大きな viewBox、そして四隅をどう扱うかという判断が必要になります。アイコンを回す、横倒しの書き出しを直すといった実際の用途は 90° 単位で足り、結果も完全に予測できます。
ほとんど変わりません。transform 属性を持つグループ要素が 1 つ加わり、viewBox とサイズ属性が更新されるだけです。パス・グラデーション・クラス・id はそのままです。
変わっているわけではなく、見えているものに従っているだけです。「水平」は常に画面上で左右を反転します。90° 回したあとは、それが元ファイルの別の軸に対応するというだけのことです。画像編集ソフトで誰もが期待する挙動です。
title・desc・style・metadata・defs は、本来あるべきトップレベルに残ります。回転するグループの中に入るのは図そのものだけなので、スクリーンリーダーの読み上げ方も変わりません。
ファイルの width と height に合わせて自動的に追加されます。viewBox がなければ縦横を入れ替えるキャンバスがなく、90° 回すと図が表示範囲の外に押し出されてしまいます。
いいえ。ファイルの解析と書き換えはブラウザ内で行われます。