Nhập SVG vào Excalidraw: phần nào chỉnh sửa được?

Thả SVG vào Excalidraw có thể cho bạn một ảnh sắc nét, thay đổi kích thước được, nhưng không cho bạn từng đường dẫn để chỉnh sửa. Nếu cần đổi màu hoặc di chuyển một phần, bạn cần một cảnh Excalidraw được tạo từ các phần tử gốc của ứng dụng. Công cụ chuyển SVG sang Excalidraw có thể dựng các phần tử đó, nhưng kết quả vẫn cần kiểm tra trực quan. Thảo luận Excalidraw về nhập SVG mô tả đúng vấn đề một đối tượng duy nhất so với các phần chỉnh sửa được này.

Chúng tôi thử một biểu tượng nhỏ hai màu có lỗ trong suốt. Công cụ chuyển đổi ở phiên bản cố định tạo ra ba phần tử Excalidraw có thể chọn, nhưng lại tô kín lỗ vốn trong suốt trong SVG. Đây là lời nhắc hữu ích: chỉnh sửa được và giữ đúng hình gốc cần được kiểm tra riêng.

Ba ý nghĩa của “SVG trong Excalidraw”

Trường hợp thứ ba đi theo chiều ngược lại. Công cụ có thể đặt dữ liệu nguồn Excalidraw bên trong SVG xuất ra để bản vẽ của chính nó có thể mở lại để chỉnh sửa. Ví dụ, tiện ích Excalidraw cho VS Code mô tả các tệp .excalidraw.svg có dữ liệu cảnh nhúng. Điều đó không có nghĩa một hình minh họa SVG bất kỳ đã chứa các hình Excalidraw.

Nếu hình nhập vào không thể tách nhóm, trước tiên hãy xác định cấu trúc đối tượng được chọn. Hướng dẫn tách nhóm SVG của chúng tôi phân biệt đối tượng ảnh, đường dẫn ghép và nhóm thực sự; Excalidraw bổ sung định dạng cảnh riêng lên trên câu hỏi về tệp nguồn đó.

Nếu chỉ cần chỉnh sửa đường dẫn SVG, làm theo các bước kiểm tra đồ lại hoặc nhập trong Boxy SVG và giữ bản SVG gốc. Chuyển thành cảnh Excalidraw khi bạn cần các phần tử gốc của cảnh.

Thử nghiệm chuyển đổi nhỏ: giữ được hình nhưng mất lỗ

Nguồn của chúng tôi là SVG viết thủ công: một vòng xanh ngọc tạo từ đường dẫn ghép even-odd cùng một hình tròn vàng. Phần giữa vòng thực sự trong suốt trong bản gốc, không được tô trắng. Chúng tôi chạy nó qua kho mã svg-to-excalidraw chính thức bằng gói npm phiên bản 0.0.2, lưu cảnh trả về thành tệp .excalidraw, mở tệp đó trong Excalidraw và xuất PNG trong suốt để so sánh.

Bản gốc so với cảnh đã chuyển đổi

Quá trình chuyển đổi không báo lỗi và tạo ba phần tử gốc: hai phần tử vẽ xanh ngọc và một hình elip vàng. Điểm nhấn vàng có thể được chọn riêng. Tuy nhiên, tâm trong suốt không vượt qua kiểm tra diện mạo. Trong bản hiển thị gốc, pixel ở tâm trong suốt; trong PNG trong suốt xuất từ Excalidraw, pixel tương ứng có màu xanh ngọc đục. Phản hồi chuyển đổi không có lỗi không bảo đảm hình ảnh khớp nhau.

Đây là một phép thử chủ động giới hạn, không phải khẳng định về mọi SVG hoặc mọi cách chuyển đổi. Thử nghiệm SVG Chop riêng cũng coi cấu trúc SVG phức tạp là thách thức chuyển đổi. Chỉ nhìn nhanh số đối tượng là chưa đủ. Lỗ, mặt nạ, cắt vùng, chuyển sắc, chữ và nhóm lồng nhau cần phép thử riêng khi thiết kế sử dụng chúng.

Cách kiểm tra SVG của bạn

1. Giữ SVG gốc. Lưu bản sao trước khi nhập hoặc chuyển đổi. Kiểm tra vùng muốn thay đổi đã là đường dẫn hay hình riêng chưa. Một đường dẫn ghép có thể có lỗ nhưng không có các phần chọn riêng được.
2. Xác định “chỉnh sửa được” nghĩa là gì với bản vẽ này. Nếu chỉ cần thay đổi tỷ lệ và đặt vị trí hình minh họa, ảnh có thể đủ. Nếu cần di chuyển hoặc đổi màu một phần, phần đó phải tồn tại dưới dạng phần tử gốc của cảnh.
3. Thử cách chuyển đổi trên bản sao. Dự án SVG-to-Excalidraw mã nguồn mở chuyển hình học SVG thành nội dung cảnh Excalidraw. Kiểm tra cách thiết lập hiện tại và ghi lại phiên bản gói bạn dùng. Nhập hoặc mở cảnh kết quả thay vì cho rằng đặt ảnh thông thường sẽ làm lộ các đường dẫn.
4. Đếm và chọn các phần. Bạn có chọn điểm nhấn mà không chọn thân được không? Bạn có đổi màu nó trong khi màu khác giữ nguyên được không? Mở lại cảnh đã lưu và lặp lại thao tác chỉnh sửa.
5. So sánh hình ảnh, không chỉ các đối tượng. Đặt bản gốc và bản xuất Excalidraw trên nền tương phản. Kiểm tra lỗ, vùng chồng lấp, mép, chữ và mọi hiệu ứng bạn cần. Thử nghiệm của chúng tôi sẽ vượt qua kiểm tra “ba phần tử” nhưng thất bại ở bước này.

Nếu chuyển đổi tách một phần dự định thành nhiều phần tử vẽ, nhóm chúng có thể giúp di chuyển dễ hơn, nhưng không khôi phục cấu trúc đường dẫn gốc. Nếu lỗ biến mất, sửa nguồn hoặc dùng trình chỉnh sửa khác cho hình đó. Giữ bản gốc chỉnh sửa được trong trình chỉnh sửa vector khi Excalidraw không thể bảo toàn tính năng bạn cần.

PerfectVector phù hợp ở đâu

PerfectVector giúp ở bước trước trong quy trình chỉ khi nguồn là hình raster, chẳng hạn biểu tượng PNG phẳng chưa có đường dẫn SVG. Chuyển clipart sang SVG, kiểm tra các vùng màu và không gian âm có được giữ không, rồi làm sạch hình học trước khi thử chuyển đổi sang Excalidraw. Hướng dẫn chuẩn bị biểu tượng nhỏ trình bày độ rõ của nguồn và tính nhất quán. Bản thân vector hóa không thể biến ảnh được đặt trong Excalidraw thành phần tử gốc của cảnh, và SVG vừa đồ lại vẫn cần kiểm tra trong ứng dụng đích như trên.

Với SVG đã chứa hình vector phù hợp, bỏ qua bước đồ lại. Thay vào đó, so sánh bản gốc với cảnh đã chuyển đổi. Hướng dẫn hình SVG tùy chỉnh cho draw.io liên quan cũng phân biệt ảnh với hình gốc của một trình chỉnh sửa sơ đồ khác.

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

Tôi có thể tách nhóm ảnh SVG đã đặt thành các hình Excalidraw không? Lựa chọn ở cấp ảnh không làm các phần SVG gốc xuất hiện dưới dạng phần tử gốc Excalidraw. Dùng quy trình chuyển đổi khi cần các hình cảnh riêng biệt, rồi kiểm tra kết quả.

Chuyển SVG sang Excalidraw có bảo toàn mọi lỗ không? Đừng mặc định như vậy. Trong phép thử phiên bản 0.0.2 của chúng tôi, vòng even-odd trở thành phần tử vẽ chỉnh sửa được nhưng tâm trong suốt bị tô kín. So sánh nguồn và cảnh đã lưu của bạn, đặc biệt ở nơi khoảng trống quan trọng.

Tôi có nên vector hóa SVG trước khi nhập không? Không. Nếu SVG đã có các hình bạn cần, hãy kiểm tra cấu trúc của nó và quá trình chuyển đổi Excalidraw. Vector hóa phù hợp khi ảnh ban đầu là hình raster như PNG hoặc JPG.

Nguồn tham khảo

1. Thảo luận Excalidraw #6082 — Câu hỏi của người dùng về SVG nhập vào hoạt động như một khối thay vì các phần chỉnh sửa được.
2. Excalidraw — svg-to-excalidraw — Cách chuyển đổi mã nguồn mở chính thức dùng trong thử nghiệm biểu tượng gốc với phiên bản cố định.
3. Tiện ích Excalidraw Editor cho VS Code — Mô tả tệp cảnh Excalidraw và bản xuất SVG/PNG có dữ liệu cảnh nhúng.
4. Minixcali — SVG Chop — Thử nghiệm độc lập chuyển các phần SVG thành phần tử Excalidraw, với các lưu ý về hình học.

Nếu bắt đầu từ biểu tượng PNG, tạo một bản SVG bằng PerfectVector, kiểm tra các vùng riêng và lỗ, rồi thử cảnh Excalidraw đã lưu trước khi dùng trong bản vẽ.