SVG.js: आर्टवर्क लाएँ, पाथ बदलें और SVG निर्यात करें

SVG.js में आर्टवर्क आयात करके उसके किसी हिस्से को बदलने के लिए भरोसेमंद SVG मार्कअप .svg() को दें, इच्छित एलिमेंट को उसके बनाए गए ID से खोजें और उसका फ़िल बदलें। स्वतंत्र फ़ाइल के लिए आर्टवर्क का पूरा SVG रूट निर्यात करें। केवल चाइल्ड एलिमेंट का निर्यात एक अंश होता है: उसे दस्तावेज़ की तरह देने से पहले इच्छित आयामों और viewBox वाला रूट चाहिए।

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

तय करें कि सक्रिय आकृतियाँ चाहिए या चित्र

ऐसा JavaScript import कथन जो एसेट URL देता है, फ़ाइल लोड करने की समस्या हल करता है। वह अपने आप फ़ाइल के पाथ को आपके एडिटर के सक्रिय SVG ट्री में नहीं डालता। SVG.js का वर्तमान आयात/निर्यात दस्तावेज़ मार्कअप आयात करने और बाहरी SVG एलिमेंट या केवल उसके चाइल्ड पाने का वर्णन करता है।

इमेज के भीतर SVG अब भी SVG सामग्री है। लेकिन हमारे इमेज-रैपर नियंत्रण में बाहरी SVG ट्री में एक इमेज एलिमेंट है और कोई सीधा पाथ नहीं; उस ट्री में accent खोजने पर कुछ नहीं मिलता। यह खोज एम्बेडेड इमेज के दस्तावेज़ के अंदर नहीं जाती। MDN अलग SVG इमेज संदर्भ और उसकी पाबंदियाँ बताता है। केवल साफ़ रेंडर देखकर संपादन मॉडल का अनुमान न लगाएँ।

एम्बेड करने का व्यापक निर्णय लेने के लिए इनलाइन SVG बनाम इमेज पढ़ें। यदि आपको Fabric का canvas ऑब्जेक्ट मॉडल चाहिए, तो Fabric.js आयात गाइड अलग पार्सर और संपादन API समझाती है।

नाम वाले एक पाथ को बदलें और हर निरूपण सहेजें

नीचे का पूरा कोड खाली फ़ोल्डर में starter.html के रूप में सहेजें। उसे HTTP पर चलाएँ, जैसे python3 -m http.server 8000 से, फिर http://localhost:8000/starter.html खोलें। स्क्रिप्ट CDN से तय संस्करण वाला पैकेज लोड करती है, इसलिए इस उदाहरण को नेटवर्क कनेक्शन चाहिए।

पेज मूल आर्टवर्क, सक्रिय संपादित कॉपी और एक इमेज-रैपर नियंत्रण दिखाता है। उसके लिंक मूल मास्टर, बदलाव से पहले और बाद के पूरे रूट, केवल चाइल्ड वाला टेक्स्ट अंश, नए रूट में लपेटी कॉपी और इमेज रैपर डाउनलोड करते हैं। रिपोर्ट canvas पर बनी SVG इमेज से पिक्सेल पढ़ती है; वह PNG निर्यात नहीं करती।

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Original SVG.js artwork import and export</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  main { display: grid; grid-template-columns: repeat(3, 260px); gap: 20px; }
  figure { margin: 0; }
  svg, img { display: block; background: white; border: 1px solid #bbb; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Trusted artwork, one fill edit and two export forms</h1>
<main>
  <figure><img id="original" alt="Original artwork"><figcaption>Original SVG image</figcaption></figure>
  <figure><div id="live"></div><figcaption>Imported live SVG, accent edited</figcaption></figure>
  <figure><div id="wrapper"></div><figcaption>Image wrapper, original artwork</figcaption></figure>
</main>
<p id="downloads"></p>
<pre id="report"></pre>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.6/dist/svg.min.js"></script>
<script>
  const markup = '<svg xmlns="http://www.w3.org/2000/svg" id="original-artwork" width="240" height="160" viewBox="0 0 240 160">'
    + '<path id="body" d="M80 20 L140 80 L80 140 L20 80 Z M80 56 L104 80 L80 104 L56 80 Z" fill="#176b5b" fill-rule="evenodd"/>'
    + '<path id="accent" d="M172 48 L220 80 L172 112 Z" fill="#d4a53a"/></svg>';
  const url = text => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
  async function pixels(text) {
    const image = new Image();
    image.src = url(text);
    await image.decode();
    const canvas = document.createElement('canvas');
    canvas.width = 240;
    canvas.height = 160;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    const rgba = (x, y) => [...ctx.getImageData(x, y, 1, 1).data];
    return { naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight,
      opening: rgba(80, 80), body: rgba(80, 40), accent: rgba(188, 80), corner: rgba(0, 0) };
  }
  function inventory(text) {
    const node = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
    return { root: node.localName, viewBox: node.getAttribute('viewBox'),
      paths: [...node.querySelectorAll('path')].map(p => ({ id: p.id, d: p.getAttribute('d'), fill: p.getAttribute('fill') })),
      imageCount: node.querySelectorAll('image').length };
  }
  async function run() {
    document.getElementById('original').src = url(markup);
    const host = SVG().addTo('#live').size(240, 160).viewbox(0, 0, 240, 160);
    host.svg(markup);
    const artwork = host.findOne('#original-artwork');
    const before = artwork.svg();
    const accent = artwork.findOne('#accent');
    const beforeD = accent.attr('d');
    accent.fill('#b95434');
    const full = artwork.svg();
    const children = artwork.svg(false);
    const rewrapped = SVG().size(240, 160).viewbox(0, 0, 240, 160);
    rewrapped.svg(children);
    const wrappedFull = rewrapped.svg();
    const imageWrapper = SVG().addTo('#wrapper').size(240, 160).viewbox(0, 0, 240, 160);
    imageWrapper.image(url(markup)).size(240, 160);
    const wrapperFull = imageWrapper.svg();
    const files = { 'master.svg': markup, 'before.svg': before, 'edited.svg': full,
      'children-only.txt': children, 'rewrapped.svg': wrappedFull, 'image-wrapper.svg': wrapperFull };
    for (const [name, text] of Object.entries(files)) {
      const a = document.createElement('a');
      a.href = name.endsWith('.txt') ? 'data:text/plain;charset=utf-8,' + encodeURIComponent(text) : url(text);
      a.download = name;
      a.textContent = name;
      a.style.marginRight = '12px';
      document.getElementById('downloads').append(a);
    }
    const results = {};
    for (const [name, text] of Object.entries(files)) {
      if (name.endsWith('.svg')) results[name] = { inventory: inventory(text), pixels: await pixels(text) };
    }
    document.getElementById('report').textContent = JSON.stringify({
      requestedPackageVersion: '3.2.6',
      scriptURL: document.querySelector('script[src]').src,
      selectedAccentFound: Boolean(accent), selectedAccentDUnchanged: beforeD === accent.attr('d'),
      allPathDUnchanged: JSON.stringify(inventory(before).paths.map(p => p.d)) === JSON.stringify(inventory(full).paths.map(p => p.d)),
      childrenHasOuterSVG: /<svg[\s>]/i.test(children),
      wrapperDirectPathCount: imageWrapper.find('path').length,
      wrapperAccentFound: Boolean(imageWrapper.findOne('#accent')), results
    }, null, 2);
  }
  run();
</script>
</html>
 

आयातित मार्कअप में original-artwork नाम का नेस्टेड रूट है। उदाहरण निर्यात करने से पहले वही रूट चुनता है, इसलिए डिलीवरी कॉपी में उसका बनाया हुआ 240 × 160 व्यूपोर्ट रहता है और उसे किसी असंबंधित पैरेंट कंटेनर पर निर्भर नहीं रहना पड़ता। फिर वह उस रूट के भीतर accent चुनता है। SVG.js सेलेक्टर-आधारित संदर्भों और एलिमेंट विधियों का दस्तावेज़ देता है; हिस्सों के स्पष्ट नाम रखने से पाथ के क्रम पर निर्भरता नहीं रहती।

कोड जानबूझकर अपने निश्चित मार्कअप तक सीमित है। यह SVG अपलोड सैनिटाइज़र नहीं है। मनमानी स्ट्रिंग को पार्स या डाल देने से उसका सुरक्षित होना साबित नहीं होता; MDN का DOMParser संदर्भ पार्सिंग और अविश्वसनीय सामग्री डालने के जोखिम में अंतर बताता है। अपलोड के लिए इसे अपनाने से पहले अलग सत्यापन और भरोसे की नीति बनाएँ।

केवल सक्रिय प्रीव्यू नहीं, सहेजा परिणाम जाँचें

ब्राउज़र में हमारे वास्तविक परीक्षण से ये जाँचें मिलीं:

बदलाव से पहले और बाद के निर्यात में दोनों मूल पाथ की d स्ट्रिंग समान रहीं। त्रिकोण के भीतर नमूने वाला पिक्सेल RGBA (212, 165, 58, 255) से (185, 84, 52, 255) हो गया। हीराकार चित्र के भीतर का नमूना (23, 107, 91, 255) रहा; उसका छेद और बाहरी कोना अल्फ़ा 0 पर रहे। पाँचों स्वतंत्र SVG फ़ाइलें इमेज की तरह दोबारा खुलीं और उनके स्वाभाविक आयाम 240 × 160 थे।

नाम वाले एक हिस्से को बदलें

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

अपने आर्टवर्क में उन्हीं संरचनाओं को जाँचें जिनका आप उपयोग करते हैं: नाम और समूह, क्लिपिंग, ग्रेडिएंट, ट्रांसफ़ॉर्म, स्ट्रोक और टेक्स्ट। निर्यातित फ़ाइल को प्राप्त करने वाले ऐप में दोबारा खोलें और इच्छित संपादन फिर करें। आयात कोड बदलने से पहले SVG संपादन गाइड स्रोत की संरचना समझने में मदद कर सकती है।

केवल चाइल्ड निर्यात को सोच-समझकर बनाया अंश मानें

इस परीक्षण में artwork.svg(false) ने बाहरी svg टैग के बिना दो पाथ दिए। उसमें आर्टवर्क रूट का व्यूपोर्ट नहीं था। अलग rewrapped SVG रूट इन चाइल्ड को लेने से पहले 240 × 160 आयाम और वही viewBox देता है; उसके बाद उसकी निर्यातित फ़ाइल जाँचा हुआ कोरल त्रिकोण दिखाती है।

गंतव्य के अनुसार पूरा दस्तावेज़ या अंश चुनें। स्वतंत्र डाउनलोड के लिए पूरा इच्छित रूट रखें। मौजूदा ड्रॉइंग में डालने के लिए तय करें कि चाइल्ड किस पैरेंट निर्देशांक तंत्र, विरासत में मिले स्टाइल और परिभाषाओं का उपयोग करेंगे। इस सरल उदाहरण में बाहरी संसाधन या साझा परिभाषाएँ नहीं हैं, इसलिए यह नहीं जाँचता कि संदर्भ रखने वाला अंश अपनी हर ज़रूरी निर्भरता साथ लाता है या नहीं।

हमारे इमेज-रैपर निर्यात ने एक एन्कोड किया SVG सुरक्षित रखा, जिसके डिकोड किए बाइट मूल मास्टर से मेल खाते थे। वह नियंत्रण निरूपण का अंतर दिखाता है, रास्टर परिवर्तन नहीं। यदि स्रोत में पहले से उपयोगी वेक्टर ज्यामिति है, तो उसे फिर ट्रेस करने से पहले एलिमेंट चयन या निर्यात की सीमा ठीक करें।

जब स्रोत में संपादन योग्य पाथ न हों

यदि आपके सपाट PNG या JPG चित्र में अलग-अलग रंग बदल सकने वाले क्षेत्र चाहिए, तो PerfectVector से एक SVG उम्मीदवार तैयार करें। आकृति की सीमाएँ और छेद जाँचें, फिर अपने ऐप को चाहिए हिस्सों के नाम बनाएँ। वेक्टराइज़ेशन को नहीं पता कि किसी क्षेत्र का नाम accent होना चाहिए, और वह यह गारंटी नहीं देता कि आयातित दस्तावेज़ एडिटर के डेटा मॉडल में फिट होगा।

जब वे आकृतियाँ पहले से मौजूद हों, तो उपयुक्त SVG मास्टर रखें। यह तय करने के लिए वेक्टराइज़ेशन परिचय पढ़ें कि रास्टर से वेक्टर की तैयारी आपके कोड से पहले होनी भी चाहिए या नहीं।

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

क्या SVG.js संपादन के लिए SVG स्ट्रिंग आयात कर सकता है? हाँ। यह उदाहरण अपना भरोसेमंद मार्कअप सक्रिय SVG कंटेनर में आयात करता है, बनाया गया एक पाथ चुनता है और उसका फ़िल बदलता है। मनमाने अपलोड के लिए अलग भरोसे और सत्यापन की नीति चाहिए; मार्कअप API सैनिटाइज़र नहीं है।

आर्टवर्क दिख रहा है, फिर भी उसका accent पाथ क्यों नहीं मिलता? जाँचें कि आपने सक्रिय मार्कअप आयात किया है या इमेज रखी है। हमारा इमेज-रैपर नियंत्रण SVG आर्टवर्क दिखाता है, लेकिन रैपर के ट्री में कोई सीधा accent पाथ नहीं देता। चुना गया पैरेंट और स्रोत के वास्तविक ID भी जाँचें।

क्या केवल चाइल्ड वाला निर्यात पूरी SVG फ़ाइल है? इस उदाहरण में नहीं। इसमें बाहरी SVG व्यूपोर्ट के बिना दो पाथ हैं। स्वतंत्र फ़ाइल के लिए पूरा इच्छित रूट लें, या अंश डालते समय गंतव्य रूट और निर्देशांक तंत्र स्पष्ट रूप से दें।

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

स्रोत

1. SVG.js — आयात / निर्यात, संस्करण 3.2 — मार्कअप आयात और पूरे रूट या केवल चाइल्ड का सीरियलाइज़ेशन।
2. SVG.js — संदर्भ / एलिमेंट बनाना, संस्करण 3.2 — नाम वाले एलिमेंट ढूँढना और उनके गुण बदलना।
3. SVG.js — रिलीज़ 3.2.6 — चलाए गए उदाहरण में तय की गई आधिकारिक रिलीज़।
4. MDN — इमेज के रूप में SVG — इमेज एम्बेड करने का संदर्भ और उसकी पाबंदियाँ।
5. MDN — DOMParser.parseFromString — मार्कअप पार्स करना और अविश्वसनीय इनपुट को अलग संभालना।

यदि आपका चित्र केवल रास्टर पिक्सेल में है और उसके हिस्सों में संपादन चाहिए, तो अपने आर्टवर्क से वेक्टर उम्मीदवार तैयार करें। बाहरी सीमा और छेद जाँचें, मास्टर रखें, फिर प्राप्तकर्ता कार्यप्रवाह में नाम से किए बदलाव और सहेजे SVG को प्रमाणित करें।