SVG 회전

SVG 회전 & 뒤집기

SVG를 90° 단위로 돌리거나 원하는 방향으로 뒤집으세요. 그림은 하나의 transform으로 감싸지므로, 파일 안의 모든 패스가 디자이너가 남긴 그대로 유지됩니다.

SVG 회전

☞ 모든 처리가 브라우저 안에서 이루어집니다 — 아무것도 업로드되지 않습니다

여기에 SVG를 놓으세요

또는 클릭해서 찾기 — SVG만 가능

transform 한 줄

SVG를 회전할 때 실제로 일어나는 일

사진을 회전한다는 것은 모든 픽셀을 다시 표본화한다는 뜻입니다. SVG를 회전한다는 것은 transform 하나를 적는 일입니다. 그림이 캔버스를 축으로 도는 그룹에 감싸이고, 캔버스 쪽 — viewBox와 width·height — 은 회전이 90°나 270°일 때 두 변을 맞바꿉니다. 여러분의 패스 좌표는 하나도 다시 쓰이지 않습니다.

결과가 정확한 이유도 여기에 있습니다. 보간도, 흐릿해진 가장자리도, 네 번 돌린 뒤의 어긋남도 없습니다. 90°를 네 번 돌리면 원본 파일이 바이트 단위로 그대로 돌아옵니다.

세 단계

SVG를 회전하거나 뒤집는 방법

01

SVG 놓기

.svg 파일을 고르세요 — 파일은 기기에 남습니다.

02

돌리거나 뒤집기

90°씩 단계로 돌리고, 원하는 축으로 뒤집고, 둘을 겹칠 수도 있습니다.

03

다운로드

같은 그림, 새로운 방향.

간단한 답변

SVG 회전·뒤집기 자주 묻는 질문

임의의 각도로 돌릴 수 있나요?

여기서는 안 됩니다. 90° 단위에서는 캔버스가 그림에 정확히 들어맞지만 37°에서는 그렇지 않아, 여백과 더 큰 viewBox, 그리고 모서리를 어떻게 처리할지에 대한 판단이 필요해집니다. 아이콘 방향 맞추기, 옆으로 누운 내보내기 고치기 같은 실제 용도는 90° 단위로 충분하고, 결과도 정확히 예측할 수 있습니다.

파일이 많이 바뀌나요?

거의 아닙니다. transform 속성이 붙은 그룹 요소 하나가 추가되고, viewBox와 크기 속성이 갱신될 뿐입니다. 패스, 그러데이션, 클래스, id는 그대로입니다.

회전한 뒤에 뒤집기 방향이 왜 달라지나요?

달라진 게 아니라, 화면에 보이는 것을 따르는 것입니다. '좌우'는 언제나 화면상에서 왼쪽과 오른쪽을 뒤집으며, 90° 돌린 뒤에는 그것이 원본 파일의 다른 축에 해당할 뿐입니다. 이미지 편집기에서 누구나 기대하는 동작입니다.

제 SVG의 title은 어떻게 되나요?

title, desc, style, metadata, defs는 원래 있어야 할 최상위에 그대로 남습니다. 회전하는 그룹 안으로 들어가는 것은 그림 자체뿐이라, 스크린 리더가 이미지를 읽는 방식도 달라지지 않습니다.

제 파일에는 viewBox가 없었습니다

파일의 width와 height에 맞춰 하나를 추가해 드립니다. viewBox가 없으면 두 변을 맞바꿀 캔버스도 없어서, 90° 회전이 그림을 보이는 영역 밖으로 밀어내게 됩니다.

파일이 업로드되나요?

아니요. 파일은 브라우저 안에서 해석되고 다시 쓰입니다.