Lật & Xoay SVG

Lật gương hoặc xoay toàn bộ canvas SVG 90°, 180° hay 270°, và nhận lại mã khít đúng như bản gốc. Mọi thứ chạy ngay trên máy bạn; không có gì được tải lên.

Công cụ thực sự làm gì

Công cụ không đụng tới dữ liệu path. Nó bọc toàn bộ tài liệu trong một thẻ <g transform="…"> và viết lại viewBox ở thẻ gốc cho khớp khung mới — nên một icon 24×48 xoay 90° sẽ trả về icon 48×24, không dư lề trống và không bị cắt mất.

Điều này quan trọng, vì cách làm tay ngây thơ (thêm transform="rotate(90)") xoay nội dung quanh gốc tọa độ và đẩy gần hết hình ra ngoài khung nhìn.

Thứ tự xử lý: nội dung được dời để gốc viewBox về 0 0 trước, rồi xoay, rồi mới lật.

Các bước

1. Dán mã SVG vào bên trái, hoặc bấm Tải file.
2. Chọn góc ở Xoay và bật Lật ngang / Lật dọc.
3. So sánh hai khung Trước / sau.
4. Sao chép mã hoặc Tải xuống file .svg.

Lưu ý

• width và height ở thẻ gốc được hoán đổi khi xoay 90° và 270°, giữ nguyên đơn vị (px, em, %).
• Nếu file không có viewBox, công cụ suy ra từ width/height dạng số. File không có cả hai sẽ bị từ chối — không có khung nào đáng tin để xoay.
• Lật là ảnh gương. Chữ bên trong SVG cũng bị lật và đọc ngược. Với file có chữ thì nên xoay, hoặc chuyển chữ thành đường viền trước.

Lật một mũi tên hay chevron rẻ hơn nhiều so với xuất thêm một icon thứ hai — một file, một transform, không tốn thêm lượt tải.

Câu hỏi thường gặp

File của tôi có bị tải lên đâu không?

Không. Việc phân tích và viết lại diễn ra ngay trong trình duyệt.

Sao kết quả lại có thêm một thẻ <g>?

Thẻ nhóm đó mang phép biến đổi. Bỏ nó đi đồng nghĩa phải viết lại từng tọa độ trong từng path — chậm hơn nhiều và dễ sinh sai số làm tròn. Nếu muốn làm phẳng, hãy chạy kết quả qua Tối Ưu SVG.

Xoay góc tùy ý, ví dụ 45°, được không?

Ở đây thì không. Góc tùy ý làm khung bao đổi sang kích thước không còn khớp với hình, nên phải quyết định cắt thế nào. Công cụ này chỉ làm các góc phần tư không mất mát.

Animation của tôi ngừng chạy sau khi xoay.

Animation SMIL hoặc CSS dựa trên tọa độ tuyệt đối sẽ bị ảnh hưởng bởi thẻ nhóm bọc ngoài. Hãy áp phép xoay lên phần tử ngoài cùng trong mã của bạn thay vì ở đây.

Việc này có làm đổi dung lượng file không?

Gần như không — thêm một thẻ <g> và một chuỗi transform, thường dưới 60 byte.

Lật ngang và xoay 180° trông giống hệt nhau trên icon của tôi.

Với hình đối xứng theo trục dọc thì đúng là giống hệt. Chúng khác nhau ngay khi hình bất đối xứng — 180° là phép xoay, còn lật là ảnh gương.