Sharp से SVG को PNG: आकार, घनत्व और साफ़ एक्सपोर्ट

मौजूदा Sharp प्रक्रिया में हर एक्सपोर्ट SVG से शुरू करें और resize() में वास्तव में ज़रूरी पिक्सेल चौड़ाई दें। 2x सामग्री चाहिए तो दोगुने आउटपुट पिक्सेल माँगें। पहले छोटा PNG बनाकर उसे बड़ा न करें। पुराना density सुधार हर प्रक्रिया में कॉपी भी न करें: हमारे Sharp 0.34.4 परीक्षण ने ऊँचे इनपुट घनत्व के साथ और बिना समान पिक्सेल बनाए।

SVG से 1x और 2x PNG रेंडर करें

Sharp कंस्ट्रक्टर SVG फ़ाइल या बफ़र स्वीकार करता है और उसका resize API आउटपुट आयाम तय करता है। 256 CSS पिक्सेल पर दिखने वाले 64 इकाई वर्गाकार आइकन में 1x के लिए 256 पिक्सेल PNG और 2x के लिए 512 पिक्सेल PNG एक्सपोर्ट करें:

import sharp from "sharp";
 
const source = "icon.svg";
 
await Promise.all([
  sharp(source).resize({ width: 256 }).png().toFile("icon-1x.png"),
  sharp(source).resize({ width: 512 }).png().toFile("icon-2x.png"),
]);

ऊँचाई छोड़ने पर Sharp के सामान्य आकार परिवर्तन में स्रोत अनुपात बचता है। गंतव्य के लिए वास्तविक आउटपुट चौड़ाई चुनें; “2x” इच्छित CSS प्रदर्शन आकार के सापेक्ष पिक्सेल आयाम है, SVG एट्रिब्यूट या हर स्क्रीन का वादा नहीं। आइकन 256 CSS पिक्सेल पर दिखाना हो तो उसी प्रदर्शन आकार पर 256 और 512 पिक्सेल PNG तुलना करें और तय करें कि बड़ी फ़ाइल का लाभ उसके भार के योग्य है।

हमारे मूल परीक्षण आइकन में width="64" height="64" viewBox="0 0 64 64" था। हमने रिपॉज़िटरी के निश्चित Sharp 0.34.4 से इसे 64, 512 और 1,024 पिक्सेल रेंडर किया। 512 और 1,024 पिक्सेल आउटपुट SVG से बने, उनके कोने पारदर्शी और रंगे केंद्र अपारदर्शी थे तथा माँगे आयाम मिले। ये इस नमूने और संस्करण के अवलोकन हैं, सभी SVG कलाकृतियों का प्रदर्शन माप नहीं।

मूल Sharp 0.34.4 रेंडर परीक्षण

चित्र विफलता स्पष्ट करता है: पहला आउटपुट 64 पिक्सेल PNG बनने के बाद आगे का आकार परिवर्तन उन्हीं पिक्सेल से बीच के रंग निकालता है। उसमें फिर खींचने के लिए पाथ नहीं हैं। हमारे सीधे और घनत्व समायोजित 512 पिक्सेल परिणाम इस परीक्षण में कच्चे RGBA चैनलों पर समान थे। स्रोत SVG, रेंडर स्क्रिप्ट और परिणाम मेटाडेटा लेख के शोध पैकेट में रखे हैं।

क्या Sharp में density चाहिए?

Sharp का density कंस्ट्रक्टर विकल्प SVG या PDF इनपुट पढ़ने में इस्तेमाल DPI नियंत्रित करता है; दस्तावेज़ का डिफ़ॉल्ट 72 है। यह resize() में अंतिम चौड़ाई माँगने से अलग है। पुराने Sharp उदाहरण में धुँधले बड़े आकार से बचने को इनपुट घनत्व बढ़ाया मिल सकता है। वे वास्तविक ऐतिहासिक लक्षण बताते हैं: Sharp issue #1421 में 2018 में 32 पिक्सेल SVG को 512 करने पर पिक्सेल दिखने की रिपोर्ट है। वे मौजूदा इंस्टॉल में अब भी उपाय ज़रूरी होने का प्रमाण नहीं।

हमने Sharp 0.34.4 पर यही जोड़ा परखा:

const direct = await sharp("icon.svg")
  .resize({ width: 512 })
  .png()
  .toBuffer();
 
const densityFirst = await sharp("icon.svg", { density: 576 })
  .resize({ width: 512 })
  .png()
  .toBuffer();

हमारे 64 पिक्सेल वेक्टर आइकन में दोनों प्रक्रियाओं ने समान 512 × 512 RGBA पिक्सेल दिए। किसी विशेष फ़ाइल और इंस्टॉल Sharp संस्करण में ज़रूरत दिखे तभी इनपुट घनत्व दें, फिर अपग्रेड के बाद तुलना दोहराएँ। ऊँचे DPI अंक को हर जगह स्पष्टता का स्विच न मानें। पहली उपयोगी जाँच यह है कि अंतिम PNG रेंडर करते समय Sharp के पास वेक्टर ज्यामिति बची है या नहीं।

PDF भी इस्तेमाल करें तो वह इनपुट अलग परखें: SVG प्रयोग PDF व्यवहार नहीं सिद्ध करता। इसी तरह नए Sharp दस्तावेज़ का withDensity() आउटपुट DPI मेटाडेटा बताता है; वह कंस्ट्रक्टर के SVG इनपुट रेंडर घनत्व से अलग क्रिया है।

आयाम, पारदर्शिता और स्रोत सामग्री जाँचें

पूर्वावलोकन ज़ूम से अनुमान लगाने के बजाय आउटपुट पर Sharp मेटाडेटा API इस्तेमाल करें:

const oneX = await sharp("icon-1x.png").metadata();
const twoX = await sharp("icon-2x.png").metadata();
 
console.log({
  oneX: [oneX.width, oneX.height, oneX.hasAlpha],
  twoX: [twoX.width, twoX.height, twoX.hasAlpha],
});

यहाँ वर्गाकार नमूने के अपेक्षित आयाम 256 × 256 और 512 × 512 हैं। hasAlpha alpha चैनल बताता है, लेकिन खास कोना पारदर्शी होने का प्रमाण नहीं है; देने में पारदर्शिता ज़रूरी हो तो फ़ाइल देखें या पिक्सेल मापें। सभी परीक्षण आउटपुट में नमूने का कोना alpha शून्य और केंद्र alpha 255 था। SVG के भीतर सफ़ेद आयत होता तो PNG फ़ॉर्मैट के बावजूद हर PNG में रंगता।

नया बड़ा रेंडर भी पिक्सेल वाला हो तो SVG सामग्री देखें। SVG मानक रास्टर इमेज एम्बेड या लिंक करने वाला <image> तत्व देता है। इसलिए फ़ाइल .svg होने पर भी भीतर कलाकृति कम रिज़ॉल्यूशन PNG हो सकती है। हमारी SVG में रास्टर इमेज खोजने की मार्गदर्शिका ऑब्जेक्ट और XML देखना बताती है। Sharp आउटपुट चौड़ाई बढ़ाने से एम्बेडेड पिक्सेल पाथ नहीं बनते।

गंतव्य भी देखें। 1,024 पिक्सेल पर दिखाई 512 पिक्सेल फ़ाइल धुँधली लग सकती है। 100% से बहुत आगे ज़ूम किया व्यूअर सही एक्सपोर्ट में भी PNG ग्रिड दिखाता है। वास्तविक रेंडर आकार और बैकग्राउंड पर तुलना करें, फिर बड़ा PNG या SVG देने में चुनें। वेब वितरण में इनलाइन SVG और इमेज तत्व में SVG अलग एकीकरण विकल्प हैं; लक्ष्य SVG सँभाले तो दोनों में PNG आवश्यक नहीं।

PerfectVector कहाँ काम आता है

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

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

Sharp का SVG से PNG आउटपुट धुँधला क्यों है? देखें कि प्रक्रिया ने पहले छोटा PNG फिर बड़ा तो नहीं किया। फिर SVG में एम्बेडेड रास्टर सामग्री देखें और वितरण PNG वास्तविक प्रदर्शन आकार पर तुलना करें। मौजूदा Sharp में इनपुट घनत्व उपाय जोड़ने से पहले सीधे SVG से अंतिम आकार रेंडर परखें।

क्या आठ गुना बड़े आकार के लिए density: 576 ज़रूरी है? Sharp 0.34.4 पर हमारे 64 से 512 पिक्सेल SVG नमूने में नहीं: सीधे और घनत्व बदलकर आकार देने से समान RGBA पिक्सेल मिले। आपका SVG और इंस्टॉल रेंडरर अलग चल सकते हैं, इसलिए उस अंक को नियम मानने के बजाय सटीक इनपुट परखें।

पारदर्शी 2x PNG कैसे बनाऊँ? SVG से इच्छित CSS आयामों के दोगुने आकार पर रेंडर करें और PNG एक्सपोर्ट करें। बनी चौड़ाई और ऊँचाई की पुष्टि करें, फिर बिना रंग वाला हिस्सा पारदर्शिता के लिए देखें। पारदर्शी कैनवस SVG में पहले से मौजूद बैकग्राउंड आकृति नहीं हटाता।

स्रोत

1. Sharp — कंस्ट्रक्टर — SVG इनपुट समर्थन और इनपुट density विकल्प।
2. Sharp — इमेज का आकार बदलना — उदाहरणों का आउटपुट आकार व्यवहार।
3. Sharp — इनपुट मेटाडेटा — आयाम और alpha मेटाडेटा जाँच।
4. Sharp GitHub — SVG से PNG पिक्सेल समस्या #1421 — ऐतिहासिक रिपोर्ट लक्षण, निश्चित मौजूदा संस्करण परीक्षण से स्पष्ट अलग।
5. Sharp — आउटपुट विकल्प — नया आउटपुट घनत्व मेटाडेटा और इनपुट रेंडर घनत्व अलग करता है।
6. W3C — SVG 2 एम्बेडेड सामग्री — SVG में रास्टर पिक्सेल क्यों हो सकते हैं।

मूल केवल रास्टर हो तो PerfectVector से संभावित SVG बनाएँ, पाथ जाँचें और Sharp से अनुमोदित फ़ाइल हर ज़रूरी PNG आकार पर रेंडर करें।