đổi kích thước SVG

Đổi kích thước SVG

Cho tệp SVG một chiều rộng và chiều cao mới — hoặc bỏ hẳn cả hai để nó co giãn theo khung chứa. Bản thân hình vẽ không bao giờ bị đụng tới.

đổi kích thước SVG

☞ chạy hoàn toàn trong trình duyệt — không có gì được tải lên

Thả tệp SVG của bạn vào đây

hoặc nhấp để chọn — chỉ nhận SVG

không có gì bị vẽ lại

Vì sao đổi kích thước SVG không mất chất lượng

Ảnh raster buộc phải vẽ lại ở kích thước mới, và trong quá trình đó chi tiết bị mất hoặc bị bịa ra. SVG thì mang theo các chỉ dẫn vẽ, nên đổi kích thước chỉ là một ghi chú về việc kết xuất nó lớn cỡ nào. Mọi đường path, màu sắc và chuyển sắc trong tệp vẫn y nguyên.

Ghi chú đó chính là cặp width và height. viewBox nằm bên dưới định nghĩa hệ tọa độ nội bộ và được để yên — đó chính là toàn bộ lý do các hình khối co giãn thay vì bị cắt bớt.

ba bước

Cách đổi kích thước một tệp SVG

01

Thả tệp SVG

Chọn một tệp .svg — nó vẫn nằm trên thiết bị của bạn.

02

Đặt kích thước

Gõ một chiều rộng, chọn một phần trăm, hoặc chuyển sang chế độ đáp ứng.

03

Tải về

Bạn nhận lại đúng hình vẽ đó ở kích thước đã yêu cầu.

giải đáp nhanh

Câu hỏi thường gặp về đổi kích thước SVG

Đổi kích thước có làm ảnh bị mờ không?

Không. Chẳng có gì để mờ — tệp mô tả hình khối chứ không phải điểm ảnh, nên nó được vẽ mới ở bất kỳ kích thước nào bạn đưa ra. Điều này đúng cả ở 25% lẫn 400%.

Bỏ chiều rộng và chiều cao thì được gì?

Nó làm cho SVG đáp ứng theo khung chứa. Không có hai thuộc tính đó, trình duyệt quay về dùng viewBox để lấy tỷ lệ và để phần tử lấp đầy khung chứa, nên bạn định kích thước từ CSS. Đây là lựa chọn quen thuộc cho biểu tượng trong một thư viện component.

Tệp của tôi không có viewBox và có gì đó trông sai

Trong trường hợp đó, một viewBox sẽ được thêm giúp bạn. Không có nó, SVG coi tọa độ của mình là điểm ảnh thuần túy, nên đổi chiều rộng sẽ cắt hình hoặc chèn thêm khoảng trống thay vì co giãn. viewBox được thêm khớp với kích thước gốc nên không có gì xê dịch.

Thu nhỏ thì tệp có nhẹ đi không?

Hầu như không — chỉ hai con số thay đổi. Nếu muốn tệp nhẹ hơn, hãy cho nó qua bộ tối ưu SVG, công cụ này loại bỏ siêu dữ liệu của phần mềm thiết kế và các tọa độ quá nhiều chữ số.

Tệp của tôi có bị tải lên không?

Không. Tệp được phân tích và ghi lại ngay trong trình duyệt của bạn.