PixiJS में SVG आयात: Graphics या टेक्सचर चुनें

PixiJS किसी SVG को दो अलग तरीकों से इस्तेमाल कर सकता है: Graphics.svg() समर्थित ड्रॉइंग ज्यामिति को पार्स करता है, जबकि SVG को टेक्सचर के रूप में लोड करने पर Sprite को दिखाने के लिए पिक्सेल मिलते हैं। जब चित्र को काफी बड़ा या छोटा करना हो, तब ज्यामिति चुनें। जब इच्छित प्रदर्शन आकार के अनुरूप रास्टर उस एसेट के लिए उपयुक्त हो, तब टेक्सचर चुनें। PixiJS अपनी SVG मार्गदर्शिका में दोनों रास्ते बताता है।

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

तय करें कि दृश्य को क्या चाहिए

Graphics ऑब्जेक्ट Pixi की ड्रॉइंग सामग्री है, मूल एलिमेंट ID वाला SVG DOM वृक्ष नहीं। उसका कॉन्टेक्स्ट अलग-अलग इंस्टेंस में साझा किया जा सकता है, जैसा Graphics मार्गदर्शिका बताती है। यदि आपको अलग-अलग स्रोत पाथ संपादित करने हों या बाद में दूसरा SVG निर्यात करना हो, तो मूल SVG रखें। दोनों रास्ते अंततः स्क्रीन पर पिक्सेल बनाते हैं।

एक वक्र, एक खाली हिस्सा और एक ट्रांसफ़ॉर्म जाँचें

यह उदाहरण PixiJS 8.21.0, 96 × 96 SVG, रेंडरर रिज़ॉल्यूशन 1 और रिज़ॉल्यूशन 1 पर लोड किया गया SVG टेक्सचर इस्तेमाल करता है। छोटा संस्करण मूल आकार पर बनता है; बड़ा संस्करण पैमाना 3 इस्तेमाल करता है। मूल प्रतीक में दो रंगीन पाथ हैं और एक समूह है जिसे दोनों अक्षों पर 8 SVG इकाइयाँ खिसकाया गया है। खुला हिस्सा बनाने के लिए उसका अंदरूनी कंटूर बाहरी कंटूर की उलटी दिशा में चलता है।

एक ही मूल SVG, तीन रेंडरर में

तीनों कॉलम में खुले हिस्से के आर-पार चेकर्ड पृष्ठभूमि दिखाई देती है। यह चित्र के पीछे की पृष्ठभूमि है, खाली हिस्से में बनाया गया सफ़ेद आकार नहीं। बीच वाले कॉलम का विस्थापन दोनों आकारों पर दिखता है: मूल पैमाने पर 8 इकाइयाँ, पैमाना 3 होने पर 24 प्रदर्शन पिक्सेल बन जाती हैं।

ये अवलोकन इसी स्रोत और संस्करण पर लागू होते हैं। इनसे यह सिद्ध नहीं होता कि हर खाली हिस्सा, ट्रांसफ़ॉर्म, ग्रेडिएंट या निर्यात किया गया SVG इसी तरह काम करेगा।

SVG स्रोत सहेजें

इसे अपने पेज के पास emblem.svg के रूप में सहेजें। यह तुलना के लिए बनाया गया मौलिक चित्र है, वेक्टराइज़ेशन का परिणाम नहीं।

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

दोनों रास्ते चलाएँ

यह स्क्रिप्ट HTTP पर उपलब्ध HTML पेज में रखें, जिसके साथ emblem.svg हो। यह तय संस्करण वाला Pixi बिल्ड आयात करती है, आपका विश्वसनीय SVG लाती है और दो कॉलम में मूल तथा बड़े संस्करण बनाती है। बायाँ कॉलम ज्यामिति इस्तेमाल करता है; दायाँ टेक्सचर।

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

मूल SVG को ब्राउज़र में भी खोलें। बाहरी कंटूर, खुले हिस्से, अलग रंग के आकार और स्थिति की तुलना करें; केवल यह न देखें कि फ़ाइल बिना त्रुटि लोड हुई या नहीं।

जो अंतर वास्तव में दिखता है, उसे ठीक करें

ज्यामिति खिसक गई है

इस परीक्षण में Graphics.svg() ने बाहरी translate(8 8) लागू नहीं किया। अपने प्रोजेक्ट के संस्करण का व्यवहार जाँचते समय तय संस्करण का SVG पार्सर कार्यान्वयन उपयोगी है।

इस विशेष फ़ाइल में ज्यामिति की स्थिति वाली पंक्ति को नीचे दी गई पंक्ति से बदलने पर उस एक ज्ञात स्थानांतरण की भरपाई होती है:

geometry.position.set(16 + 8 * scale, y + 8 * scale);

सुधार में scale शामिल है क्योंकि छूटा हुआ स्थानांतरण स्रोत की निर्देशांक प्रणाली का हिस्सा है। पैमाना 3 होने पर हर दिशा में सुधार 24 पिक्सेल है। यह सभी ट्रांसफ़ॉर्म समतल करने का सामान्य समाधान नहीं। जिस फ़ाइल में नेस्टेड घुमाव, तिरछापन या अलग पाथ पर अलग ट्रांसफ़ॉर्म हों, उसे ठीक से तैयार किया गया डिलीवरी SVG या दूसरा रेंडरिंग रास्ता चाहिए। निर्यात की गई डिलीवरी फ़ाइल की तुलना संपादन योग्य मूल फ़ाइल से करें।

बड़ा टेक्सचर धुँधला है

चित्र का SVG टेक्सचर 96 × 96 पिक्सेल का है। उसके स्प्राइट को 288 × 288 तक बढ़ाने पर स्रोत वक्र दोबारा नहीं पढ़े जाते। अधिक पिक्सेल तैयार करने के लिए ऊँचे रिज़ॉल्यूशन वाला अलग टेक्सचर लोड करें:

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

जाँचे गए बिल्ड में इससे 288 × 288 पिक्सेल का स्रोत बना, जिसका तार्किक टेक्सचर आकार 96 × 96 और स्रोत रिज़ॉल्यूशन 3 था। स्प्राइट बनाते समय largeTexture इस्तेमाल करें। क्वेरी स्ट्रिंग इस प्रयोग को अलग कैश कुंजी देती है; सर्वर को उस URL पर वही SVG देना चाहिए। Pixi की Assets मार्गदर्शिका URL आधारित कैशिंग बताती है और उसकी टेक्सचर मार्गदर्शिका टेक्सचर और उसके स्रोत का अंतर स्पष्ट करती है।

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

कोई बारीकी गायब है

मूल स्रोत को ब्राउज़र में देखें, फिर Pixi में उसकी सरल प्रति जाँचें। SVG में केवल प्रभावित आकार रखें और उसके समूह, रंग तथा प्रभाव एक-एक करके वापस जोड़ें। Pixi के Graphics दस्तावेज़ SVG समर्थन को एक उपसमुच्चय बताते हैं; सफलतापूर्वक लोड होना पूरी संगतता की जाँच नहीं है।

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

आयात से पहले स्रोत तैयार करें

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

PerfectVector तब उपयुक्त है जब केवल सपाट PNG या JPG बचा हो और आइकन के लिए संपादन योग्य स्रोत आकार चाहिए हों। अपनी छवि को SVG में बदलें, फिर Pixi परीक्षण दोहराने से पहले SVG संपादक में कंटूर, अलग रंग और छोटे खुले हिस्से देखें। पहले से मौजूद साफ़ वेक्टर मूल फ़ाइल सीधे इस्तेमाल करें। ट्रेसिंग Pixi के ट्रांसफ़ॉर्म व्यवहार को ठीक नहीं करती और न टेक्सचर रिज़ॉल्यूशन निर्धारित करती है।

दूसरे इंजन आयात के बारे में अपने निर्णय लेते हैं। Godot SVG आयात मार्गदर्शिका वहाँ टेक्सचर और ओवरसैंपलिंग व्यवहार बताती है; Unity SVG मार्गदर्शिका उस अलग कार्यप्रवाह को समझाती है। केवल SVG एक्सटेंशन के आधार पर एक इंजन की सेटिंग दूसरे में लागू न करें।

डिलीवरी वाले आइकन की जाँच करें

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

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

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

क्या PixiJS में SVG आयात करने पर वह वेक्टर ज्यामिति बना रहता है? यह रास्ते पर निर्भर है। Graphics.svg समर्थित ड्रॉइंग ज्यामिति पार्स करता है। SVG को टेक्सचर के रूप में लोड करने पर Sprite को रास्टर स्रोत मिलता है। स्रोत संपादन और आगे के निर्यात के लिए मूल SVG अलग रखें।

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

क्या Graphics.svg हर SVG सुविधा सुरक्षित रखेगा? नहीं। यह SVG के एक उपसमुच्चय का समर्थन करता है। इस PixiJS 8.21.0 उदाहरण में खाली हिस्सा और दो रंग बने रहे, लेकिन समूह का स्थानांतरण नहीं। अपनी निर्यात की गई फ़ाइल को ब्राउज़र संदर्भ से जाँचें।

स्रोत

1. PixiJS SVG मार्गदर्शिका — टेक्सचर और ज्यामिति आयात रास्ते तथा टेक्सचर रिज़ॉल्यूशन बताती है।
2. PixiJS Graphics मार्गदर्शिका — GraphicsContext साझा करने और SVG समर्थन की सीमा समझाती है।
3. PixiJS Assets मार्गदर्शिका — एसेट लोडिंग और URL आधारित कैशिंग का दस्तावेज़ देती है।
4. PixiJS टेक्सचर मार्गदर्शिका — टेक्सचर और उनके स्रोतों का संबंध बताती है।
5. PixiJS 8.21.0 SVG पार्सर — आयात के अंतर की जाँच के लिए तय संस्करण का कार्यान्वयन देता है।