Bentuk SVG Khusus dalam draw.io: Gambar atau Stencil?

Untuk bentuk SVG khusus dalam draw.io, tentukan apa yang perlu Anda ubah setelah penyisipan. Gambar SVG tertanam berguna ketika Anda menginginkan tampilan artwork. Stencil XML native adalah jalur untuk mendefinisikan geometri diagram, gaya, dan titik koneksi khusus. Library khusus dapat menyimpan kedua jenis item untuk digunakan ulang.

Pilihan tersebut menyelesaikan masalah berbeda. Menyimpan SVG dalam library tidak dengan sendirinya mengubah path-nya menjadi bentuk diagram native. Referensi bentuk khusus draw.io membedakan gambar tertanam dari bentuk yang didefinisikan dalam format XML-nya.

Jika diagram Anda ditulis dalam Mermaid, gunakan alur kerja paket ikon SVG khusus untuk mendaftarkan artwork sambil mempertahankan label dan konektor dalam sumber diagram.

Pilih perilaku sebelum mengonversi artwork

Bayangkan simbol perangkat kecil: badan persegi panjang dengan satu indikator lingkaran. Anda ingin menggunakannya ulang dalam beberapa diagram proses.

Dalam diagram bergaya presentasi, perangkat mungkin hanya perlu terlihat konsisten. Dalam diagram koneksi, Anda mungkin ingin garis menempel pada titik tengah tepi kiri dan kanannya. Tuliskan kebutuhan itu sebelum menyiapkan file lain.

Sisipkan SVG ketika tampilannya sudah cukup

Panduan penyisipan SVG resmi mendokumentasikan penyeretan file SVG dari komputer ke canvas. Anda juga dapat menggunakan Arrange → Insert → Image. Pilih Actual Size ketika diminta, lalu ubah ukuran artwork yang disisipkan sesuai kebutuhan.

Untuk contoh perangkat, gunakan salinan kerja dan periksa indikator lingkaran kecil setelah perubahan ukuran. Bentuk yang terbaca jelas pada ukuran penuh mungkin kehilangan detail bergunanya dalam diagram ringkas.

Simpan sumber artwork yang dapat diedit secara terpisah. Jika Anda perlu memindahkan lingkaran di dalam perangkat, lakukan perubahan itu dalam editor sumber dan ganti gambar penyerahan. Jangan menghabiskan waktu mencari perintah Ungroup hanya karena SVG berisi beberapa bagian yang terlihat. Panduan objek dan ungroup SVG kami menjelaskan bagaimana struktur file memengaruhi ekspektasi itu.

Gambar SVG biasa dari seluruh diagram juga perlu perhatian. Panduan penyisipan draw.io menjelaskan bahwa SVG biasa tidak membawa informasi konektor yang diperlukan untuk merekonstruksi diagram yang dapat diedit. Simpan file diagram asli ketika Anda memilikinya.

Pewarnaan ulang SVG tertanam memiliki persyaratannya sendiri

Draw.io menyediakan jembatan terbatas antara artwork SVG tertanam dan kontrol warnanya. Panduan warna SVG tertanam menggunakan aturan CSS di dalam SVG dan pengaturan editableCssRules dalam gaya objek yang disisipkan. Fitur ini berlaku untuk gambar tertanam, bukan gambar yang disertakan melalui tautan.

Untuk SVG yang sudah terstruktur dengan aturan CSS, pilih gambar yang disisipkan, pilih Edit Style, dan tambahkan:

editableCssRules=.*;

Pola yang didokumentasikan memilih semua aturan yang memenuhi syarat. Pola itu berada dalam gaya objek draw.io, bukan baris yang ditempelkan ke markup gambar SVG.

Periksa kontrol yang dihasilkan sebelum membangun library berdasarkan kontrol itu. Jika tidak ada kontrol warna berguna muncul, bandingkan sumber dengan contoh class CSS dalam panduan resmi. Jangan menganggap pengaturan akan mengorganisasi ulang atribut pewarnaan SVG sembarang, memisahkan indikator perangkat, atau membuat titik koneksi.

Untuk artwork yang hanya membutuhkan satu perubahan warna permanen, mengedit sumber SVG mungkin lebih sederhana. Simpan salinan dan verifikasi tampilan impor kembali.

Gunakan stencil native untuk bentuk yang sengaja didefinisikan

Stencil native mendeskripsikan bentuk dalam sintaks XML draw.io sendiri. Stencil bukan file SVG yang diganti namanya menjadi .xml. Tutorial bentuk khusus menggunakan Arrange → Insert → Shape untuk membuka editor bentuk dan Preview untuk memeriksa definisi.

Berikut titik awal orisinal kecil untuk simbol perangkat:

<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>

Persegi panjang luar dan lingkaran tengah sengaja sederhana. Nilai koordinat mendefinisikan ruang gambar ilustrasi ini; nilainya bukan pengukuran perangkat fisik.

Referensi XML menetapkan koordinat koneksi relatif. Dengan perimeter="0", dua constraint ini menempatkan titik pada tengah kiri dan kanan. Referensi juga mewajibkan operasi pewarnaan geometri background pada awal foreground, sehingga fillstroke muncul di sana.

Lihat pratinjau bentuk, tambahkan ke diagram pengujian, dan coba perilaku yang benar-benar Anda perlukan:

1. Ubah warna isian dan garisnya.
2. Tempelkan konektor pada setiap titik tengah yang dimaksudkan.
3. Pindahkan perangkat dan periksa kedua penempelan.
4. Ubah ukurannya dan periksa lingkaran, outline, dan posisi konektor.

Ini adalah definisi kecil untuk diadaptasi, bukan konverter SVG-ke-stencil umum. Jika perangkat ilustratif Anda menyertakan banyak detail dekoratif, tentukan mana yang termasuk dalam simbol diagram. Menggambar ulang beberapa primitif penting dapat lebih mudah dipelihara daripada membawa setiap kontur ke stencil.

Simpan library setelah item lolos pemeriksaan

Library adalah langkah penggunaan ulang. Panduan library khusus mendokumentasikan File → New Library, memilih lokasi penyimpanan, dan menambahkan gambar atau menyeret bentuk dari canvas. Library khusus menggunakan ekstensi .xml.

Simpan perangkat dengan nama yang memberi tahu isinya, seperti “Artwork perangkat” atau “Perangkat dengan dua port”. Simpan sebagai entri terpisah jika keduanya berguna.

Kemudian buka diagram baru dan sisipkan item tersimpan. Ulangi satu pengeditan bermakna: warnai ulang artwork jika itu dikonfigurasi, atau tempelkan konektor ke stencil native. Ini menangkap library yang berisi versi simbol Anda yang lebih lama.

Nama file .xml saja tidak memberi tahu apakah item adalah geometri native. Library dan definisi stencil sama-sama melibatkan XML, tetapi library dapat berisi gambar, grup, bentuk khusus, atau seluruh diagram. Periksa perilaku item yang disisipkan.

Pulihkan artwork raster hanya ketika Anda membutuhkan master vektor

Jika ilustrasi perangkat asli hanya tersisa sebagai PNG atau scan, alur kerja clipart-ke-SVG PerfectVector dapat membantu menyiapkan kandidat artwork. Crop salinan ke motif, lihat pratinjau hasil vektor, dan periksa kontur luar, detail lingkaran, ruang kosong, dan latar belakang yang tidak diinginkan. Unduh SVG dan coba melalui jalur penyisipan gambar.

Itu memberi Anda sumber berfokus tampilan untuk ditinjau. Proses tidak mendefinisikan port kiri dan kanan perangkat, makna konektor, atau XML stencil native. Buat semuanya secara sengaja jika diagram memerlukannya.

Simbol persegi panjang dan lingkaran yang sangat sederhana mungkin lebih cepat digambar langsung. Penelusuran lebih berguna ketika ilustrasi yang tersisa berisi kurva khas yang ingin Anda pertahankan. Untuk motif buatan tangan, panduan persiapan ilustrasi peta membahas pembersihan artwork yang digambar sebelum penelusuran.

Jika SVG masih menjadi berkotak ketika diperbesar, periksa apakah berisi bitmap tertanam menggunakan diagnosis gambar raster SVG. Ikhtisar vektorisasi gambar menjelaskan perbedaan lebih luas antara mempertahankan piksel dan memulihkan bentuk.

FAQ

Apakah mengimpor SVG menjadikannya stencil draw.io native? Tidak. Alur kerja penyisipan gambar menanamkan artwork. Stencil khusus native menggunakan definisi bentuk XML draw.io untuk geometri, gaya, dan titik koneksi.

Dapatkah saya mengubah warna dalam SVG tertanam? Draw.io mendokumentasikan pengeditan warna melalui aturan CSS SVG yang sesuai dan pengaturan editableCssRules pada gaya objek yang disisipkan. Periksa struktur sumber dan kontrol yang disediakan setelah penyisipan.

Apakah library khusus mengonversi path SVG menjadi bentuk native? Library menyimpan item yang dapat digunakan ulang, termasuk gambar dan bentuk khusus native. Menyimpan gambar dalam library tidak dengan sendirinya menambahkan geometri native atau semantik konektor.

Apakah memvektorisasi PNG membuat titik koneksi untuk diagram saya? Tidak. Vektorisasi dapat memulihkan kontur artwork. Definisikan titik koneksi dan perilaku diagram native secara terpisah ketika diperlukan.

Sources

1. draw.io — Sisipkan gambar SVG ke diagram — Penyisipan gambar, ukuran, dan batas rekonstruksi konektor diagram dari SVG.
2. draw.io — Buat dan edit bentuk khusus kompleks — Geometri XML native, constraint koneksi, dan operasi gambar.
3. draw.io — Edit warna dalam gambar SVG tertanam — Pengeditan aturan CSS dan persyaratan gambar tertanam versus tertaut.
4. draw.io — Buat bentuk khusus — Editor stencil, alur kerja pratinjau, dan gaya default.
5. draw.io — Bekerja dengan library bentuk khusus — Pembuatan, penyimpanan, dan penggunaan ulang item library campuran.

Pilih perilaku yang Anda perlukan, siapkan satu simbol perangkat, dan uji dalam diagram baru. Jika hanya artwork raster tersisa, siapkan kandidat SVG, periksa konturnya, dan periksa gambar yang disisipkan sebelum menyimpannya ke library.