SVG व्यूअर

SVG इनपुट
0 अक्षर
लोकल प्रीव्यू, अविश्वसनीय स्रोत से स्क्रिप्ट सामग्री पेस्ट न करें

ऑनलाइन SVG व्यूअर। SVG कोड पेस्ट करें और वेक्टर छवि को तुरंत वास्तविक समय में रेंडर करके देखें। कॉपी और .svg फ़ाइल डाउनलोड का समर्थन करता है। स्थानीय प्रसंस्करण — सुरक्षित रूप से उपयोग करें।

संबंधित सुझाव

इमेज कन्वर्ट

छवि संपीड़न

छवि आकार बदलें

इमेज क्रॉप

इमेज एडिटर

ICO जनरेटर

SVG क्या है?

SVG (Scalable Vector Graphics, स्केलेबल वेक्टर ग्राफिक्स) XML का उपयोग करके ज्यामितीय आकृतियों का वर्णन करने वाला एक छवि प्रारूप है। JPG और PNG के विपरीत जो बिटमैप (पिक्सेल मैट्रिक्स) हैं, SVG आकृतियों के गणितीय पथों का वर्णन करने के लिए <rect>, <circle>, <path> जैसे टैग का उपयोग करता है, इसलिए छवि किसी भी आकार में स्केल करने पर धुंधली नहीं होती।

**SVG किन परिदृश्यों के लिए उपयुक्त है?** लोगो, UI आइकन, फ़्लोचार्ट, मानचित्र मार्कर, चार्ट, एनीमेशन सजावट, पुन: प्रयोज्य चित्र — इन परिदृश्यों में स्पष्टता, रंग बदलने की क्षमता, स्केलेबिलिटी और CSS के माध्यम से नियंत्रण की उच्च मांग होती है, इसलिए SVG स्वाभाविक विकल्प है।

**Canvas से अंतर:** Canvas एक आज्ञाकारी ड्राइंग API है, ड्राइंग के बाद सब कुछ पिक्सेल बन जाता है; SVG घोषणात्मक DOM नोड हैं, जिनकी विशेषताएँ और CSS शैलियाँ किसी भी समय बदली जा सकती हैं और ईवेंट बाइंड किए जा सकते हैं। इसलिए आइकन, UI और इंटरैक्टिव परिदृश्यों के लिए SVG का उपयोग करें, गेम, कण और पिक्सेल कला के लिए Canvas का उपयोग करें।

**विशिष्ट संरचना:** &lt;svg&gt; रूट नोड, &lt;g&gt; समूहन, &lt;path&gt; पथ (सबसे अधिक उपयोग किया जाता है, d विशेषता रखता है), ग्रेडिएंट (&lt;linearGradient&gt;/&lt;radialGradient&gt;), फ़िल्टर (&lt;filter&gt;), एनीमेशन (SMIL/CSS/JS)।

**कैसे देखें?** इस टूल से SVG स्रोत कोड को संपादक में पेस्ट करें — दाईं ओर वास्तविक समय में रेंडर होगा। खींचने योग्य विभाजक के साथ, आप कुछ ही सेकंड में SVG कोड की शुद्धता और प्रदर्शन प्रभाव की अपेक्षाओं के अनुरूपता की जाँच कर सकते हैं।

उपयोग के मामले

  • जब फ्रंटएंड डेवलपर्स को SVG आइकन कोड के रेंडर परिणाम को तुरंत देखने की आवश्यकता हो
  • Figma, Sketch और अन्य डिज़ाइन टूल से कॉपी किए गए SVG के प्रदर्शन प्रभाव को सत्यापित करने के लिए
  • SVG पथ, रंग या viewBox विशेषता को डीबग करते समय परिवर्तनों को वास्तविक समय में देखने के लिए
  • प्रोजेक्ट कोड में एकीकृत करने से पहले SVG कोड की जाँच और सत्यापन के लिए

उपयोग कैसे करें

  1. SVG स्रोत कोड को बाईं संपादक में पेस्ट करें या प्रदर्शन देखने के लिए «उदाहरण लोड करें» पर क्लिक करें
  2. दाईं ओर वेक्टर छवि का रेंडर परिणाम तुरंत प्रदर्शित होगा, कोड संपादित करते समय पूर्वावलोकन वास्तविक समय में अपडेट होता है
  3. जाँच के बाद कोड कॉपी करने के लिए कॉपी बटन पर क्लिक करें या अनुकूलित नाम के साथ .svg फ़ाइल के रूप में डाउनलोड करें

विशेषताएं

  • वास्तविक समय पूर्वावलोकन: SVG कोड पेस्ट करें या संपादित करें — वेक्टर छवि तुरंत रेंडर होती है, WYSIWYG
  • विभाजित लेआउट: डेस्कटॉप पर पैनल की चौड़ाई समायोजित करने के लिए खींचें, मोबाइल पर टैब के माध्यम से इनपुट और पूर्वावलोकन के बीच स्विच करें
  • एक क्लिक निर्यात: SVG स्रोत कोड को क्लिपबोर्ड पर कॉपी करें या अनुकूलित नाम के साथ मानक .svg फ़ाइल के रूप में डाउनलोड करें
  • स्थानीय प्रसंस्करण: SVG का सभी पार्सिंग और रेंडरिंग ब्राउज़र में होता है, कोड सर्वर पर अपलोड नहीं होता — अधिक सुरक्षित
  • पारदर्शी पृष्ठभूमि: चेकरबोर्ड पृष्ठभूमि SVG के पारदर्शी क्षेत्रों और किनारे के विवरण को स्पष्ट रूप से देखने में मदद करती है
  • वर्ण काउंटर: कोड में वर्णों की संख्या वास्तविक समय में प्रदर्शित करता है, जल्दी शुरू करने के लिए अंतर्निहित उदाहरण

सामान्य प्रश्न

SVG कोड के प्रभाव को ऑनलाइन कैसे देखें?

SVG स्रोत कोड को बाईं संपादक में पेस्ट करें, दाईं ओर वेक्टर छवि तुरंत रेंडर हो जाएगी। आप संपादक में सीधे कोड संपादित कर सकते हैं, पूर्वावलोकन क्षेत्र वास्तविक समय में अपडेट होता है — आइकन डीबगिंग और प्रभाव सत्यापन के लिए सुविधाजनक है।

पूर्वावलोकन किए गए SVG को कैसे डाउनलोड और सहेजें?

पूर्वावलोकन क्षेत्र के ऊपरी दाएं कोने में डाउनलोड बटन पर क्लिक करें, फ़ाइल का नाम निर्दिष्ट करें और मानक .svg फ़ाइल के रूप में सहेजें। आप कॉपी बटन पर क्लिक करके SVG स्रोत कोड को क्लिपबोर्ड पर कॉपी करके सीधे प्रोजेक्ट कोड में पेस्ट भी कर सकते हैं।

क्या SVG कोड सर्वर पर अपलोड होता है? क्या यह सुरक्षित है?

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

क्या डिज़ाइन सॉफ़्टवेयर से कॉपी किए गए SVG कोड का समर्थन करता है?

हाँ। Figma, Sketch, Adobe Illustrator और अन्य डिज़ाइन सॉफ़्टवेयर से कॉपी किए गए SVG कोड को सीधे पेस्ट करके पूर्वावलोकन किया जा सकता है। रेंडर परिणाम की पहले जाँच करने की सिफारिश की जाती है, फिर कोई समस्या न होने पर प्रोजेक्ट में एकीकृत करें।

SVG पूर्वावलोकन क्यों नहीं दिख रहा है? सामान्य कारण?

सामान्य कारण: ① xmlns="http://www.w3.org/2000/svg" नेमस्पेस घोषणा की कमी; ② कोड में बंद न किए गए टैग; ③ विशेष वर्णों को सही ढंग से एस्केप नहीं किया गया; ④ SVG में ही सिंटैक्स त्रुटियाँ। कृपया इन बिंदुओं की जाँच करें।

क्या डाउनलोड की जाने वाली SVG फ़ाइल का नाम अनुकूलित कर सकते हैं?

हाँ। डाउनलोड बटन पर क्लिक करने के बाद फ़ाइल नाम इनपुट बॉक्स दिखाई देगा, वांछित नाम दर्ज करें (डिफ़ॉल्ट image.svg), Enter दबाएं या पुष्टि करें — फ़ाइल डाउनलोड हो जाएगी। टूल स्वचालित रूप से .svg एक्सटेंशन जोड़ देगा।

शब्दकोश

viewBox
SVG की आंतरिक समन्वय प्रणाली, «x y width height» प्रारूप में निर्दिष्ट की जाती है। सामान्य «0 0 24 24» का अर्थ है कि चौड़ाई और ऊंचाई 24 इकाई है। SVG का वास्तविक प्रदर्शन आकार width/height विशेषताओं या बाहरी CSS द्वारा नियंत्रित होता है।
XML नेमस्पेस (namespace)
ब्राउज़र को SVG को SVG दस्तावेज़ के रूप में सही ढंग से पहचानने के लिए xmlns="http://www.w3.org/2000/svg" घोषित करना आवश्यक है। नेमस्पेस की कमी HTML में SVG प्रदर्शित न होने का सबसे सामान्य कारण है।MDN - SVG नेमस्पेस
path d विशेषता
M/L/C/Q/H/V/Z जैसे अक्षरों और निर्देशांकों से युक्त पथ कमांड का सेट। M=चलना, L=रेखा खींचना, C=घन बेज़ियर वक्र, Q=द्विघात बेज़ियर वक्र, Z=पथ बंद करना। जटिल आइकन अक्सर केवल एक path तत्व और उसकी d विशेषता से व्यक्त किए जाते हैं।
currentColor
CSS कीवर्ड जो वर्तमान तत्व की color संपत्ति को संदर्भित करता है। यदि SVG में आप fill या stroke को currentColor के रूप में सेट करते हैं, तो बाहरी CSS में color परिवर्तन से आइकन का रंग बदल जाएगा — यह डिज़ाइन सिस्टम में एक सामान्य अभ्यास है।

SVG सामान्य तत्व त्वरित संदर्भ

तत्वप्रकारउद्देश्य
<svg>रूट नोडसभी SVG का कंटेनर, आवश्यक
<rect>मूल आकारआयत, गोल कोने वाला आयत
<circle> / <ellipse>मूल आकारवृत्त / दीर्घवृत्त
<line> / <polyline>मूल आकारसीधी रेखा / टूटी हुई रेखा
<polygon> / <path>पथबहुभुज / स्वैच्छिक वक्र (d विशेषता)
<text> / <tspan>पाठSVG एम्बेडेड पाठ
<g>समूहननोड्स को समूहीकृत करके समान रूपांतरण लागू करना
<defs> / <symbol>परिभाषाएँपुन: प्रयोज्य आकार और ग्रेडिएंट
<linearGradient> / <radialGradient>ग्रेडिएंटरैखिक / रेडियल ग्रेडिएंट भरण
<use>पुन: उपयोगdefs के तत्व का संदर्भ लें
<filter>फ़िल्टरधुंधलापन, छाया और अन्य उन्नत प्रभाव

SVG और बिटमैप प्रारूपों की तुलना

पैरामीटरSVG (वेक्टर)PNG (बिटमैप)JPG (बिटमैप)
प्रतिनिधित्व का तरीकाXML ज्यामितीय पथों का वर्णन करता हैपिक्सेल मैट्रिक्सपिक्सेल मैट्रिक्स (DCT संपीड़न)
बड़ा करने पर प्रभावकिसी भी पैमाने पर धुंधला नहीं होताबड़ा करने पर धुंधला हो जाता हैधुंधला हो जाता है, संपीड़न के निशान स्पष्ट दिखाई देते हैं
फ़ाइल का आकारपथ की जटिलता पर निर्भर करता है, लोगो आमतौर पर < 10KBमध्यम (हानिरहित)छोटा (हानिकारक)
पारदर्शी पृष्ठभूमि✅✅❌
एनीमेशन समर्थन✅ SMIL / CSS / JS❌ (APNG की आवश्यकता है)❌
CSS से रंग बदलना✅ currentColor / fill चर❌❌
उपयुक्त उपयोगआइकन, लोगो, UI वेक्टरपारदर्शी पृष्ठभूमि सामग्री, स्क्रीनशॉटतस्वीरें, बड़े ग्रेडिएंट

Authoritative References