Hình SVG tùy chỉnh trong draw.io: Ảnh hay stencil?

Với hình SVG tùy chỉnh trong draw.io, quyết định cần đổi gì sau chèn. Ảnh SVG nhúng hữu ích khi bạn muốn diện mạo của phần hình. Stencil XML theo định dạng riêng của draw.io là cách định nghĩa hình học sơ đồ, kiểu và điểm nối cụ thể. Thư viện tùy chỉnh có thể lưu cả hai loại để dùng lại.

Các lựa chọn đó giải quyết vấn đề khác nhau. Lưu SVG vào thư viện tự nó không biến đường dẫn thành hình theo định dạng riêng của draw.io. Tài liệu hình tùy chỉnh draw.io phân biệt ảnh nhúng với hình được định nghĩa theo định dạng XML của nó.

Nếu sơ đồ viết bằng Mermaid, dùng quy trình bộ biểu tượng SVG tùy chỉnh để đăng ký phần hình trong khi giữ nhãn và đường nối trong nguồn sơ đồ.

Chọn cách hoạt động trước khi chuyển phần hình

Hình dung biểu tượng thiết bị nhỏ: thân chữ nhật có một đèn báo tròn. Bạn muốn tái sử dụng nó trong vài sơ đồ quy trình.

Trong sơ đồ kiểu trình chiếu, thiết bị có thể chỉ cần trông nhất quán. Trong sơ đồ kết nối, bạn có thể muốn đường nối bám vào trung điểm mép trái và phải. Ghi yêu cầu đó trước khi chuẩn bị tệp khác.

Chèn SVG khi diện mạo là đủ

Hướng dẫn chèn SVG chính thức mô tả kéo tệp SVG từ máy lên khung vẽ. Bạn cũng có thể dùng Arrange → Insert → Image. Chọn Actual Size khi được hỏi rồi đổi kích thước phần hình đã chèn nếu cần.

Với ví dụ thiết bị, dùng bản làm việc và kiểm tra đèn báo tròn nhỏ sau đổi cỡ. Hình rõ ở kích thước đầy đủ có thể mất chi tiết hữu ích trong sơ đồ gọn.

Giữ nguồn phần hình chỉnh sửa được riêng. Nếu cần di chuyển hình tròn trong thiết bị, đổi trong trình chỉnh sửa nguồn và thay ảnh bàn giao. Đừng dành thời gian tìm lệnh Ungroup chỉ vì SVG có nhiều phần nhìn thấy. Hướng dẫn đối tượng và tách nhóm SVG giải thích cấu trúc tệp ảnh hưởng kỳ vọng đó thế nào.

Bản vẽ SVG thuần của cả sơ đồ cũng cần thận trọng. Hướng dẫn chèn draw.io giải thích SVG thông thường không mang thông tin đường nối cần để tái dựng sơ đồ chỉnh sửa được. Giữ tệp sơ đồ gốc khi có.

Đổi màu SVG nhúng có yêu cầu riêng

Draw.io cung cấp cầu nối giới hạn giữa phần hình SVG nhúng và điều khiển màu. Hướng dẫn màu SVG nhúng dùng quy tắc CSS trong SVG và thiết lập editableCssRules trong kiểu đối tượng đã chèn. Tính năng áp dụng cho ảnh nhúng, không phải ảnh đưa vào bằng liên kết.

Với SVG đã tổ chức bằng quy tắc CSS, chọn ảnh chèn, chọn Edit Style và thêm:

editableCssRules=.*;

Mẫu được mô tả chọn mọi quy tắc đủ điều kiện. Nó thuộc kiểu đối tượng draw.io, không phải dòng dán vào mã vẽ SVG.

Kiểm tra điều khiển kết quả trước khi dựng thư viện dựa trên chúng. Nếu không có điều khiển màu hữu ích, đối chiếu nguồn với ví dụ lớp CSS trong hướng dẫn chính thức. Đừng cho rằng thiết lập sẽ tổ chức lại thuộc tính màu SVG bất kỳ, tách đèn báo thiết bị hoặc tạo điểm nối.

Với phần hình chỉ cần đổi một màu vĩnh viễn, chỉnh nguồn SVG có thể đơn giản hơn. Lưu bản sao và xác minh diện mạo nhập lại.

Dùng stencil của draw.io cho hình được định nghĩa có chủ đích

Stencil của draw.io mô tả hình bằng cú pháp XML riêng của draw.io. Nó không phải tệp SVG đổi tên thành .xml. Hướng dẫn hình tùy chỉnh dùng Arrange → Insert → Shape để mở trình chỉnh hình và Preview để kiểm tra định nghĩa.

Đây là điểm bắt đầu nhỏ tự tạo cho biểu tượng thiết bị:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

Hình chữ nhật ngoài và hình tròn giữa được chủ động giữ đơn giản. Giá trị tọa độ định nghĩa không gian vẽ minh họa này; không phải số đo vật lý thiết bị.

Tài liệu XML quy định tọa độ nối tương đối. Với perimeter="0", hai ràng buộc đặt điểm tại trung điểm trái và phải. Nó cũng yêu cầu thao tác tô/vẽ đường viền của hình học nền ở đầu foreground, vì vậy fillstroke xuất hiện ở đó.

Xem trước hình, thêm vào sơ đồ thử và thử cách hoạt động thực sự cần:

1. Đổi màu tô và màu đường nét.
2. Gắn đường nối tại mỗi trung điểm dự định.
3. Di chuyển thiết bị và kiểm tra cả hai chỗ gắn.
4. Đổi cỡ và kiểm tra hình tròn, đường bao, vị trí đường nối.

Đây là định nghĩa nhỏ để điều chỉnh, không phải công cụ SVG thành stencil tổng quát. Nếu thiết bị minh họa có nhiều chi tiết trang trí, quyết định chi tiết nào thuộc biểu tượng sơ đồ. Vẽ lại vài hình cơ bản thiết yếu có thể dễ duy trì hơn đưa mọi đường bao vào stencil.

Lưu thư viện sau khi mục đã qua kiểm tra

Thư viện là bước tái sử dụng. Hướng dẫn thư viện tùy chỉnh mô tả File → New Library, chọn nơi lưu và thêm ảnh hoặc kéo hình từ khung vẽ. Thư viện tùy chỉnh dùng phần mở rộng .xml.

Lưu thiết bị với tên cho biết nội dung, như ‘Hình thiết bị’ hoặc ‘Thiết bị có hai cổng’. Giữ thành mục riêng nếu cả hai hữu ích.

Sau đó mở sơ đồ mới và chèn mục đã lưu. Lặp một thao tác sửa có ý nghĩa: đổi màu phần hình nếu đã cấu hình, hoặc gắn đường nối vào stencil của draw.io. Điều này phát hiện thư viện chứa phiên bản biểu tượng cũ.

Chỉ tên tệp .xml không cho biết mục có phải hình học theo định dạng riêng của draw.io không. Cả thư viện lẫn định nghĩa stencil dùng XML, nhưng thư viện có thể chứa ảnh, nhóm, hình tùy chỉnh hoặc toàn sơ đồ. Kiểm tra cách hoạt động mục được chèn.

Chỉ khôi phục raster khi cần bản gốc vector

Nếu minh họa thiết bị gốc chỉ còn PNG hoặc bản quét, quy trình clipart thành SVG của PerfectVector có thể giúp chuẩn bị phần hình ứng viên. Cắt một bản sao để chỉ giữ họa tiết, xem trước kết quả vector và kiểm tra đường bao ngoài, chi tiết tròn, khoảng trống, nền không mong muốn. Tải SVG và thử qua cách chèn ảnh.

Điều đó cho nguồn tập trung diện mạo để kiểm tra. Nó không định nghĩa cổng trái/phải của thiết bị, ý nghĩa đường nối hay XML stencil của draw.io. Chủ động tạo chúng nếu sơ đồ yêu cầu.

Biểu tượng chữ nhật và tròn rất đơn giản có thể vẽ trực tiếp nhanh hơn. Dò nét hữu ích hơn khi minh họa còn có đường cong đặc trưng muốn giữ. Với họa tiết vẽ tay, hướng dẫn chuẩn bị minh họa bản đồ bàn về làm sạch hình vẽ trước dò nét.

Nếu SVG vẫn bị vỡ pixel khi phóng lớn, kiểm tra bitmap nhúng bằng chẩn đoán ảnh raster SVG. Tổng quan vector hóa ảnh giải thích khác biệt rộng hơn giữa giữ pixel và khôi phục hình.

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

Nhập SVG có biến nó thành stencil theo định dạng riêng của draw.io không? Không. Quy trình chèn ảnh nhúng phần hình. Stencil tùy chỉnh của draw.io dùng định nghĩa hình XML của draw.io cho hình học, kiểu và điểm nối.

Tôi có thể đổi màu SVG nhúng không? Draw.io mô tả chỉnh màu qua quy tắc CSS SVG phù hợp và thiết lập editableCssRules trên kiểu đối tượng được chèn. Kiểm tra cấu trúc nguồn và điều khiển xuất hiện sau chèn.

Thư viện tùy chỉnh có chuyển đường dẫn SVG thành hình theo định dạng riêng của draw.io không? Thư viện lưu mục tái sử dụng, gồm ảnh và hình tùy chỉnh theo định dạng riêng của draw.io. Lưu ảnh trong thư viện tự nó không thêm hình học theo định dạng riêng của draw.io hay ngữ nghĩa đường nối.

Vector hóa PNG có tạo điểm nối cho sơ đồ không? Không. Vector hóa có thể khôi phục đường bao phần hình. Định nghĩa riêng điểm nối và cách hoạt động sơ đồ bằng công cụ của draw.io khi cần.

Nguồn tham khảo

1. draw.io — Chèn ảnh SVG vào sơ đồ — Chèn ảnh, kích thước và giới hạn tái dựng đường nối sơ đồ từ SVG.
2. draw.io — Tạo và chỉnh hình tùy chỉnh phức tạp — Hình học XML gốc, ràng buộc nối và thao tác vẽ.
3. draw.io — Chỉnh màu trong ảnh SVG nhúng — Chỉnh quy tắc CSS và yêu cầu ảnh nhúng so với liên kết.
4. draw.io — Tạo hình tùy chỉnh — Trình chỉnh stencil, quy trình xem trước và kiểu mặc định.
5. draw.io — Làm việc với thư viện hình tùy chỉnh — Tạo, lưu và tái sử dụng các mục thư viện hỗn hợp.

Chọn cách hoạt động cần dùng, chuẩn bị một biểu tượng thiết bị và thử trong sơ đồ mới. Nếu chỉ còn raster, hãy chuẩn bị bản SVG ứng viên, kiểm tra đường bao và ảnh được chèn trước khi lưu vào thư viện.