Gambar SVG Graphviz: Buat Karya Node Tetap Portabel

Diagram Graphviz dapat berisi node dan panah vektor sementara karya khusus pada node-nya masih merujuk ke file gambar terpisah. Jika karya tersebut hilang setelah SVG dipindahkan, periksa referensi image yang dihasilkan sebelum mengubah gambarnya. Bagian yang hilang mungkin paket file yang diserahkan.

Pada keluaran SVG yang diuji di bawah, Graphviz mempertahankan motif.svg sebagai gambar tertaut. Paket lengkap merendernya; diagram yang dipindahkan sendiri kehilangan gambar tersebut. Salinan yang dikemas secara eksplisit menyertakan byte karya dan merendernya dalam pengujian browser yang sama. Langkah pengemasan itu tetap menyisakan elemen image SVG, bukan mengubah motif menjadi path asli graph.

Simpan sumber DOT untuk nama node dan hubungan antarnode. Simpan master karya secara terpisah, dan uji keluaran persis melalui penampil atau alur publikasi yang akan menerimanya.

Bedakan node, karyanya, dan referensi filenya

Atribut image Graphviz menamai karya yang ditampilkan di dalam node. Atribut itu tidak mengganti identitas node atau hubungannya dalam graph. Dokumentasi mensyaratkan dimensi sumber; untuk gambar SVG, sediakan width dan height eksplisit dengan satuan yang sesuai.

Motif asli di sini adalah gambar dua path dengan ruang koordinat 96 kali 64. Dimensi luarnya 96pt kali 64pt. Node yang mengelilinginya dan panah merupakan bagian Graphviz.

Elemen image dapat merujuk ke karya SVG atau piksel. Untuk menyelidiki sumber raster, gunakan diagnosis gambar tertanam SVG secara terpisah. Nama file berakhiran .svg tidak cukup untuk memastikan isi kedua file.

Jalankan contoh kecil dengan renderer eksplisit

Kami memakai @viz-js/viz 3.31.0, build WebAssembly yang melaporkan Graphviz 16.1.0, dengan mesin tata letak dot dan keluaran SVG bawaan. Ini adalah pengujian build dan renderer tersebut, bukan klaim bahwa setiap instalasi Graphviz memiliki perilaku pemuatan gambar yang identik.

Dalam folder proyek Node.js baru, instal paket dengan versi tetap:

npm install @viz-js/viz@3.31.0

Simpan karya asli sebagai motif.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="96pt" height="64pt" viewBox="0 0 96 64">
  <path fill="#173b40" fill-rule="evenodd"
    d="M48 4C70 4 88 17 88 32S70 60 48 60S8 47 8 32S26 4 48 4Z
       M48 14C31 14 19 22 19 32S31 50 48 50S77 42 77 32S65 14 48 14Z"/>
  <path fill="#28bfa3"
    d="M43 20H53V27H60V37H53V44H43V37H36V27H43Z"/>
</svg>

Simpan graph sebagai diagram.dot:

digraph G {
  graph [rankdir=LR, bgcolor="white", margin=0.1];
  node [shape=box, fontname="Arial", fontsize=16,
        color="#173b40", penwidth=1.5,
        fixedsize=true, width=1.8, height=1.1];
  artwork [label="", image="motif.svg", imagescale=true];
  review [label="Review"];
  artwork -> review [color="#173b40", penwidth=1.5];
}

Lalu simpan ini sebagai render.mjs dan jalankan node render.mjs dari folder tersebut:

import { instance } from '@viz-js/viz';
import fs from 'node:fs';
 
const viz = await instance();
const dot = fs.readFileSync('diagram.dot', 'utf8');
const svg = viz.renderString(dot, {
  engine: 'dot',
  format: 'svg',
  images: [{ name: 'motif.svg', width: '96pt', height: '64pt' }]
});
 
fs.mkdirSync('bundle', { recursive: true });
fs.copyFileSync('motif.svg', 'bundle/motif.svg');
fs.writeFileSync('bundle/diagram.svg', svg);
process.stdout.write(`Graphviz ${viz.graphvizVersion}\n`);

Dokumentasi API Viz.js menjelaskan opsi images sebagai informasi ukuran gambar. Menyediakannya memberi tahu tata letak tentang karya bernama ini; opsi tersebut tidak memasukkan byte file ke hasil. Satuan eksplisit menghindari penafsiran angka tanpa satuan sebagai piksel CSS. API memakai point untuk dimensi tanpa satuan.

Untuk instalasi Graphviz native, dokumentasi image resmi menjelaskan sumber gambar lokal dan dimensi yang dibaca dari file sumber. Jangan menyalin pengaturan metadata WebAssembly ke perintah native dan menganggap mekanisme pemuatannya sama.

Periksa apa yang ditulis renderer

SVG yang kami hasilkan berisi elemen ini:

<image xlink:href="motif.svg"
       width="118.8px" height="79.2px"
       preserveAspectRatio="xMinYMin meet"
       x="5.4" y="-79.2"/>

Dimensi dan posisinya adalah nilai yang diamati pada contoh ini. Bagian yang menentukan penyerahan file adalah xlink:href="motif.svg": hasil masih memerlukan sumber daya pada path relatif tersebut.

Salin hanya diagram.svg ke folder lain dan tinggalkan karyanya. Bandingkan dengan paket lengkap. Kami menyajikan kedua folder melalui HTTP lokal dan menampilkan setiap SVG sebagai dokumen melalui elemen HTML object.

Kotak node dan panah yang dihasilkan tetap ada ketika motif tertaut hilang. Membuat ulang tata letak graph tidak menyediakan file yang hilang. Pulihkan lokasi aset yang diharapkan, serahkan seluruh paket, atau pilih langkah pengemasan yang sesuai dengan aplikasi tujuan.

Membuka SVG sebagai dokumen dan menampilkannya melalui HTML img adalah pengujian berbeda. Panduan SVG sebagai gambar dari MDN menjelaskan bahwa konteks gambar dapat membatasi sumber daya eksternal, sementara URL data dapat menyematkannya. Batasan konteks gambar yang dijelaskan di sana tidak berlaku untuk dokumen SVG langsung atau penyematan dokumen melalui object dan iframe. Periksa konteks penyerahan yang benar-benar Anda gunakan.

Kemas motif sederhana ini secara eksplisit

Untuk motif asli mandiri ini, skrip berikut mengganti tepat satu referensi yang diketahui dengan byte SVG file. Simpan sebagai package.mjs dan jalankan setelah rendering:

import fs from 'node:fs';
 
const svg = fs.readFileSync('bundle/diagram.svg', 'utf8');
const needle = 'xlink:href="motif.svg"';
if (svg.split(needle).length !== 2) {
  throw new Error('Expected exactly one motif reference');
}
 
const data = 'data:image/svg+xml;base64,' +
  fs.readFileSync('bundle/motif.svg').toString('base64');
const packaged = svg.replace(needle, `xlink:href="${data}"`);
fs.writeFileSync('self-contained.svg', packaged);

Ini adalah contoh pengemasan terarah, bukan alat penyemat SVG umum. Skrip menangani referensi yang diketahui dalam keluaran ini dan motif yang tidak memiliki font, gambar, stylesheet, atau dependensi eksternal lain. Karya yang lebih kompleks memerlukan pemeriksaan dependensi sendiri.

Salinan yang dikemas dirender dengan motif tetap hadir dalam pengujian browser kami. Perbandingan kedua string keluaran setelah nilai referensi image disamarkan menunjukkan geometri graph identik. File masih berisi satu elemen image; referensinya sekarang dimulai dengan data:image/svg+xml;base64,.

Menyematkan byte gambar SVG dapat menghapus dependensi path file ini sambil mempertahankan sumber vektor karya. Ini tidak menjadikan karya tersebut bentuk node Graphviz native, menambahkan titik koneksi di dalamnya, atau menjamin editor lain akan membuka path-nya secara langsung. Uji perilaku impor penerima.

Jangan pula mencampuradukkan svg_inline dengan penyematan gambar. Dokumentasi keluaran SVG Graphviz menjelaskannya sebagai keluaran tanpa header untuk disertakan dalam HTML. Pada graph yang sama, memilih svg_inline masih menghasilkan referensi motif.svg. Mode keluaran itu tidak mengemas karya.

Pisahkan dimensi dan penskalaan dari portabilitas

Referensi imagescale Graphviz membedakan penyesuaian gambar agar muat di dalam node dari ukuran alami sumber. Dalam contoh ini, imagescale=true menskalakannya secara seragam agar muat. Opsi both menskalakan lebar dan tinggi secara terpisah, yang dapat mengubah proporsi.

Jika motif muncul tetapi meregang, periksa opsi penskalaan. Jika hanya sebagian muncul, periksa batas motif sendiri dan ruang node yang tersedia. Jika motif hilang setelah file dipindahkan, periksa path sumber daya terlebih dahulu. Panduan ukuran SVG menjelaskan perbedaan ukuran yang dideklarasikan dan koordinat gambar.

Halaman keluaran SVG resmi mencatat bahwa keluaran Cairo dapat berbeda dari keluaran SVG bawaan dalam keterbacaan XML dan kemudahan transformasi. Kami tidak menguji Cairo di sini. Tetapkan renderer secara eksplisit dalam proyek yang dapat direproduksi, dan ulangi pemeriksaan pengemasan ketika menggantinya.

Rekonstruksikan karya lebih awal ketika sumbernya hilang

PerfectVector dapat membantu ketika motif ilustratif yang sesuai hanya tersisa sebagai PNG atau hasil scan. Alur rekonstruksi karya ilmiahnya menyediakan kandidat vektor untuk diperiksa sebelum digunakan. Potong hingga hanya motif, periksa siluet dan ruang kosongnya, lalu verifikasi batas dan dimensi SVG unduhan sebelum menambahkannya ke graph.

Rekonstruksi itu tidak memulihkan hubungan node, makna panah, atau label DOT. Simpan semuanya dalam sumber graph. Gunakan SVG asli jika tersedia, gambar ulang simbol sederhana jika itu lebih mudah dirawat, dan pertahankan foto sebagai gambar raster. Ikhtisar vektorisasi gambar menjelaskan batas rekonstruksinya.

Alat diagram lain mengemas karya khusus secara berbeda. Panduan ikon Mermaid membahas data ikon terdaftar, sedangkan karya SVG khusus draw.io membedakan gambar impor dari stencil native. Sesuaikan persiapan karya dengan kebutuhan aplikasi tujuan.

FAQ

Apakah keluaran SVG Graphviz otomatis menyertakan gambar node saya? Pada keluaran SVG bawaan yang diuji, diagram berisi referensi image ke file motif.svg terpisah. Periksa keluaran Anda sendiri dan serahkan dependensinya atau gunakan langkah pengemasan yang sudah diuji.

Apakah svg_inline menggabungkan path gambar SVG ke dalam graph? Tidak. Ini adalah mode keluaran tanpa header untuk disertakan dalam HTML. Dalam pengujian kami, mode ini mempertahankan referensi motif.svg eksternal.

Apakah SVG mandiri sama dengan geometri node native yang bisa diedit? Tidak. Contoh yang dikemas mempertahankan elemen image yang berisi byte SVG. Struktur graph tetap dalam DOT, dan editor penerima menentukan bagaimana karya itu dapat diakses.

Sources

1. Graphviz — image — Sumber gambar node lokal dan dimensi SVG yang diperlukan.
2. Graphviz — imagescale — Penyesuaian seragam serta penskalaan lebar/tinggi secara independen.
3. Graphviz — Keluaran SVG — Keluaran bawaan dan Cairo, serta makna svg_inline.
4. Viz.js — API — Metadata ukuran gambar, satuan eksplisit, dan pemanggilan rendering SVG.
5. MDN — SVG sebagai gambar — Batasan sumber daya eksternal dalam konteks gambar dan perbedaannya dari penyematan dokumen.

Uji satu node melalui alur penyerahan sebelum menyiapkan seluruh pustaka karya. Jika hanya motif raster yang tersisa, siapkan kandidat karya SVG, periksa celah dan proporsinya, lalu tambahkan ke graph DOT Anda dan verifikasi keluaran yang dipindahkan atau dikemas dalam penampil penerima.