Oh MyUtils

SVG से PNG कनवर्टर - SVG को PNG/JPEG में बदलें ऑनलाइन

SVG फाइलों या कोड को उच्च-गुणवत्ता PNG/JPEG छवियों में अनुकूलन योग्य आयाम, स्केल और पृष्ठभूमि के साथ बदलें। 100% क्लाइंट-साइड, अपलोड आवश्यक नहीं।

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

SVG से PNG कनवर्टर क्या है और मुझे इसकी आवश्यकता क्यों होगी?

SVG से PNG कनवर्टर SVG (Scalable Vector Graphics) फ़ाइलों को — जो XML-आधारित वेक्टर इमेज हैं — पिक्सेल से बनी PNG (Portable Network Graphics) रास्टर इमेज में बदलता है। जबकि SVG अपनी स्केलेबिलिटी और छोटे फ़ाइल आकार के कारण वेब उपयोग के लिए आदर्श है, कई प्लेटफ़ॉर्म और एप्लिकेशन को रास्टर इमेज की आवश्यकता होती है।

मैं इस SVG से PNG कनवर्टर का उपयोग कैसे करूँ?

SVG इनपुट प्रदान करने के दो तरीके हैं: (1) अपलोड क्षेत्र पर SVG फ़ाइल ड्रैग और ड्रॉप करें, या अपनी फ़ाइलें ब्राउज़ करने के लिए क्लिक करें। (2) टेक्स्ट क्षेत्र में सीधे SVG कोड पेस्ट करें। एक बार SVG लोड होने पर, टूल स्वचालित रूप से इसके आयामों का पता लगाता है और पूर्वावलोकन दिखाता है। सेटिंग्स पैनल का उपयोग करके आउटपुट कॉन्फ़िगर करें।

क्या मेरा SVG डेटा सुरक्षित है? क्या फ़ाइलें सर्वर पर अपलोड होती हैं?

आपका SVG डेटा 100% सुरक्षित है और कभी आपका ब्राउज़र नहीं छोड़ता। सभी रूपांतरण आपके ब्राउज़र में निर्मित HTML5 Canvas API का उपयोग करके क्लाइंट-साइड पर किए जाते हैं। कोई SVG डेटा किसी सर्वर पर प्रेषित नहीं होता, कोई फ़ाइलें कहीं संग्रहीत नहीं होतीं, और कोई ट्रैकिंग नहीं होती।

PNG और JPEG आउटपुट में क्या अंतर है?

PNG पूर्ण पारदर्शिता (अल्फा चैनल), लॉसलेस कम्प्रेशन का समर्थन करता है और आइकन, लोगो, UI तत्वों के लिए आदर्श है। JPEG छोटे फ़ाइल आकार प्राप्त करने के लिए लॉसी कम्प्रेशन का उपयोग करता है लेकिन पारदर्शिता का समर्थन नहीं करता। जब आपको पारदर्शिता चाहिए तो PNG का उपयोग करें। जब छोटे फ़ाइल आकार चाहिए तो JPEG का उपयोग करें।

स्केल फैक्टर (1x, 2x, 3x, 4x) का क्या मतलब है?

स्केल फैक्टर SVG के आंतरिक आयामों को गुणा करके आउटपुट पिक्सेल आयाम उत्पन्न करते हैं। उदाहरण के लिए, यदि आपके SVG का viewBox '0 0 24 24' है: 1x 24x24 PNG उत्पन्न करता है, 2x 48x48 PNG, 3x 72x72 PNG, और 4x 96x96 PNG उत्पन्न करता है।

क्या मैं पारदर्शी पृष्ठभूमि के साथ SVG को रूपांतरित कर सकता हूँ?

हाँ। PNG प्रारूप पारदर्शिता (अल्फा चैनल) का पूर्ण समर्थन करता है। जब आप पृष्ठभूमि रंग के रूप में पारदर्शी (डिफ़ॉल्ट) चुनते हैं, तो SVG में सभी पारदर्शी क्षेत्र PNG आउटपुट में संरक्षित रहते हैं। JPEG प्रारूप पारदर्शिता का समर्थन नहीं करता।

मेरा रूपांतरित PNG धुंधला या पिक्सेलेटेड क्यों दिखता है?

यदि आउटपुट धुंधला दिखता है, तो आउटपुट आयाम SVG के विवरण स्तर के लिए बहुत छोटे हो सकते हैं। स्केल फैक्टर को 2x या 3x तक बढ़ाने का प्रयास करें, या मैन्युअल रूप से बड़े कस्टम आयाम दर्ज करें।

अधिकतम आयाम और फ़ाइल आकार सीमाएँ क्या हैं?

अधिकतम SVG इनपुट फ़ाइल आकार 10MB है। अधिकतम आउटपुट आयाम 8192x8192 पिक्सेल हैं, जो अधिकांश ब्राउज़रों के Canvas कार्यान्वयन द्वारा लगाई गई व्यावहारिक सीमा है।

कोड उदाहरण

// SVG to PNG conversion using Canvas API (Browser)
function svgToPng(svgString, options = {}) {
  const {
    width = null,
    height = null,
    scale = 1,
    backgroundColor = null,
    format = 'png',
    quality = 0.92,
  } = options;

  return new Promise((resolve, reject) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgString, 'image/svg+xml');
    const svg = doc.documentElement;

    let svgWidth = parseFloat(svg.getAttribute('width')) || 0;
    let svgHeight = parseFloat(svg.getAttribute('height')) || 0;

    if (!svgWidth || !svgHeight) {
      const viewBox = svg.getAttribute('viewBox');
      if (viewBox) {
        const [, , vbW, vbH] = viewBox.split(/[\s,]+/).map(Number);
        svgWidth = vbW;
        svgHeight = vbH;
      }
    }

    const outWidth = width || svgWidth * scale;
    const outHeight = height || svgHeight * scale;
    const canvas = document.createElement('canvas');
    canvas.width = outWidth;
    canvas.height = outHeight;
    const ctx = canvas.getContext('2d');

    if (backgroundColor) {
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, outWidth, outHeight);
    }

    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const img = new Image();

    img.onload = () => {
      ctx.drawImage(img, 0, 0, outWidth, outHeight);
      URL.revokeObjectURL(url);
      canvas.toBlob(
        (resultBlob) => {
          resolve({
            blob: resultBlob,
            dataUrl: canvas.toDataURL(
              format === 'jpeg' ? 'image/jpeg' : 'image/png', quality
            ),
            width: outWidth,
            height: outHeight,
            size: resultBlob.size,
          });
        },
        format === 'jpeg' ? 'image/jpeg' : 'image/png',
        quality
      );
    };
    img.onerror = () => reject(new Error('Failed to load SVG'));
    img.src = url;
  });
}

// Usage
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#3b82f6"/></svg>';
svgToPng(svg, { scale: 2 }).then(r => console.log(`${r.width}x${r.height}, ${r.size} bytes`));

संबंधित उपकरण