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

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

Satori सीमित HTML और CSS से SVG बनाता है। उसका आधिकारिक चित्र मार्गदर्शन बाद के रेंडरर से PNG बनाने पर स्पष्ट आयाम और स्वयंपूर्ण चित्र डेटा सुझाता है। इसलिए इस काम के दो अलग आउटपुट हैं: संयोजित SVG कार्ड और रास्टर डिलीवरी प्रति।

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

SVG <image> दूसरे SVG को संदर्भित कर सकता है, जैसा MDN का image संदर्भ बताता है। इसलिए इमेज एलिमेंट का मतलब अपने-आप रास्टर कलाकृति नहीं है। व्यापक SVG रास्टर-चित्र जाँच सूची से कार्ड का निदान करने से पहले डेटा प्रकार और डिकोड सामग्री जाँचें।

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

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

यह शुरुआती उदाहरण Satori 0.35.0 का सामान्य SVG-output import और resvg-js 2.6.2 लेता है। खाली कार्य फ़ोल्डर में निश्चित पैकेज स्थापित करें:

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

fonts फ़ोल्डर बनाएँ और Google Fonts Abel डायरेक्टरी से Abel-Regular.ttf तथा OFL.txt डाउनलोड करें। Abel SIL Open Font License 1.1 के अंतर्गत है; उदाहरण के साथ फ़ॉन्ट वितरित करते समय साथ की सूचना और लाइसेंस रखें।

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

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 से बनाए UTF-8 SVG बाइट एन्कोड करता है। data:image/svg+xml;base64, उपसर्ग सामग्री पहचानता है। परिवहन निरूपण बदलता है, लोगो ज्यामिति नहीं।

Satori कॉल कार्ड SVG लौटाता है। अगली पंक्ति उसे अलग resvg-js PNG रेंडरर को देती है। उदाहरण में दूरस्थ चित्र URL नहीं है; रेंडर से पहले स्थानीय फ़ॉन्ट पढ़ता है। अपना दूरस्थ-fetch या deployment व्यवहार अलग जाँचें।

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

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

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

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

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

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

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

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

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

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

Satori के HTML और CSS दस्तावेज़ समर्थित उपसमूह और सीमाएँ बताते हैं। मौजूदा पेज का ब्राउज़र स्क्रीनशॉट इस लेआउट इंजन द्वारा वैसा ही पुनरुत्पादन होने का वादा नहीं है। छोटे कार्ड और सामान्य satori import से शुरू करें, फिर डिज़ाइन को वास्तव में चाहिए गुण जोड़ें।

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

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

PNG देने के बाद मास्टर, स्क्रिप्ट और फ़ॉन्ट इनपुट रखें। अलग rasterization चरण लें तो उसका आकार अलग सत्यापित करें; Sharp SVG-to-PNG उदाहरण उस रेंडरर के आयाम बताता है।

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

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

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

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

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

स्रोत

1. Satori चित्र, लेआउट और फ़ॉन्ट दस्तावेज़ — चित्र आयाम, स्वयंपूर्ण इनपुट, सामान्य SVG आउटपुट और समर्थित HTML/CSS दायरा।
2. Satori 0.35.0 रिलीज़ — मूल उदाहरण का निश्चित संस्करण।
3. SVG image एलिमेंट — SVG चित्र दूसरे SVG संदर्भित कर सकते हैं।
4. Node Buffer एन्कोडिंग API — उदाहरण का base64 एन्कोडिंग ऑपरेशन।
5. resvg-js उपयोग — अलग SVG-to-PNG रेंडर चरण।
6. Abel फ़ॉन्ट लाइसेंस — फ़ॉन्ट का स्रोत, सूचना और पुनर्वितरण लाइसेंस।

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