cắt SVG

Cắt SVG

Kéo một khung trên tệp SVG để chọn phần bạn muốn giữ. Chỉ viewBox thay đổi — mọi đường path vẫn y nguyên, nên lúc nào bạn cũng có thể mở khung ra lại.

cắt 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

một ô cửa sổ, không phải con dao

Cắt một tệp SVG thực chất thay đổi điều gì

SVG giữ hình vẽ trong một hệ tọa độ duy nhất, và viewBox chính là ô cửa sổ bạn nhìn qua. Dịch ô cửa đó là bạn đã cắt được ảnh — không đường path nào bị sửa, không điểm nào bị xóa, không có gì được vẽ lại. Vì thế kết quả chuẩn xác ở mọi kích thước, và vì thế sau này mở rộng ô cửa ra là bạn lấy lại toàn bộ hình.

Đổi lại, tệp không nhỏ đi: phần nằm ngoài ô cửa vẫn còn trong đó, chỉ là không hiển thị. Nếu muốn nó biến mất thật, hãy cắt ở đây trước rồi cho tệp qua bộ tối ưu SVG.

ba bước

Cách cắt 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

Kéo khung

Khoanh phần bạn muốn, hoặc gõ chính xác các giá trị viewBox.

03

Tải về

Vẫn hình vẽ đó, chỉ khác ô cửa sổ nhìn vào nó.

giải đáp nhanh

Câu hỏi thường gặp về cắt SVG

Cắt có làm tệp nhẹ đi không?

Không, và điều đó là bình thường. Cắt chỉ dịch viewBox, nên các hình nằm ngoài vẫn còn trong tệp — trình duyệt chỉ không vẽ chúng ra. Hãy cho tệp đã cắt qua bộ tối ưu SVG nếu bạn muốn dọn sạch phần thừa.

Tôi hoàn tác việc cắt được không?

Được. Vì không có gì bị xóa, chỉ cần mở lại tệp đã cắt ở đây và kéo khung ra ngoài là hình vẽ đầy đủ trở lại. Đó chính là khác biệt thực tế so với cắt một tệp JPG.

Vì sao các con số không phải điểm ảnh?

Chúng là đơn vị người dùng của viewBox — hệ tọa độ riêng của SVG. Một tệp có thể rộng 24 đơn vị mà hiển thị ở 512 điểm ảnh. Thuộc tính width và height được thu theo đúng tỷ lệ giúp bạn, nên tệp đã cắt hiển thị đúng kích thước bạn mong đợi.

Tệp của tôi không có viewBox

Một viewBox sẽ được thêm giúp bạn, khớp với width và height của tệp. Không có viewBox thì chẳng có ô cửa nào để dịch, nên việc cắt không có gì để tác động. Việc thêm vào không làm thay đổi diện mạo.

Nó có còn đáp ứng theo khung chứa không?

Nếu tệp SVG của bạn vốn không có thuộc tính width và height — cách bố trí thường gặp với biểu tượng được định cỡ bằng CSS — thì vẫn giữ nguyên như vậy. Hai thuộc tính đó chỉ bị ghi lại khi chúng đã có sẵn từ đầu.

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.