Graphviz SVG इमेज: नोड के चित्र को पोर्टेबल रखें

Graphviz आरेख में वेक्टर नोड और तीर हो सकते हैं, जबकि नोड का कस्टम चित्र अब भी अलग इमेज फ़ाइल का संदर्भ देता हो। SVG को दूसरी जगह ले जाने पर चित्र गायब हो तो आरेख बदलने से पहले उत्पन्न इमेज संदर्भ जाँचें। समस्या वितरण पैकेज में हो सकती है।

नीचे परीक्षण किए गए SVG आउटपुट में Graphviz, motif.svg को लिंक की गई इमेज रखता है। पूरा बंडल उसे रेंडर करता है; अकेला खिसकाया गया आरेख उसे खो देता है। स्पष्ट रूप से पैकेज की गई प्रति में चित्र के बाइट शामिल हैं और वह उसी ब्राउज़र परीक्षण में रेंडर होती है। इस पैकेजिंग के बाद भी SVG का image तत्व रहता है; आकृति नेटिव ग्राफ़ पाथ में नहीं बदलती।

नोड के नाम और संबंधों के लिए DOT मूल स्रोत रखें। चित्र की मूल फ़ाइल अलग रखें और ठीक उसी आउटपुट को उस व्यूअर या प्रकाशन प्रक्रिया में जाँचें जिसमें उसका इस्तेमाल होगा।

नोड, उसका चित्र और फ़ाइल संदर्भ अलग समझें

Graphviz का image एट्रिब्यूट नोड के अंदर दिखाई देने वाले चित्र का नाम बताता है। वह नोड की ग्राफ़ पहचान या संबंधों की जगह नहीं लेता। दस्तावेज़ में मूल आयाम ज़रूरी हैं; SVG इमेज के लिए उपयुक्त इकाइयों के साथ स्पष्ट width और height दें।

यहाँ की मूल सजावटी आकृति 96 गुणा 64 निर्देशांक क्षेत्र वाला दो-पाथ आरेख है। उसके बाहरी आयाम 96pt गुणा 64pt हैं। आसपास का नोड और तीर Graphviz के हैं।

image तत्व SVG चित्र या पिक्सेल का संदर्भ दे सकता है। रास्टर मूल जाँचने के लिए अलग SVG एम्बेडेड इमेज पहचान मार्गदर्शिका इस्तेमाल करें। .svg पर समाप्त फ़ाइल नाम किसी भी फ़ाइल की सामग्री साबित करने के लिए पर्याप्त नहीं है।

स्पष्ट रेंडरर के साथ छोटा उदाहरण चलाएँ

हमने @viz-js/viz 3.31.0 इस्तेमाल किया, जो Graphviz 16.1.0 बताने वाला WebAssembly बिल्ड है; साथ में dot लेआउट इंजन और अंतर्निहित SVG आउटपुट लिया। यह उस बिल्ड और रेंडरर का परीक्षण है, यह दावा नहीं कि हर Graphviz इंस्टॉलेशन में इमेज लोड करने का व्यवहार एक जैसा है।

नए Node.js प्रोजेक्ट फ़ोल्डर में तय संस्करण वाला पैकेज इंस्टॉल करें:

npm install @viz-js/viz@3.31.0

मूल चित्र 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>

ग्राफ़ को 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];
}

फिर इसे render.mjs नाम से सेव करें और उसी फ़ोल्डर से node render.mjs चलाएँ:

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 के API दस्तावेज़ images विकल्प को इमेज के आकार की जानकारी बताते हैं। इसे देने से लेआउट को इस नाम वाले चित्र की जानकारी मिलती है; फ़ाइल के बाइट परिणाम में नहीं आते। स्पष्ट इकाइयाँ बिना इकाई वाली संख्या को CSS पिक्सेल मानने से बचाती हैं। बिना इकाई के आयाम के लिए API पॉइंट इस्तेमाल करता है।

नेटिव Graphviz इंस्टॉलेशन के लिए आधिकारिक image दस्तावेज़ स्थानीय इमेज संसाधन और मूल फ़ाइल से पढ़े गए आयाम बताते हैं। WebAssembly मेटाडेटा सेटअप को नेटिव कमांड में कॉपी करके यह न मानें कि उसका लोडिंग तंत्र भी समान है।

देखें कि रेंडरर ने क्या लिखा

हमारे उत्पन्न SVG में यह तत्व है:

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

आयाम और स्थिति इसी परीक्षण उदाहरण के देखे गए मान हैं। वितरण नियंत्रित करने वाला हिस्सा xlink:href="motif.svg" है: परिणाम को अब भी उस सापेक्ष पाथ पर संसाधन चाहिए।

केवल diagram.svg दूसरे फ़ोल्डर में कॉपी करें और चित्र पीछे छोड़ दें। उसे पूरे बंडल से मिलाएँ। हमने दोनों फ़ोल्डर स्थानीय HTTP पर सर्व किए और हर SVG को HTML object तत्व से दस्तावेज़ के रूप में दिखाया।

लिंक वाली आकृति गायब होने पर भी उत्पन्न नोड बॉक्स और तीर बने रहते हैं। ग्राफ़ लेआउट दोबारा बनाने से अनुपस्थित फ़ाइल नहीं आती। अपेक्षित एसेट स्थान वापस रखें, पूरा बंडल दें या गंतव्य के लिए उपयुक्त पैकेजिंग चरण चुनें।

SVG को दस्तावेज़ की तरह खोलना और HTML img से दिखाना अलग परीक्षण हैं। MDN की SVG को इमेज की तरह इस्तेमाल करने की मार्गदर्शिका बताती है कि इमेज संदर्भ बाहरी संसाधनों पर रोक लगा सकते हैं, जबकि डेटा URL उन्हें अंदर शामिल कर सकते हैं। उसमें बताए इमेज संदर्भ प्रतिबंध सीधे SVG दस्तावेज़ या object और iframe से दस्तावेज़ एम्बेड करने पर लागू नहीं होते। जिस वितरण संदर्भ का आप वास्तव में इस्तेमाल करते हैं, उसे जाँचें।

इस सरल आकृति को स्पष्ट रूप से पैकेज करें

इस मूल स्वयंपूर्ण आकृति के लिए नीचे की स्क्रिप्ट ठीक एक ज्ञात संदर्भ को फ़ाइल के SVG बाइट से बदलती है। इसे package.mjs नाम से सेव करें और रेंडर करने के बाद चलाएँ:

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

यह खास संदर्भ की पैकेजिंग का उदाहरण है, सार्वभौमिक SVG इनलाइनर नहीं। वह इस आउटपुट का ज्ञात संदर्भ और ऐसी आकृति संभालता है जिसमें बाहरी फ़ॉन्ट, इमेज, स्टाइलशीट या दूसरी निर्भरताएँ नहीं हैं। अधिक जटिल चित्र की निर्भरता अलग जाँचना ज़रूरी है।

हमारे ब्राउज़र परीक्षण में पैकेज की गई प्रति में आकृति दिखाई दी। इमेज संदर्भ का मान छिपाकर दोनों आउटपुट स्ट्रिंग की तुलना करने पर ग्राफ़ ज्यामिति समान मिली। फ़ाइल में अब भी एक image तत्व है; उसका संदर्भ अब data:image/svg+xml;base64, से शुरू होता है।

SVG इमेज बाइट एम्बेड करने से चित्र का वेक्टर मूल सुरक्षित रखते हुए फ़ाइल पाथ की यह निर्भरता हट सकती है। इससे वह चित्र नेटिव Graphviz नोड आकृति नहीं बनता, उसके अंदर कनेक्शन बिंदु नहीं जुड़ते और यह गारंटी नहीं मिलती कि दूसरा एडिटर सीधे उसके पाथ दिखाएगा। प्राप्तकर्ता के इंपोर्ट व्यवहार को परखें।

svg_inline को इमेज एम्बेडिंग भी न समझें। Graphviz के SVG आउटपुट दस्तावेज़ इसे HTML में शामिल करने के लिए हेडर रहित आउटपुट बताते हैं। हमारे उसी ग्राफ़ में svg_inline चुनने पर भी motif.svg संदर्भ बना। आउटपुट मोड ने चित्र पैकेज नहीं किया।

आयाम और स्केलिंग को पोर्टेबिलिटी से अलग रखें

Graphviz का imagescale संदर्भ नोड में इमेज फिट करने और उसके प्राकृतिक आकार को अलग समझाता है। इस उदाहरण में imagescale=true अनुपात बनाए रखकर फिट करता है। both विकल्प चौड़ाई और ऊँचाई को अलग-अलग स्केल करता है, जिससे अनुपात बदल सकते हैं।

आकृति दिखे लेकिन खिंची हो तो स्केलिंग विकल्प जाँचें। केवल हिस्सा दिखे तो उसकी सीमाएँ और नोड की उपलब्ध जगह देखें। फ़ाइल खिसकाने के बाद गायब हो तो पहले संसाधन पाथ जाँचें। SVG आकार मार्गदर्शिका घोषित आकार और आरेखन निर्देशांक का अंतर समझाती है।

आधिकारिक SVG आउटपुट पेज बताता है कि Cairo आउटपुट का XML पढ़ने और ट्रांसफ़ॉर्म करने की सुविधा अंतर्निहित SVG आउटपुट से अलग हो सकती है। हमने यहाँ Cairo नहीं परखा। पुनरुत्पादित किए जा सकने वाले प्रोजेक्ट में रेंडरर स्पष्ट रखें और उसे बदलने पर पैकेजिंग जाँच दोहराएँ।

मूल खोने पर चित्र का पुनर्निर्माण पहले करें

जब उपयुक्त उदाहरणात्मक आकृति केवल PNG या स्कैन में बची हो, तब PerfectVector मदद कर सकता है। उसकी वैज्ञानिक चित्र पुनर्निर्माण प्रक्रिया इस्तेमाल से पहले जाँचने के लिए संभावित वेक्टर देती है। केवल आकृति तक क्रॉप करें, उसकी बाहरी आकृति और खाली जगह जाँचें, फिर ग्राफ़ में जोड़ने से पहले डाउनलोड किए SVG की सीमाएँ तथा आयाम सत्यापित करें।

यह पुनर्निर्माण नोड संबंध, तीर के अर्थ या DOT लेबल वापस नहीं बनाता। उन्हें ग्राफ़ मूल स्रोत में रखें। उपलब्ध हो तो मूल SVG इस्तेमाल करें, रखरखाव आसान हो तो सरल प्रतीक फिर बनाएँ और फ़ोटो रास्टर इमेज के रूप में रखें। इमेज वेक्टराइज़ेशन का परिचय पुनर्निर्माण की सीमा समझाता है।

दूसरे आरेख टूल कस्टम चित्र को अलग तरह पैकेज करते हैं। Mermaid आइकन मार्गदर्शिका पंजीकृत आइकन डेटा बताती है, जबकि draw.io का कस्टम SVG चित्र इंपोर्ट की गई इमेज और नेटिव स्टेंसिल का अंतर समझाता है। चित्र तैयार करते समय गंतव्य की ज़रूरतें ध्यान में रखें।

अक्सर पूछे जाने वाले सवाल

क्या Graphviz SVG आउटपुट अपने-आप मेरे नोड की इमेज शामिल करता है? परीक्षण किए गए अंतर्निहित SVG आउटपुट में आरेख अलग motif.svg फ़ाइल का image संदर्भ रखता है। अपना आउटपुट जाँचें और उसकी निर्भरताएँ साथ दें या परीक्षण किया पैकेजिंग चरण इस्तेमाल करें।

क्या svg_inline, SVG इमेज के पाथ ग्राफ़ में मिलाता है? नहीं। यह HTML में शामिल करने के लिए हेडर रहित आउटपुट मोड है। हमारे परीक्षण में बाहरी motif.svg संदर्भ बना रहा।

क्या स्वयंपूर्ण SVG नेटिव संपादन योग्य नोड ज्यामिति जैसा है? नहीं। पैकेज किए गए उदाहरण में SVG बाइट वाला image तत्व रहता है। ग्राफ़ संरचना DOT में रहती है और फ़ाइल लेने वाला एडिटर तय करता है कि वह चित्र को कैसे दिखाएगा।

स्रोत

1. Graphviz — image — स्थानीय नोड इमेज संसाधन और ज़रूरी SVG आयाम।
2. Graphviz — imagescale — अनुपात बनाए रखकर फ़िट करना और स्वतंत्र चौड़ाई/ऊँचाई स्केलिंग।
3. Graphviz — SVG आउटपुट — अंतर्निहित और Cairo आउटपुट, तथा svg_inline का अर्थ।
4. Viz.js — API — इमेज आकार मेटाडेटा, स्पष्ट इकाइयाँ और SVG रेंडरिंग कॉल।
5. MDN — इमेज के रूप में SVG — इमेज संदर्भों में बाहरी संसाधन प्रतिबंध और दस्तावेज़ एम्बेडिंग से अंतर।

पूरी चित्र लाइब्रेरी तैयार करने से पहले एक नोड को वितरण प्रक्रिया में परखें। अगर केवल रास्टर आकृति बची है, तो संभावित SVG चित्र तैयार करें, उसके अंतर और अनुपात जाँचें, फिर DOT ग्राफ़ में जोड़ें और खिसकाए या पैकेज किए गए आउटपुट को फ़ाइल लेने वाले व्यूअर में सत्यापित करें।