SVG को PNG में कैसे बदलें (ब्राउज़र, कमांड लाइन और कोड)

SVG वेक्टर फ़ॉर्मेट है — किसी भी साइज़ पर बिल्कुल सटीक स्केल होता है। PNG रास्टर फ़ॉर्मेट है — पिक्सेल की निश्चित ग्रिड, लेकिन यही ज़्यादातर ऐप, ईमेल क्लाइंट और सोशल नेटवर्क स्वीकार करते हैं। बदलना आसान लगता है, लेकिन कुछ ज़रूरी सवाल हैं: किस रेज़ोल्यूशन पर एक्सपोर्ट करें, ट्रांसपेरेंसी कैसे हैंडल करें, और एक्सटर्नल फ़ॉन्ट का क्या करें।

ब्राउज़र में

SVG फ़ाइल कन्वर्टर में खींचें या पेस्ट करें, टारगेट चौड़ाई सेट करें, और PNG डाउनलोड करें। टूल SVG को ब्राउज़र के अपने इंजन से रेंडर करता है — वही रास्ता जो वेबपेज में SVG देखते समय होता है — फिर PNG canvas में एक्सपोर्ट करता है।

एक बार के कन्वर्शन के लिए यह सबसे तेज़ विकल्प है।

कमांड लाइन: Inkscape

ब्राउज़र के बाहर Inkscape सबसे सटीक SVG रेंडरर है — वही रेंडरिंग इंजन (cairo) उपयोग करता है और फ़िल्टर, मास्क और पाथ टेक्स्ट जैसी SVG विशेषताएं सही तरीके से हैंडल करता है।

# इंस्टॉल करें
brew install inkscape           # macOS
sudo apt install inkscape       # Ubuntu

# 96 DPI (डिफ़ॉल्ट स्क्रीन रेज़ोल्यूशन) पर PNG में बदलें
inkscape input.svg --export-filename=output.png

# निश्चित पिक्सेल चौड़ाई पर एक्सपोर्ट करें
inkscape input.svg --export-filename=output.png --export-width=512

# 2× (high-DPI / retina) पर एक्सपोर्ट करें
inkscape input.svg --export-filename=output.png --export-width=512 --export-dpi=192

# निश्चित क्षेत्र एक्सपोर्ट करें (SVG यूनिट में x:y:width:height)
inkscape input.svg --export-filename=output.png --export-area=0:0:100:100

हेडलेस सर्वर के लिए --export-type=png जोड़ें:

inkscape input.svg --export-type=png --export-filename=output.png --export-width=1024

कमांड लाइन: ImageMagick

ImageMagick का SVG समर्थन इंस्टॉलेशन के आधार पर librsvg या Inkscape पर निर्भर है। बैच प्रोसेसिंग के लिए सुविधाजनक।

# इंस्टॉल करें
brew install imagemagick        # macOS
sudo apt install imagemagick    # Ubuntu

# बेसिक कन्वर्शन
convert input.svg output.png

# निश्चित डेंसिटी पर (अधिक = बड़ा आउटपुट)
convert -density 150 input.svg output.png

# निश्चित चौड़ाई पर
convert input.svg -resize 512x output.png

# फ़ोल्डर के सभी SVG को बैच कन्वर्ट करें
for f in *.svg; do convert "$f" "${f%.svg}.png"; done

नोट: ImageMagick का बिल्ट-इन SVG रेंडरर बेसिक है और जटिल SVG (फ़िल्टर, ग्रेडिएंट, मास्क) सही नहीं रेंडर कर सकता। जटिल फ़ाइलों के लिए Inkscape का उपयोग करें:

inkscape "$f" --export-filename="${f%.svg}.png" --export-width=512

कमांड लाइन: rsvg-convert (librsvg)

rsvg-convert हल्का और तेज़ है, जटिल फ़िल्टर के बिना सरल SVG के लिए अच्छा।

# इंस्टॉल करें
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Ubuntu

# 96 DPI पर कन्वर्ट करें
rsvg-convert input.svg -o output.png

# 2× रेज़ोल्यूशन (192 DPI, retina के लिए)
rsvg-convert -d 192 -p 192 input.svg -o output.png

# निश्चित चौड़ाई पर
rsvg-convert -w 512 input.svg -o output.png

Node.js: sharp

sharp libvips का उपयोग करके SVG फ़ाइलें रास्टराइज़ कर सकता है।

npm install sharp

const sharp = require('sharp');

// SVG को 512px चौड़े PNG में बदलें
sharp('input.svg')
    .resize(512)
    .png()
    .toFile('output.png')
    .then(info => console.log(`आउटपुट: ${info.width}×${info.height}`));

कई साइज़ में बैच कन्वर्ट करें:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './icons/svg';
const outputDir = './icons/png';

fs.readdirSync(inputDir)
    .filter(f => f.endsWith('.svg'))
    .forEach(file => {
        const name = path.basename(file, '.svg');
        for (const size of [16, 32, 64, 128, 256, 512]) {
            sharp(path.join(inputDir, file))
                .resize(size)
                .png()
                .toFile(path.join(outputDir, `${name}-${size}.png`));
        }
    });

Python: cairosvg

cairosvg Inkscape जैसा ही cairo रेंडरिंग इंजन उपयोग करता है।

pip install cairosvg

import cairosvg

# डिफ़ॉल्ट रेज़ोल्यूशन पर PNG में बदलें
cairosvg.svg2png(url='input.svg', write_to='output.png')

# निश्चित चौड़ाई पर
cairosvg.svg2png(url='input.svg', write_to='output.png', output_width=512)

# स्ट्रिंग से कन्वर्ट करें
svg_content = open('input.svg').read()
cairosvg.svg2png(bytestring=svg_content.encode(), write_to='output.png', output_width=512)

रेज़ोल्यूशन गाइड

SVG रेज़ोल्यूशन-स्वतंत्र है। PNG में एक्सपोर्ट करते समय पिक्सेल साइज़ चुनना होगा:

वेबसाइट के लिए CSS डिस्प्ले साइज़ का 2× एक्सपोर्ट करें और srcset के साथ 2x से सर्व करें।

ट्रांसपेरेंसी हैंडल करना

SVG नेटिव ट्रांसपेरेंसी सपोर्ट करता है। PNG पूरा alpha channel सपोर्ट करता है। कन्वर्शन ट्रांसपेरेंसी बनाए रखता है — जब तक SVG में एक्सप्लिसिट बैकग्राउंड रेक्टेंगल न हो, PNG का बैकग्राउंड ट्रांसपेरेंट रहेगा।

सफ़ेद बैकग्राउंड चाहिए तो:

# ImageMagick: कन्वर्शन से पहले सफ़ेद पर फ्लैटन करें
convert -background white -alpha remove input.svg output.png

// sharp: सफ़ेद बैकग्राउंड से फ्लैटन करें
sharp('input.svg')
    .flatten({ background: { r: 255, g: 255, b: 255 } })
    .png()
    .toFile('output-white-bg.png');

मुख्य बातें

• एक बार के कन्वर्शन के लिए ब्राउज़र टूल सबसे तेज़ है।
• कमांड लाइन पर Inkscape जटिल SVG के लिए सबसे सटीक रेंडरिंग देता है।
• Node.js में बैच प्रोसेसिंग के लिए sharp तेज़ और ज़्यादातर SVG के लिए सही है।
• Python में बैच प्रोसेसिंग के लिए cairosvg Inkscape जैसा ही रेंडरर उपयोग करता है।
• रेटिना/high-DPI स्क्रीन के लिए CSS डिस्प्ले साइज़ का 2× एक्सपोर्ट करें।
• PNG ट्रांसपेरेंसी बनाए रखता है — सफ़ेद बैकग्राउंड तभी जोड़ें जब ज़रूरत हो।