đổ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ênThả tệp SVG của bạn vào đây
hoặc nhấp để chọn — chỉ nhận SVG
Xem trước
đổ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.
hoặc nhấp để chọn — chỉ nhận SVG
Xem trước
không có gì bị vẽ lại
Ả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
Chọn một tệp .svg — nó vẫn nằm trên thiết bị của bạn.
Gõ một chiều rộng, chọn một phần trăm, hoặc chuyển sang chế độ đáp ứng.
Bạn nhận lại đúng hình vẽ đó ở kích thước đã yêu cầu.
giải đáp nhanh
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%.
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.
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.
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ố.
Không. Tệp được phân tích và ghi lại ngay trong trình duyệt của bạn.