Graphviz SVG: Düğüm çizimlerini taşınabilir tutun

Bir Graphviz diyagramı vektör düğümler ve oklar içerirken özel düğüm çizimleri hâlâ ayrı bir görüntü dosyasına başvurabilir. SVG'yi taşıdıktan sonra bu çizim kayboluyorsa çizimi değiştirmeden önce oluşturulan görüntü başvurusunu inceleyin. Eksik olan şey teslim paketi olabilir.

Aşağıda test edilen SVG çıktısında Graphviz, motif.svg dosyasını bağlantılı bir görüntü olarak tutar. Eksiksiz paket onu görüntüler; tek başına taşınan diyagram ise kaybeder. Açıkça paketlenmiş bir kopya, çizimin baytlarını içerir ve aynı tarayıcı testinde görüntülenir. Bu paketleme adımı, motifi doğrudan grafın yollarına dönüştürmek yerine yine bir SVG image öğesi bırakır.

Düğüm adları ve ilişkileri için DOT kaynağını saklayın. Çizimin ana dosyasını ayrı tutun ve çıktının aynısını, dosyayı alacak görüntüleyici veya yayınlama iş akışı üzerinden test edin.

Düğümü, çizimini ve dosya başvurusunu birbirinden ayırın

Graphviz'in image özniteliği, düğümün içinde gösterilen çizimi adlandırır. Düğümün graftaki kimliğini veya ilişkilerini değiştirmez. Belgeler, kaynak boyutlarının belirtilmesini gerektirir; SVG görüntüler için uygun birimlerle açık width ve height değerleri sağlayın.

Buradaki özgün motif, 96 × 64 boyutunda bir koordinat uzayına sahip, iki yollu bir çizimdir. Dış boyutları 96pt × 64pt değerindedir. Çevresindeki düğüm ve ok Graphviz'e aittir.

Bir image öğesi SVG çizimine veya piksellere başvurabilir. Raster kaynağı araştırmak için ayrı SVG gömülü görüntü teşhisi yazısını kullanın. .svg ile biten bir dosya adı, bu iki dosyadan herhangi birinin içeriğini kanıtlamaya yetmez.

İşleyiciyi açıkça seçerek küçük bir örnek çalıştırın

Graphviz 16.1.0 sürümünü bildiren bir WebAssembly derlemesi olan @viz-js/viz 3.31.0 paketini, dot yerleşim motoru ve yerleşik SVG çıktısıyla kullandık. Bu, söz konusu derlemenin ve işleyicinin testidir; her Graphviz kurulumunun aynı görüntü yükleme davranışına sahip olduğu iddiası değildir.

Yeni bir Node.js proje klasöründe, sürümü sabitlenmiş paketi yükleyin:

npm install @viz-js/viz@3.31.0

Özgün çizimi motif.svg olarak kaydedin:

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

Grafı diagram.dot olarak kaydedin:

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];
}

Ardından bunu render.mjs olarak kaydedin ve o klasörde node render.mjs çalıştırın:

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`);

Viz.js'nin API belgeleri, images seçeneğini görüntü boyutu bilgisi olarak tanımlar. Bunu sağlamak, yerleşime bu adla belirtilen çizim hakkında bilgi verir; dosyanın baytlarını sonuca eklemez. Açık birimler, birimsiz bir sayının CSS pikseli olarak değerlendirilmesini önler. API, birim belirtilmeyen boyutlarda punto kullanır.

Yerel bir Graphviz kurulumu için resmi image belgeleri, yerel görüntü kaynaklarını ve kaynak dosyadan okunan boyutları açıklar. WebAssembly meta veri ayarını yerel bir komuta kopyalayıp aynı yükleme mekanizmasına sahip olduğunu varsaymayın.

İşleyicinin ne yazdığını inceleyin

Oluşturduğumuz SVG şu öğeyi içerir:

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

Boyutlar ve konum, bu test örneğinde gözlenen değerlerdir. Teslimi belirleyen kısım xlink:href="motif.svg" başvurusudur: sonuç hâlâ bu göreli yolda bir kaynağa ihtiyaç duyar.

Yalnızca diagram.svg dosyasını başka bir klasöre kopyalayın ve çizimi geride bırakın. Bunu eksiksiz paketle karşılaştırın. Her iki klasörü de yerel HTTP üzerinden sunduk ve her SVG'yi bir HTML object öğesi aracılığıyla belge olarak görüntüledik.

Bağlantılı motif eksik olduğunda oluşturulan düğüm kutuları ve ok görünmeye devam eder. Graf yerleşimini yeniden oluşturmak eksik dosyayı sağlamaz. Beklenen varlık konumunu geri yükleyin, paketin tamamını teslim edin veya hedef ortama uygun bir paketleme adımı seçin.

SVG'yi belge olarak açmak ile HTML img üzerinden görüntülemek farklı testlerdir. MDN'nin SVG'yi görüntü olarak kullanma rehberi, görüntü bağlamlarının harici kaynakları kısıtlayabildiğini, veri URL'lerinin ise bunları satır içinde içerebildiğini açıklar. Belgelerde anlatılan görüntü bağlamı kısıtlamaları, doğrudan SVG belgelerine veya object ve iframe aracılığıyla belge gömmeye uygulanmaz. Gerçekte kullandığınız teslim bağlamını kontrol edin.

Bu basit motifi açıkça paketleyin

Bu özgün, tek başına çalışabilen motif için aşağıdaki betik, bilinen tek bir başvuruyu dosyanın SVG baytlarıyla değiştirir. package.mjs olarak kaydedin ve görüntüyü oluşturduktan sonra çalıştırın:

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

Bu, genel amaçlı bir SVG satır içine alma aracı değil, belirli bir duruma yönelik paketleme örneğidir. Bu çıktıdaki bilinen başvuruyu ve harici yazı tipleri, görüntüler, stil sayfaları veya başka bağımlılıklar içermeyen bir motifi işler. Daha karmaşık çizimler için ayrıca bağımlılık kontrolü gerekir.

Paketlenmiş kopya, tarayıcı testimizde motif görünür halde görüntülendi. Görüntü başvurusu değerini maskeledikten sonra iki çıktı dizesini karşılaştırdığımızda graf geometrisinin aynı olduğunu gördük. Dosya hâlâ bir image öğesi içerir; başvurusu artık data:image/svg+xml;base64, ile başlar.

SVG görüntü baytlarını gömmek, çizimin vektör kaynağını korurken bu dosya yolu bağımlılığını kaldırabilir. Ancak çizimi doğrudan bir Graphviz düğüm şekline dönüştürmez, içine bağlantı noktaları eklemez veya başka bir düzenleyicinin yollarını doğrudan erişilebilir kılacağını garanti etmez. Dosyayı alacak uygulamanın içe aktarma davranışını test edin.

Ayrıca svg_inline ile görüntü gömmeyi karıştırmayın. Graphviz'in SVG çıktı belgeleri, bunu HTML içine ekleme için başlıksız çıktı olarak tanımlar. Aynı grafımızda svg_inline seçildiğinde de motif.svg başvurusu üretildi. Çıktı modu çizimi paketlemedi.

Boyutları ve ölçeklemeyi taşınabilirlikten ayrı tutun

Graphviz'in imagescale başvuru sayfası, görüntüyü düğümün içine sığdırmayı kaynağın doğal boyutundan ayırır. Bu örnekte imagescale=true, görüntüyü sığdırmak için orantılı olarak ölçekler. both seçeneği ise genişlik ve yüksekliği ayrı ayrı ölçekler; bu, oranları değiştirebilir.

Motif görünüyor ancak esnemişse ölçekleme seçeneğini inceleyin. Yalnızca bir kısmı görünüyorsa kendi sınırlarını ve düğümde kullanılabilir alanı inceleyin. Dosyayı taşıdıktan sonra kayboluyorsa önce kaynak yolunu inceleyin. SVG boyut rehberi, bildirilen boyut ile çizim koordinatlarının farkını açıklar.

Resmi SVG çıktı sayfası, Cairo çıktısının XML okunabilirliği ve dönüştürülebilirliği açısından yerleşik SVG çıktısından farklı olabileceğini belirtir. Burada Cairo'yu test etmedik. Yeniden üretilebilir bir projede işleyiciyi açıkça belirtin ve değiştirdiğinizde paketleme kontrolünü tekrarlayın.

Kaynağı kaybolmuş çizimi grafa eklemeden önce yeniden oluşturun

Uygun bir illüstratif motif yalnızca PNG veya tarama olarak kalmışsa PerfectVector yardımcı olabilir. Bilimsel çizimleri yeniden oluşturma iş akışı, kullanmadan önce inceleyebileceğiniz bir vektör adayı sağlar. Motifi kapsayacak şekilde kırpın, siluetini ve boşluklarını kontrol edin; ardından grafa eklemeden önce indirilen SVG'nin sınırlarını ve boyutlarını doğrulayın.

Bu yeniden oluşturma, düğüm ilişkilerini, okların anlamlarını veya DOT etiketlerini yeniden kurmaz. Bunları graf kaynağında tutun. Özgün SVG mevcutsa onu kullanın, bakımı kolaylaştırıyorsa basit bir sembolü yeniden çizin ve fotoğrafları raster görüntü olarak koruyun. Görüntü vektörleştirmeye genel bakış, yeniden oluşturmanın sınırını açıklar.

Diğer diyagram araçları özel çizimleri farklı şekilde paketler. Mermaid simge rehberi, kayıtlı simge verilerini ele alırken draw.io özel SVG çizimi yazısı, içe aktarılan görüntüyü uygulamanın yerleşik şablonundan ayırır. Çizimi hazırlarken hedef uygulamanın gereksinimlerini dikkate alın.

Sık sorulan sorular

Graphviz SVG çıktısı düğüm görüntümü otomatik olarak içerir mi? Test edilen yerleşik SVG çıktısında diyagram, ayrı motif.svg dosyasına bir görüntü başvurusu içerir. Kendi çıktınızı inceleyin ve bağımlılıklarını teslim edin veya test edilmiş bir paketleme adımı kullanın.

svg_inline, SVG görüntüsünün yollarını grafla birleştirir mi? Hayır. HTML içine ekleme için başlıksız bir çıktı modudur. Testimizde harici motif.svg başvurusunu korudu.

Tek başına çalışabilen bir SVG, doğrudan düzenlenebilir düğüm geometrisiyle aynı mıdır? Hayır. Paketlenmiş örnek, SVG baytlarını içeren bir image öğesini korur. Graf yapısı DOT içinde kalır ve çizime nasıl erişileceğini dosyayı alan düzenleyici belirler.

Kaynaklar

1. Graphviz — image — Yerel düğüm görüntüsü kaynakları ve gerekli SVG boyutları.
2. Graphviz — imagescale — Orantılı sığdırma ve bağımsız genişlik/yükseklik ölçeklemesi.
3. Graphviz — SVG output — Yerleşik ve Cairo çıktısı, ayrıca svg_inline değerinin anlamı.
4. Viz.js — API — Görüntü boyutu meta verileri, açık birimler ve SVG oluşturma çağrıları.
5. MDN — SVG as an image — Görüntü bağlamlarında harici kaynak kısıtlamaları ve belge gömmeyle arasındaki fark.

Bütün bir çizim kütüphanesi hazırlamadan önce teslim iş akışı üzerinden tek bir düğümü test edin. Yalnızca raster bir motif kalmışsa bir SVG çizim adayı hazırlayın, boşluklarını ve oranlarını inceleyin; ardından DOT grafınıza ekleyip taşınmış veya paketlenmiş çıktıyı hedef görüntüleyicide doğrulayın.