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

# Satori SVG लोगो: ब्रांड कार्ड में कलाकृति सुरक्षित रखें

> स्पष्ट आयाम और स्वयंपूर्ण चित्र डेटा से Satori कार्ड में SVG लोगो जोड़ें। भीतर की कलाकृति जाँचें, फिर अलग PNG डिलीवरी फ़ाइल रेंडर करें।

Source: https://perfectvector.com/hi/blog/satori-svg-logo

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

Satori कार्ड में SVG लोगो रखने के लिए उसे चित्र स्रोत की तरह दें, चित्र चौड़ाई और ऊँचाई सेट करें और बनाए कार्ड के साथ मूल SVG रखें। नीचे के उदाहरण में base64 SVG, Satori आउटपुट के भीतर नेस्टेड चित्र बनता है। बाहरी कार्ड में लोगो के संपादन योग्य पाथ का नया संग्रह नहीं बनता।

Satori सीमित HTML और CSS से SVG बनाता है। उसका [आधिकारिक चित्र मार्गदर्शन](https://github.com/vercel/satori#images) बाद के रेंडरर से PNG बनाने पर स्पष्ट आयाम और स्वयंपूर्ण चित्र डेटा सुझाता है। इसलिए इस काम के दो अलग आउटपुट हैं: संयोजित SVG कार्ड और रास्टर डिलीवरी प्रति।

## अलग काम वाली तीन फ़ाइलें रखें

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

SVG `<image>` दूसरे SVG को संदर्भित कर सकता है, जैसा [MDN का image संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) बताता है। इसलिए इमेज एलिमेंट का मतलब अपने-आप रास्टर कलाकृति नहीं है। व्यापक [SVG रास्टर-चित्र जाँच सूची](https://perfectvector.com/hi/blog/svg-contains-raster-image) से कार्ड का निदान करने से पहले डेटा प्रकार और डिकोड सामग्री जाँचें।

**कार्ड के साथ मास्टर रखें**

![खोखले हीरा मास्टर और साधारण ब्रांड कार्डों में अलग आकारों पर रखी प्रतियों का वैचारिक चित्रण](https://perfectvector.com/blog/satori-svg-logo/master-and-card.webp)

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

## पूरा स्थानीय उदाहरण

यह शुरुआती उदाहरण [Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) का सामान्य SVG-output import और resvg-js 2.6.2 लेता है। खाली कार्य फ़ोल्डर में निश्चित पैकेज स्थापित करें:

```bash
npm install --save-exact satori@0.35.0 @resvg/resvg-js@2.6.2
```

`fonts` फ़ोल्डर बनाएँ और [Google Fonts Abel डायरेक्टरी](https://github.com/google/fonts/tree/main/ofl/abel) से `Abel-Regular.ttf` तथा `OFL.txt` डाउनलोड करें। Abel [SIL Open Font License 1.1](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt) के अंतर्गत है; उदाहरण के साथ फ़ॉन्ट वितरित करते समय साथ की सूचना और लाइसेंस रखें।

नीचे की सामग्री `starter.mjs` सहेजें और `node starter.mjs` चलाएँ। यह Satori को फ़ॉन्ट देता है, खोखला हीरा बनाता है और 80×80 व 160×160 कलाकृति बॉक्स वाले दो 600×320 कार्ड बनाता है। फ़ाइल URL फ़ॉन्ट और आउटपुट पथ को स्क्रिप्ट के सापेक्ष रखते हैं।

```js
import { readFile, writeFile } from 'node:fs/promises';
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';

const logo = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path d="M64 8 L120 64 L64 120 L8 64 Z M64 42 L86 64 L64 86 L42 64 Z" fill="#176b5b" fill-rule="evenodd"/></svg>`;
const src = `data:image/svg+xml;base64,${Buffer.from(logo).toString('base64')}`;
const font = await readFile(new URL('./fonts/Abel-Regular.ttf', import.meta.url));
await writeFile(new URL('./logo-master.svg', import.meta.url), logo);

for (const size of [80, 160]) {
  const svg = await satori({
    type: 'div',
    props: {
      style: { display: 'flex', width: 600, height: 320,
        backgroundColor: '#f6f2e8', color: '#152e29', fontFamily: 'Abel' },
      children: [
        { type: 'img', props: { src, width: size, height: size,
          style: { position: 'absolute', left: 24, top: 64 } } },
        { type: 'div', props: {
          style: { position: 'absolute', left: 220, top: 112, fontSize: 42 },
          children: 'CEDAR FIELD' } },
        { type: 'div', props: {
          style: { position: 'absolute', left: 220, top: 168, fontSize: 20 },
          children: 'A study in simple shapes' } },
      ],
    },
  }, {
    width: 600, height: 320,
    fonts: [{ name: 'Abel', data: font, weight: 400, style: 'normal' }],
  });
  const png = new Resvg(svg, { font: { loadSystemFonts: false } }).render().asPng();
  await writeFile(new URL(`./card-${size}.svg`, import.meta.url), svg);
  await writeFile(new URL(`./card-${size}.png`, import.meta.url), png);
}
```

`Buffer.from(logo).toString('base64')`, [Node की Buffer एन्कोडिंग API](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) से बनाए UTF-8 SVG बाइट एन्कोड करता है। `data:image/svg+xml;base64,` उपसर्ग सामग्री पहचानता है। परिवहन निरूपण बदलता है, लोगो ज्यामिति नहीं।

Satori कॉल कार्ड SVG लौटाता है। अगली पंक्ति उसे अलग [resvg-js PNG रेंडरर](https://github.com/thx/resvg-js#basic-usage) को देती है। उदाहरण में दूरस्थ चित्र URL नहीं है; रेंडर से पहले स्थानीय फ़ॉन्ट पढ़ता है। अपना दूरस्थ-fetch या deployment व्यवहार अलग जाँचें।

## दो वास्तविक कॉल ने क्या बनाया

हमने निश्चित पैकेज के साथ ठीक यही उदाहरण चलाया, दोनों आउटपुट SVG जाँचे और हर SVG व PNG ब्राउज़र में खोला। चारों कार्ड फ़ाइलें 600×320 पर लोड हुईं। बैज बॉक्स दोगुना हुआ लेकिन अक्षरों की जगह समान रही।

हर कार्ड में एक बाहरी `<image>` और दो बाहरी `<path>` एलिमेंट थे। दोनों पाथ अक्षरों के थे, हीरे की बाहरी और भीतरी रूपरेखा नहीं। चित्र का base64 डेटा डिकोड करने पर बिल्कुल मूल SVG बाइट मिले: एक पाथ, शून्य इमेज एलिमेंट और वही खोखले हीरे की परिभाषा। इस रन में कार्ड में लाइव `<text>` एलिमेंट नहीं थे।

| निरीक्षण                            | 80×80 कलाकृति बॉक्स | 160×160 कलाकृति बॉक्स |
| ----------------------------------- | ------------------- | --------------------- |
| कार्ड आयाम                          | 600×320             | 600×320               |
| बाहरी चित्र की जगह                  | x24, y64            | x24, y64              |
| एम्बेडेड SVG                        | मूल 128×128 मास्टर  | वही मास्टर बाइट       |
| ठीक ठोस टील रंग की PNG सीमा         | 68×68 पिक्सेल       | 138×138 पिक्सेल       |
| खुले भाग के केंद्र पर कार्ड पिक्सेल | क्रीम, अल्फ़ा 255   | क्रीम, अल्फ़ा 255     |

पेंट सीमा वाली पंक्तियाँ बैज के बिल्कुल ठोस टील रंग से मिलते पिक्सेल गिनती हैं। एंटीएलियास किनारे बाहर हैं। ये चित्र आयत के आयाम नहीं: मूल हीरा स्रोत निर्देशांक 8 से 120 तक है, इसलिए इन बॉक्सों में गणितीय विस्तार 70 या 140 इकाई होता। मापी ठोस-रंग सीमाएँ थोड़ी छोटी थीं।

मूल बैज का केंद्र अकेले रेंडर होने पर अल्फ़ा 0 के साथ पारदर्शी था। हर अंतिम कार्ड PNG में उस खुले भाग से अपारदर्शी क्रीम बैकग्राउंड दिखा: RGBA 246,242,232,255। दिखता खुला भाग और अंतिम कार्ड का पारदर्शी पिक्सेल अलग आवश्यकताएँ हैं। पारदर्शी डिलीवरी बैकग्राउंड चाहिए तो कार्ड बैकग्राउंड बदलकर परिणाम का अल्फ़ा अलग जाँचें।

ये एक मूल बैज के दो आकारों पर दो कॉल हैं। ये हर SVG सुविधा चलने, बार-बार दूरस्थ चित्र जॉब ठीक होने या हर गंतव्य पर समान कार्ड रेंडर होने को स्थापित नहीं करते।

## स्रोत खोए बिना कलाकृति बॉक्स बदलें

अपने लोगो के लिए `logo` स्ट्रिंग को स्वयंपूर्ण SVG से बदलें या एन्कोड करने से पहले मास्टर फ़ाइल पढ़ें। पहले `viewBox`, चौड़ाई, ऊँचाई और खुला भाग जाँचें। सीमा के भीतर अधिक खाली जगह से दिखता लोगो आवंटित कार्ड बॉक्स से छोटा हो सकता है।

चित्र के दोनों आयाम इच्छित अनुपात के रखें। हमारा स्रोत और दोनों बॉक्स वर्गाकार हैं; आउटपुट चित्र ने `preserveAspectRatio="none"` लिया, जिससे यहाँ अनुपात नहीं बदला। यह परीक्षण आयताकार लोगो को वर्गाकार स्लॉट में मजबूर करना नहीं जाँचता। एक बार में एक लेआउट चर बदलें, फिर वास्तविक SVG और डिलीवरी PNG जाँचें।

अक्षर स्वतंत्र बदलने हों तो उन्हें एम्बेडेड लोगो के बाहर रखें। इस उदाहरण का कार्ड टेक्स्ट दिए SVG में पाथ बनता है, लेकिन शब्द स्क्रिप्ट में संपादन योग्य रहते हैं। फ़ॉन्ट इनपुट, कलाकृति इनपुट और संयोजित आउटपुट के काम अलग हैं; [resvg फ़ॉन्ट गाइड](https://perfectvector.com/hi/blog/resvg-svg-fonts) अलग लाइव-SVG-टेक्स्ट रेंडरिंग प्रक्रिया बताती है।

Satori के [HTML और CSS दस्तावेज़](https://github.com/vercel/satori#html-elements) समर्थित उपसमूह और सीमाएँ बताते हैं। मौजूदा पेज का ब्राउज़र स्क्रीनशॉट इस लेआउट इंजन द्वारा वैसा ही पुनरुत्पादन होने का वादा नहीं है। छोटे कार्ड और सामान्य `satori` import से शुरू करें, फिर डिज़ाइन को वास्तव में चाहिए गुण जोड़ें।

## पिक्सेल से शुरू होने वाला लोगो तैयार करें

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

PNG देने के बाद मास्टर, स्क्रिप्ट और फ़ॉन्ट इनपुट रखें। अलग rasterization चरण लें तो उसका आकार अलग सत्यापित करें; [Sharp SVG-to-PNG उदाहरण](https://perfectvector.com/hi/blog/sharp-svg-to-png) उस रेंडरर के आयाम बताता है।

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

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

**दिखता लोगो अपनी चौड़ाई और ऊँचाई से छोटा क्यों है?**
चित्र बॉक्स में स्रोत सीमा शामिल है। हमारा हीरा 128×128 स्रोत के भीतर मार्जिन छोड़ता है और बिल्कुल समान रंग की पिक्सेल सीमा एंटीएलियास किनारे नहीं गिनती। स्रोत की खाली जगह और दिया अनुपात अलग जाँचें।

**क्या लोगो का पारदर्शी छेद कार्ड को पारदर्शी करता है?**
छेद कार्ड बैकग्राउंड दिखने देता है। हमारा क्रीम बैकग्राउंड अपारदर्शी है, इसलिए खुले भाग के PNG पिक्सेल का अल्फ़ा 255 है। डिलीवरी को चाहिए तो पारदर्शी कार्ड बैकग्राउंड अलग जाँचें।

**क्या Satori PNG लौटाता है?**
यह उदाहरण Satori से SVG स्ट्रिंग माँगता है, फिर resvg-js से PNG रेंडर करता है। चरण अलग रखें ताकि लेआउट और रास्टर डिलीवरी स्वतंत्र जाँच सकें।

## स्रोत

1. [Satori चित्र, लेआउट और फ़ॉन्ट दस्तावेज़](https://github.com/vercel/satori) — चित्र आयाम, स्वयंपूर्ण इनपुट, सामान्य SVG आउटपुट और समर्थित HTML/CSS दायरा।
2. [Satori 0.35.0 रिलीज़](https://github.com/vercel/satori/releases/tag/0.35.0) — मूल उदाहरण का निश्चित संस्करण।
3. [SVG image एलिमेंट](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — SVG चित्र दूसरे SVG संदर्भित कर सकते हैं।
4. [Node Buffer एन्कोडिंग API](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) — उदाहरण का base64 एन्कोडिंग ऑपरेशन।
5. [resvg-js उपयोग](https://github.com/thx/resvg-js) — अलग SVG-to-PNG रेंडर चरण।
6. [Abel फ़ॉन्ट लाइसेंस](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt) — फ़ॉन्ट का स्रोत, सूचना और पुनर्वितरण लाइसेंस।

***

अपने PNG या JPG लोगो के लिए [PerfectVector से SVG मास्टर तैयार करें](https://perfectvector.com/hi/vectorize-logo) और बाहरी रेखा व भीतरी खुले भाग जाँचें। मास्टर रखें, फिर इच्छित आकारों पर कार्ड SVG और दिए PNG में उसकी जगह जाँचें।

## Explore

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