> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# p5.js SVG चित्र: लोड करें, स्केल करें और स्रोत रखें

> p5.js 2.3.4 में async setup से SVG लोड करें, तीन Canvas आकारों पर पारदर्शी छेद जाँचें और संपादन योग्य पाथ को दिखने वाले चित्र से अलग रखें।

Source: https://perfectvector.com/hi/blog/p5js-svg-artwork

Language: hi
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

p5.js 2.3.4 में SVG चित्र लोड करने के लिए `async function setup()` के भीतर `await loadImage('emblem.svg')` लें, फिर मिले चित्र को `image()` से ड्रॉ करें। पेज और SVG को HTTP पर सर्व करें। SVG फ़ाइल को संपादन योग्य मास्टर रखें: चित्र लोड करने का यह रास्ता Canvas पर `p5.Image` पेंट करता है और स्केच को संपादन योग्य SVG पाथ नहीं देता। वर्तमान [loadImage संदर्भ](https://p5js.org/reference/p5/loadImage/) Promise-आधारित लोडिंग तरीका बताता है।

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

## चित्र प्रदर्शन या स्रोत ज्यामिति में से चुनें

| आपको क्या चाहिए                             | क्या रखें या जाँचें                                        |
| ------------------------------------------- | ---------------------------------------------------------- |
| मौजूदा SVG चित्रण को p5 स्केच में पेंट करना | चित्र के रूप में लोड करें और Canvas परिणाम जाँचें          |
| चित्रण की स्रोत रूपरेखाएँ बदलना             | मूल SVG फ़ाइल अलग रखें और संपादित करें                     |
| चित्र को नए आकार पर ड्रॉ करना               | अनुपात बचाएँ और लोड चित्र के आयाम जाँचें                   |
| पाथ-आधारित SVG निर्यात करना                 | अलग ज्यामिति या SVG-रेंडरिंग प्रक्रिया चुनकर सत्यापित करें |

यह गाइड [p5.js 2.3.4](https://github.com/processing/p5.js/releases/tag/v2.3.4) और `P2D` रेंडरर निश्चित करती है। यह 1.x ट्यूटोरियल का `preload()` शुरुआती कोड कॉपी करने के बजाय वर्तमान असिंक्रोनस API लेती है। [createCanvas](https://p5js.org/reference/p5/createCanvas/) स्केच का Canvas बनाता है और रेंडरर स्पष्ट चुनने देता है।

इस संस्करण का [चित्र लोडिंग कार्यान्वयन](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) ब्राउज़र में लोड चित्र को `p5.Image` के आंतरिक Canvas में ड्रॉ करता है। इससे समझ आता है कि `.svg` एक्सटेंशन रखना और Canvas प्रदर्शन बड़ा करना स्केच के भीतर पाथ-आधारित संपादन बचाने के लिए पर्याप्त क्यों नहीं है।

## वास्तविक खुले भाग वाला मूल SVG सहेजें

इस फ़ाइल को `emblem.svg` सहेजें। इसमें एक पाथ है, एम्बेडेड बिटमैप नहीं, घोषित आकार 120 × 120 है और मेल खाता `viewBox` है। बाहरी गोल-कोनों वाला हीरा और भीतरी हीरा उसी पाथ की दो रूपरेखाएँ हैं। `fill-rule="evenodd"` केंद्र को बिना पेंट छोड़ता है; [MDN का fill-rule संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) समझाता है कि यह नियम भरा क्षेत्र कैसे तय करता है।

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>
```

खुला भाग मूँगा रंग की आकृति पर रखा सफ़ेद हीरा नहीं है। स्केच बैकग्राउंड बदलने पर यह अंतर महत्वपूर्ण है। मौजूदा फ़ाइल में `<image>` एलिमेंट हो तो सारी कलाकृति को संपादन योग्य पाथ मानने से पहले [एम्बेडेड रास्टर जाँच सूची](https://perfectvector.com/hi/blog/svg-contains-raster-image) से जाँचें।

## async setup से लोड करें

यह पूरा पेज `emblem.svg` के पास `example.html` नाम से सहेजें, फिर फ़ोल्डर स्थानीय HTTP सर्वर से सर्व करें। जैसे फ़ोल्डर में `python3 -m http.server 8000` चलाएँ और ब्राउज़र में `http://localhost:8000/example.html` खोलें।

```html
<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>
```

लोड के बाद स्थिति ब्लॉक आता है और p5 संस्करण, लोड चित्र के आयाम तथा स्रोत के दो पिक्सेल नमूने बताता है। केंद्र का नमूना पारदर्शिता जाँचता है; मूँगा रंग वाला रिंग का अपारदर्शी भाग जाँचता है। ड्रॉ कॉल एक ही लोड चित्र साझा करते हैं। प्रदर्शन आकार बदलने के बीच वे SVG को फिर लोड या बदलते नहीं।

[image संदर्भ](https://p5js.org/reference/p5/image/) स्रोत सामग्री को गंतव्य चौड़ाई और ऊँचाई से अलग करता है। यहाँ हर गंतव्य ऊँचाई `art.height / art.width` से निकलती है, इसलिए गैर-वर्गाकार प्रतिस्थापन चित्र भी अनुपात रखता है। प्रदर्शन चौड़ाई बदलते समय गणना में दोनों आयाम रखें।

उदाहरण Canvas तुलना स्पष्ट करने के लिए [pixelDensity(1)](https://p5js.org/reference/p5/pixelDensity/) सेट करता है। अपने वास्तविक स्केच का घनत्व दर्ज करें; सामान्य मान डिस्प्ले के अनुसार हो सकता है। Canvas घनत्व बढ़ाने से वे पाथ दोबारा नहीं बनते जो लोड चित्र बन चुके हैं।

## ब्राउज़र परीक्षण ने क्या दिखाया

हमने मूल फ़ाइल और यह शुरुआती उदाहरण Chrome में p5.js 2.3.4, `P2D` और पिक्सेल घनत्व `1` के साथ चलाया। लोड चित्र 120 × 120 था। केंद्र नमूना `[0, 0, 0, 0]` और भीतर का मूँगा रंग नमूना `[235, 112, 90, 255]` था। तीनों गंतव्य आकारों पर स्केच का हल्का बैकग्राउंड खुले भाग से दिखता रहा।

| Canvas गंतव्य | लोड चित्र से अनुपात | देखा गया परिणाम                                 |
| ------------- | ------------------- | ----------------------------------------------- |
| 48 × 48       | 0.4×                | दिखाई देने वाले छेद वाली छोटी रिंग              |
| 120 × 120     | 1×                  | लोड आयामों पर पूरी रिंग                         |
| 240 × 240     | 2×                  | पूरी रिंग और छेद, बड़े किनारे स्पष्ट रूप से नरम |

ये अवलोकन इस बनाई फ़ाइल, ब्राउज़र, संस्करण और रेंडरर का वर्णन हैं। ये हर निर्यातित SVG, फ़िल्टर, फ़ॉन्ट या तृतीय-पक्ष रनटाइम की संगतता का परिणाम नहीं हैं।

**संपादन योग्य स्रोत और Canvas प्रदर्शन**

![बाहरी रेखा वाली संपादन योग्य मूँगा रंग रिंग और बढ़ते आकार के तीन चित्रों का वैचारिक चित्रण, जिनके छेदों से चेकबोर्ड दिखता है।](https://perfectvector.com/blog/p5js-svg-artwork/canvas-and-master.webp)

*चित्रण: स्रोत रूपरेखाओं और दिखाई देने वाले चित्र के काम अलग हैं। यह आरेख p5.js स्क्रीनशॉट, तीखेपन की तुलना या रूपांतरण परिणाम नहीं है।*

परीक्षण भर स्रोत का पाथ डेटा नहीं बदला। चित्र को 2× पर ड्रॉ करने से प्रदर्शन बदला, `emblem.svg` का `d` गुण नहीं। मास्टर प्रोजेक्ट के साथ सहेजें ताकि बाद में अलग डिलीवरी चित्र तैयार कर सकें।

## दिखाई देने वाले लक्षण को ठीक करें

### चित्र कभी दिखाई नहीं देता

जाँचें कि सर्व किए पेज से SVG URL खुलता है और `image()` चलने से पहले `loadImage()` पूरा हुआ है। शुरुआती उदाहरण का `try/catch` लोड विफलता स्थिति ब्लॉक में दिखाता है। loadImage दस्तावेज़ों के अनुसार ब्राउज़र सुरक्षा सीमाओं से दूरस्थ चित्र भी विफल हो सकता है। लोडिंग समस्या को कलाकृति की समस्या से अलग करने के लिए अपने नियंत्रण वाली same-origin फ़ाइल से शुरू करें।

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

### चित्र खिंचा दिखता है

गंतव्य अनुपात को `art.width / art.height` से तुलना करें। जैसे वर्गाकार चित्र को 240 × 120 गंतव्य में ड्रॉ करने पर वह जानबूझकर ऊँचाई के मुकाबले दोगुना चौड़ा होता है। खिंचाव नहीं चाहिए तो उदाहरण की अनुपात गणना लें। स्रोत में ही अतिरिक्त खाली जगह हो तो भरपाई के लिए प्रदर्शन बढ़ाने से पहले आर्टबोर्ड और `viewBox` जाँचें।

### बड़े किनारे नरम दिखते हैं

केवल Canvas आकार नहीं, लोड चित्र के आयाम जाँचें। हमारे परीक्षण में 120 × 120 चित्र को 240 × 240 गंतव्य में ड्रॉ किया गया। गंतव्य के वे आर्ग्युमेंट बदलने से SVG की वक्र रेखाएँ नए चित्र लोड से दोबारा नहीं गुजरतीं।

इच्छित उपयोग के अनुकूल स्पष्ट आयामों वाला डिलीवरी SVG तैयार करें, फिर लोड करें और स्वीकारने से पहले परिणामी `art.width` व `art.height` जाँचें। निर्देशांक तंत्र और स्रोत रूपरेखाएँ सुरक्षित रखें। फिर स्क्रीन पर सबसे छोटा और सबसे बड़ा आकार तुलना करें: अंतिम प्रदर्शन बहुत छोटा हो तो अधिक लोड पिक्सेल छोटे छेद को पठनीय नहीं बना सकते।

स्केच को चित्र पेंट के बजाय ज्यामिति ऑपरेशन चाहिए हों तो अलग योजना बनाएँ। [Canvas Path2D गाइड](https://perfectvector.com/hi/blog/canvas-path2d-svg) पाथ डेटा के साथ काम बताती है, जबकि [PixiJS SVG गाइड](https://perfectvector.com/hi/blog/pixijs-svg-import) उस इंजन की ज्यामिति और टेक्सचर प्रक्रियाएँ तुलना करती है। उनकी API p5 के `loadImage()` के बदले नहीं इस्तेमाल की जा सकतीं।

### केंद्र पारदर्शी के बजाय सफ़ेद है

मूल SVG में पेंट बैकग्राउंड या सफ़ेद भीतरी आकृति जाँचें। इस स्रोत में `evenodd` रूपरेखा छेद छोड़ती है और लोड केंद्र का अल्फ़ा शून्य था। अपनी फ़ाइल को अलग रंग वाले स्केच बैकग्राउंड पर फिर जाँचें; सफ़ेद प्रीव्यू पेज अंतर छिपा सकता है।

## Canvas निर्यात को SVG मास्टर से अलग रखें

सामान्य [saveCanvas संदर्भ](https://p5js.org/reference/p5/saveCanvas/) PNG, WebP और JPG चित्र आउटपुट बताता है। इस API से पेंट किए Canvas को सहेजना मूल SVG पाथ वापस नहीं लाता। आगे रूपरेखा संपादन या पाथ-आधारित डिलीवरी चाहिए तो `emblem.svg` अलग रखें। चिकने दिखते Canvas का स्क्रीनशॉट संपादन योग्य SVG निर्यात प्रक्रिया स्थापित नहीं करता।

चित्रण केवल सपाट PNG या JPG हो और संपादन के लिए स्रोत रूपरेखाएँ चाहिए हों तो PerfectVector पहले के चरण में काम आता है। [चित्र को SVG में बदलें](https://perfectvector.com/hi/image-to-vector), SVG एडिटर में बाहरी रेखा और नकारात्मक खाली स्थान जाँचें, फिर वास्तविक p5 लोडिंग और आकार जाँच दोहराएँ। साफ़ मौजूदा SVG सीधे लें। ट्रेसिंग p5 की चित्र API नहीं बदलती और Canvas आउटपुट को SVG पाथ दस्तावेज़ नहीं बनाती। व्यापक [वेक्टराइज़ेशन गाइड](https://perfectvector.com/hi/blog/what-is-image-vectorization) स्रोत तैयारी का वह चरण समझाती है।

मास्टर रखें, p5 संस्करण व लोड आयाम दर्ज करें और एसेट तभी स्वीकारें जब छेद व किनारे स्केच में इस्तेमाल आकारों पर सही हों।

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

**क्या p5.js loadImage से SVG लोड कर सकता है?**
हाँ। यह p5.js 2.3.4 P2D उदाहरण async setup में await loadImage से मूल SVG लोड करता है। एक सफल लोड को पूरी SVG संगतता मानने के बजाय अपनी फ़ाइल का रूप और लोड आयाम जाँचें।

**क्या लोड किया p5 SVG चित्र पाथ के रूप में संपादन योग्य रहता है?**
चित्र लोडिंग रास्ता p5.Image लौटाता है और उसे Canvas पर पेंट करता है। स्रोत पाथ संपादन के लिए मूल SVG अलग रखें। Canvas चित्र प्रदर्शन लोड कलाकृति के लिए संपादन योग्य SVG DOM नहीं देता।

**बड़ा करने पर मेरा p5 SVG धुँधला क्यों दिखता है?**
लोड चित्र के आयाम गंतव्य आयाम से तुलना करें। हमारा 120 × 120 लोड चित्र 240 × 240 पर नरम दिखा। उपयुक्त आकार का डिलीवरी स्रोत तैयार करें, फिर लोड करें और वास्तविक परिणाम जाँचें।

**क्या saveCanvas मूल SVG निर्यात करता है?**
सामान्य saveCanvas API PNG, WebP और JPG आउटपुट बताती है। मूल SVG मास्टर सुरक्षित रखें या पाथ-आधारित आउटपुट के लिए अलग SVG-रेंडरिंग व निर्यात प्रक्रिया सत्यापित करें।

## स्रोत

1. [p5.js loadImage](https://p5js.org/reference/p5/loadImage/) — Promise-आधारित चित्र लोडिंग और ब्राउज़र सीमाएँ बताता है।
2. [p5.js 2.3.4 रिलीज़](https://github.com/processing/p5.js/releases/tag/v2.3.4) — निश्चित संस्करण और आधिकारिक CDN स्क्रिप्ट पहचानता है।
3. [p5.js createCanvas](https://p5js.org/reference/p5/createCanvas/) — Canvas बनाना और रेंडरर चुनना बताता है।
4. [p5.js 2.3.4 चित्र लोडिंग स्रोत](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) — लोड चित्र को p5.Image के आंतरिक Canvas में ड्रॉ होते दिखाता है।
5. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — evenodd द्वारा compound पाथ का भरा क्षेत्र तय होना समझाता है।
6. [p5.js image](https://p5js.org/reference/p5/image/) — चित्र की जगह और गंतव्य आकार परिभाषित करता है।
7. [p5.js pixelDensity](https://p5js.org/reference/p5/pixelDensity/) — स्केच पिक्सेल घनत्व और डिस्प्ले-निर्भर सामान्य मान बताता है।
8. [p5.js saveCanvas](https://p5js.org/reference/p5/saveCanvas/) — सामान्य Canvas चित्र निर्यात फ़ॉर्मैट सूचीबद्ध करता है।

## Explore

- [Read the HTML article](https://perfectvector.com/hi/blog/p5js-svg-artwork)
- [SVG से Canvas: PNG निर्यात से पहले कलाकृति लोड करें](https://perfectvector.com/hi/blog/svg-canvas-image-export.md)
- [MapLibre SVG आइकन: पिक्सेल और प्रतीक आकार जाँचें](https://perfectvector.com/hi/blog/maplibre-svg-symbol-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)