Thay đổi kích thước SVG

Kích thước hiển thị so với viewBox

Một SVG có kích thước hiển thị (width/height) và hệ tọa độ riêng của nó (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

SVG này rộng 200 x 200 pixel trên màn hình, trong khi các tọa độ bên trong chạy từ 0 đến 100. Hình tròn với r="40" chiếm khoảng 80% viewBox, nên nó hiển thị rộng khoảng 160 px. Công cụ này chỉ thay đổi width và height, tức là kích thước hiển thị được khai báo. Nó không đụng đến viewBox hay các tọa độ, và đó chính là lý do hình vẽ giữ đúng tỉ lệ và vẫn sắc nét: bạn đang bảo trình duyệt vẽ cùng một hình ở kích thước khác, chứ không phải vẽ lại nó.

Vì sao một SVG có thể trông y hệt sau khi bạn đổi kích thước

Nếu SVG được đặt bằng thứ gì đó như <img src="icon.svg" width="500"> hoặc được định cỡ bằng CSS, thì trang bao quanh sẽ kiểm soát kích thước hiển thị và ghi đè lên width/height trong tệp. Trong trường hợp đó, hãy đổi kích thước ở nơi SVG được dùng (thẻ <img>, CSS hoặc khối chứa), chứ không chỉ trong mã.

Nét vẽ và chữ vẫn sắc nét

Vì không có gì bị rasterize, chữ vẫn là chữ vector thật và các đường nét vẫn mượt ở mọi kích thước. Độ dày nét được định nghĩa trong hệ tọa độ, nên nó co giãn cùng với hình vẽ. Nếu bạn muốn một nét giữ nguyên độ dày hiển thị bất kể kích thước, hãy thêm vector-effect="non-scaling-stroke" vào phần tử đó trong nguồn của bạn trước khi thay đổi kích thước.

Giữ cho mã gọn gàng

Các SVG xuất ra từ Figma, Illustrator hay Sketch thường mang theo phần thừa: không gian tên của trình soạn thảo (sodipodi:, inkscape:), siêu dữ liệu ẩn và <defs> không dùng đến. Công cụ này giữ nguyên mã của bạn ngoài phần kích thước. Để loại bỏ phần thừa, hãy đưa tệp qua một trình tối ưu như SVGO trước hoặc sau khi thay đổi kích thước.