Cách dùng Đổi ViewBox SVG
- Dán một SVG có
viewBox(hoặc width và height). - Nhập kích thước viewBox mới, ví dụ 24 × 24 để khớp với bộ icon.
- Chọn độ chính xác và có scale stroke-width hay không.
- Sao chép kết quả; hai bản xem trước sẽ trông giống hệt nhau, chỉ có các con số thay đổi.
Vì sao nên scale lại tọa độ thay vì dùng transform?
Bộ icon hoạt động tốt nhất khi mọi icon dùng chung một viewBox (24×24, 20×20, 16×16…), nhờ đó chúng căn chỉnh đồng đều và độ dày nét nhất quán. Bọc icon trong <g transform="scale(0.5)"> tuy hiển thị đúng nhưng để lại những con số lạ trong mã nguồn, khiến nét bị scale khó đoán và làm hỏng các công cụ đọc dữ liệu path. Scale lại tọa độ sẽ cho ra SVG sạch, hoạt động như thể được vẽ ngay ở kích thước mới.
Những gì được scale
- Dữ liệu path (
d) — mọi lệnh, cả tuyệt đối lẫn tương đối: M, L, H, V, C, S, Q, T và A. Với cung tròn (A), bán kính được scale còn góc xoay và cờ được giữ nguyên. x,y,cx,cy,x1…y2,width,height,rx,ry,rvàpoints.- Tùy chọn
stroke-widthvàfont-size. - viewBox không bắt đầu từ 0 0 sẽ được dịch về 0 0.
Giới hạn
Phần tử có thuộc tính transform riêng sẽ giữ nguyên, và các kích thước theo phần trăm hoặc dựa trên CSS không được chuyển đổi. Để có kết quả chính xác, hãy làm phẳng transform trong Figma/Illustrator (hoặc dùng convertTransform của SVGO) trước. Scale không đồng đều (hệ số X và Y khác nhau) sẽ xấp xỉ bán kính hình tròn bằng hệ số trung bình.
Bước tiếp theo: làm sạch và dán icon vào Webflow bằng SVG to Webflow, hoặc chuyển sang React bằng SVG to JSX.
Cũng được tìm dưới tên: scale svg path, đổi kích thước svg, svg viewbox, chuẩn hóa icon svg, thay đổi viewbox svg, svg 24x24, resize svg path, tọa độ svg.
Các công cụ dùng kèm tốt với Đổi ViewBox SVG
- SVG sang CSS — Dán SVG vào để nhận data URI gọn đã mã hóa URL, cùng sẵn CSS background-image và mask-image có thể đổi màu.
- Máy tính tỷ lệ khung hình — Thay đổi kích thước ảnh và video mà không bị méo: nhập tỷ lệ và một cạnh để tìm cạnh còn lại, hoặc nhập kích thước để tìm tỷ lệ, kèm mã CSS sẵn để dán.
- Tạo Favicon — Tạo bộ favicon đầy đủ từ logo, một chữ cái hoặc một emoji: favicon.ico nhiều kích thước, Apple touch icon, icon Android/PWA, webclip cho Webflow, web manifest và các thẻ HTML để dán vào trang.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Làm sao để đổi SVG từ 512×512 sang 24×24?
Icon của tôi có bị thay đổi hình dạng không?
Vì sao nên giữ stroke-width không scale?
Còn các transform thì sao?
transform hiện có sẽ được giữ nguyên và bạn sẽ thấy cảnh báo. Hãy làm phẳng chúng trong công cụ thiết kế để có kết quả sạch hoàn toàn.