SVG nhập vào sai kích thước: tìm nguyên nhân và sửa

Khi SVG nhập vào sai kích thước, đường dẫn thường không bị hỏng. Ứng dụng xuất và ứng dụng nhập hiểu khác nhau về cách đơn vị tọa độ SVG quy đổi sang điểm ảnh, inch hoặc milimét. Vì vậy cùng một tệp có thể trông đúng trên trình duyệt, rất nhỏ trong Figma và có tỷ lệ khác nữa trong phần mềm CAD hoặc máy cắt.

Đừng vẽ lại hoặc đổi kích thước từng phần ngay. Thêm một hình vuông tham chiếu có kích thước biết trước, nhập toàn bộ tệp rồi đo hình vuông đó. Một phép đo cho biết tỷ lệ tài liệu đã thay đổi hay bản thân hình có vấn đề.

Ba loại kích thước trong SVG

SVG có thể mô tả ba thứ liên quan mà người ta thường gọi chung là “kích thước”. Đặc tả hệ tọa độ SVG 2 định nghĩa quan hệ giữa tọa độ người dùng, khung hiển thị và viewBox.

1. Hình học là tọa độ trong đường dẫn và hình. Một hình chữ nhật có thể chạy từ 0 đến 100 trong hệ tọa độ riêng của tệp.
2. viewBox xác định hình chữ nhật nào của hệ tọa độ đó được hiển thị. viewBox="0 0 100 100" nghĩa là vùng vẽ nhìn thấy trải rộng 100 đơn vị người dùng theo mỗi chiều.
3. Khung hiển thị là kích thước hiển thị hoặc nhập vào. Phần tử gốc có thể khai báo width="100mm", width="400" hoặc không khai báo chiều rộng. Ứng dụng nhận sau đó quyết định đổi giá trị ấy thành đơn vị tài liệu của nó.

Đây là một hình vuông 100 đơn vị hoàn chỉnh với kích thước đầu ra vật lý rõ ràng:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

Hình học là 100 × 100 đơn vị người dùng, trong khi khung hiển thị dự định là 25 × 25 mm. viewBox ánh xạ không gian tọa độ này sang không gian kia. Nếu bỏ width và height, hoặc đổi chúng thành số không có đơn vị, công cụ nhập có thêm quyền tự quyết kích thước hiển thị.

Hướng dẫn dài hơn về chỉnh sửa SVG trình bày cách sửa mã an toàn. Với vấn đề này, giữ nguyên dữ liệu đường dẫn khi kiểm tra phần tử <svg> gốc.

Vì sao DPI thường bị đổ lỗi

Đường dẫn SVG không có độ phân giải điểm ảnh như PNG hoặc JPG. DPI xuất hiện khi phần mềm chuyển đổi giữa điểm ảnh CSS và đơn vị vật lý, hoặc khi ứng dụng thiết kế áp dụng quy ước xuất riêng cho các đơn vị đó.

Đặc tả CSS Values định nghĩa 1in là 96 điểm ảnh CSS và 1pt là 1/72 inch. Quy trình nhầm điểm ảnh CSS thành point sẽ tạo sai lệch tỷ lệ quen thuộc 96 trên 72, tức 1,333. Những hệ số khác có thể xuất hiện khi công cụ nhập bỏ qua width và height vật lý, chỉ dùng viewBox hoặc áp dụng thiết lập đơn vị tài liệu riêng.

Vì vậy, lời khuyên “đổi DPI” chưa đầy đủ. Có thể chẳng có giá trị DPI raster nào để đổi. Trước tiên tính hệ số tỷ lệ:

scale factor = intended size / imported size

Nếu hình vuông 100 mm nhập vào thành 75 mm, hệ số sửa là 100 / 75 = 1.3333. Co giãn toàn bộ bản phác thảo hoặc tài liệu đã nhập theo hệ số đó, rồi kiểm tra lại hình vuông.

Hình vuông tham chiếu phân biệt hai vấn đề có thể trông giống nhau khi nhập lần đầu. Nếu hình vuông và tác phẩm sai theo cùng tỷ lệ, sửa toàn tài liệu. Nếu hình vuông đúng nhưng tác phẩm sai, giữ nguyên đơn vị tài liệu và kiểm tra ranh giới hoặc phép biến đổi của tác phẩm.

Thực hiện phép thử hình vuông tham chiếu

Dùng hình vuông đủ lớn để đo dễ dàng nhưng đủ nhỏ để đặt cạnh tác phẩm.

1. Trong trình chỉnh sửa nguồn, vẽ hình vuông chính xác 10 mm, 1 inch hoặc kích thước biết trước khác.
2. Gán màu tô hoặc đường viền dễ phân biệt, rồi đặt ngoài thiết kế hoàn chỉnh.
3. Xuất tác phẩm và hình vuông cùng nhau thành một SVG.
4. Nhập tệp vào ứng dụng đích mà không kéo tay nắm đổi kích thước.
5. Đo hình vuông bằng công cụ đo kích thước của ứng dụng đích.
6. Chia kích thước dự định cho kích thước đã nhập.
7. Co giãn toàn bộ bản nhập một lần. Đừng đổi kích thước từng hình riêng.
8. Chỉ xóa hình vuông sau khi phép đo cuối đạt yêu cầu.

Phép thử này cũng phát hiện chẩn đoán sai. Nếu hình vuông nhập đúng, đơn vị tài liệu có lẽ vẫn ổn. Thay vào đó, tìm nhóm đã biến đổi, đường viền có chiều rộng hiển thị được tính vào ranh giới, đối tượng ngoài vùng vẽ hoặc công cụ nhập tự vừa nội dung theo trang. Nếu một góc đường viền sắc làm đổi ranh giới nhìn thấy, hãy làm theo chẩn đoán gai nhọn do miter trước khi đổi tỷ lệ vật lý của tài liệu.

Với CNC, laser và công việc 3D, dùng hình vuông có đơn vị vật lý. Hình vuông điểm ảnh có thể xác nhận co giãn đúng tỷ lệ, nhưng không chứng minh được số milimét mà quy trình máy cần.

Sửa tệp hay sửa khi nhập?

Sửa tệp hữu ích khi bạn kiểm soát bản gốc và thường xuyên gửi đến cùng loại quy trình. Sửa lúc nhập an toàn hơn khi ứng dụng CAD hoặc máy cắt có quy ước tỷ lệ đã biết, còn SVG hoạt động đúng ở mọi nơi khác.

Phần mềm CAD và máy cắt cần kiểm tra thêm

Trình duyệt chỉ cần vẽ ảnh. Quy trình CNC, laser và 3D cần kết quả vật lý chính xác. Sau khi tỷ lệ đạt yêu cầu, kiểm tra hình học riêng:

• Xác nhận tài liệu của máy đang dùng đơn vị mong muốn.
• Đo một chi tiết thực, không chỉ khung bao tổng thể.
• Kiểm tra các biên dạng đóng vẫn đóng.
• Tìm hình chữ nhật nền ẩn làm mở rộng ranh giới.
• Xác nhận bản xem trước đường chạy dao, phác thảo hoặc đùn khối trước khi gia công vật liệu.

Hướng dẫn ảnh sang SVG cho CNC trình bày dọn đường dẫn và bàn giao sang CAM. Nếu bước tiếp theo là đùn khối, dùng quy trình SVG cho in 3D sau khi tỷ lệ đúng.

Với Shaper Origin, tiếp tục bằng danh sách kiểm tra kích thước vật lý và kiểu cắt. Xác nhận tỷ lệ là một bước; các đường dẫn đã nhập cũng cần gán kiểu cắt dự định trước khi phay.

Sau khi xác nhận kích thước dự định, kiểm tra kích thước so với tấm cắt trước màn hình chuẩn bị cuối của máy cắt.

Với thẻ hình in, hướng dẫn bố cục thẻ lịch trực quan kiểm tra độ vừa của hình, kích thước trang PDF và tỷ lệ in. SVG đúng kích thước vẫn có thể nằm trên trang bị máy in thu nhỏ.

PerfectVector phù hợp ở đâu

PerfectVector chuyển tác phẩm raster thành đường dẫn SVG chỉnh sửa được. Quy trình SVG và DXF cho CNC hữu ích khi nguồn duy nhất là PNG hoặc JPG và bạn cần hình học vector cho CAM. Công cụ không biết kích thước vật lý cuối của chi tiết, nên bạn vẫn cần đặt và xác minh kích thước trong phần mềm đích.

Sự phân chia đó quan trọng. Vector hóa khôi phục các hình có thể co giãn. Hình vuông biết trước kích thước và phép đo CAM xác lập tỷ lệ vật lý. Xem đây là hai bước kiểm tra giúp tránh kết quả đồ ảnh sạch trở thành đường cắt sai kích thước.

Câu hỏi thường gặp

Vì sao SVG nhập vào nhỏ hơn lúc xuất? Ứng dụng xuất và nhập có thể quy đổi đơn vị người dùng SVG, điểm ảnh CSS, point hoặc đơn vị vật lý khác nhau. Thêm hình vuông biết trước kích thước và so sánh kích thước dự định với kích thước nhập. Nếu toàn tệp đổi theo một hệ số, co giãn tài liệu một lần thay vì sửa từng đường dẫn.

SVG có DPI không? Hình học SVG độc lập với độ phân giải nên không có mật độ điểm ảnh cố định như ảnh raster. Các phép đổi tương tự DPI quan trọng khi phần mềm quy điểm ảnh CSS hoặc đơn vị thiết kế sang inch hay milimét. Quy ước của công cụ nhập thường là nguyên nhân sai lệch, thay vì độ phân giải ảnh ẩn.

viewBox ảnh hưởng thế nào đến kích thước SVG? viewBox định nghĩa hình chữ nhật tọa độ nhìn thấy và cho phép bộ dựng hình ánh xạ các đơn vị người dùng vào khung hiển thị. Bản thân nó không khai báo kích thước vật lý. width và height gốc, CSS hoặc ứng dụng nhận quyết định khung hiển thị lớn đến đâu.

Vì sao SVG đúng kích thước trên trình duyệt nhưng sai trong Fusion hoặc LightBurn? Trình duyệt có thể dựng SVG trong khung hiển thị CSS, còn phần mềm CAD và laser phải ánh xạ sang đơn vị vật lý của tài liệu. Các công cụ nhập đó có thể dùng quy ước khác hoặc bỏ qua một phần siêu dữ liệu kích thước SVG. Đo hình vuông tham chiếu và sửa toàn bản nhập theo hệ số tỷ lệ thu được.

Có nên chuyển SVG sang DXF để sửa kích thước không? Không nên làm bước đầu tiên. Chuyển định dạng có thể giữ nguyên sự mơ hồ về tỷ lệ hoặc tạo thêm vấn đề khác. Trước tiên chẩn đoán hệ số bằng hình vuông tham chiếu. Dùng DXF khi quy trình đích ưu tiên nó, rồi xác minh lại kích thước sau khi nhập.

Nguồn tham khảo

1. W3C — Hệ tọa độ SVG 2 — định nghĩa đơn vị người dùng, khung hiển thị, viewBox và phép biến đổi.
2. W3C — Giá trị và đơn vị CSS cấp 4 — định nghĩa các phép quy đổi tham chiếu giữa điểm ảnh CSS, inch và point.
3. Autodesk Fusion — Chèn SVG — mô tả các tùy chỉnh vị trí và tỷ lệ SVG trong bản phác thảo Fusion.

Trước khi tạo đường chạy dao hoặc cắt, chuẩn bị SVG hoặc DXF cho CNC và kiểm tra kết quả. Đo hình vuông tham chiếu, một chi tiết thực và bản xem trước CAM cuối trước khi bỏ hình vuông khỏi tệp sản xuất.