SVG सिर्फ तस्वीर फॉर्मेट नहीं, मार्कअप है
SVG फाइल को किसी भी दूसरी इमेज की तरह मान लेना आसान है, लेकिन यह JPG या PNG से बुनियादी तौर पर अलग है: यह XML मार्कअप है जिसे ब्राउज़र समझकर रेंडर करता है, बिल्कुल HTML की तरह। इसका मतलब है कि SVG फाइल में सिर्फ शेप और पाथ ही नहीं, बल्कि `<script>` टैग और इवेंट हैंडलर भी हो सकते हैं, बिल्कुल किसी वेबपेज की तरह। ज्यादातर SVG जो आप देखेंगे वे बेकार-सी सामान्य ग्राफिक्स होते हैं, लेकिन यह फॉर्मेट तकनीकी रूप से एक्टिव कंटेंट की इजाज़त देता है, जो तब मायने रखता है जब आप किसी ऐसी जगह से फाइल खोल रहे हों जिस पर पूरा भरोसा नहीं है।
यही वजह है कि किसी अनजान SVG फाइल को सीधे खोलना, या उसका असली मार्कअप सीधे किसी लाइव पेज में पेस्ट कर देना, उतना सुरक्षित नहीं जितना लगता है — आप सिर्फ इमेज नहीं दिखा रहे, हो सकता है कोड भी चला रहे हों।
हाथ से SVG एडिट करते वक्त तुरंत प्रीव्यू की समस्या
SVG की एक और खासियत है कि यह सच में इंसानी-पढ़ने-लायक और हाथ से एडिट किया जा सकने वाला टेक्स्ट है — आप डिज़ाइन टूल खोले बिना सीधे कोड में पाथ का कोऑर्डिनेट या फिल कलर बदल सकते हैं। दिक्कत यह पक्का करने में होती है कि आपका बदलाव असल में सही दिख रहा है या नहीं: पुराना तरीका है फाइल सेव करो, ब्राउज़र या इमेज व्यूअर पर स्विच करो, देखो, वापस स्विच करो, दोहराओ — जो तुरंत मिलने वाले फीडबैक के लिए बहुत धीमा है।
लाइव प्रीव्यू पैनल इसे सीधे हल करता है: SVG मार्कअप पेस्ट करें या टाइप करें और उसे तुरंत रेंडर होते देखें, कोड के साथ-साथ, हर की-स्ट्रोक पर अपडेट होते हुए, बिना सेव-और-दोबारा-खोलने के चक्कर के।
सैंडबॉक्स्ड प्रीव्यू असल में क्या फायदा देता है
एक सही तरीके से सैंडबॉक्स्ड प्रीव्यू फ्रेम ही पिछली बात को असल में सुरक्षित बनाता है, सिर्फ सैद्धांतिक नहीं: यह आपके SVG मार्कअप का विज़ुअल आउटपुट दिखाता है जबकि किसी भी एम्बेडेड स्क्रिप्ट या इवेंट हैंडलर को चलने से खासतौर पर रोकता है। इसका मतलब है कि आप किसी अनजान सोर्स से SVG मार्कअप पेस्ट कर सकते हैं — किसी ने भेजी फाइल, किसी रैंडम साइट से कॉपी की गई चीज़ — और बिना अपने ब्राउज़र सेशन को किसी खतरे में डाले देख सकते हैं कि वह कैसी दिखती है, जो सीधे फाइल खोलने या बिना इस सुरक्षा के लाइव पेज में एम्बेड करने पर सच नहीं होता।
यह फर्क तब और मायने रखता है जब आप ज्यादा जगहों से SVG फाइलें लेते हैं — आइकन लाइब्रेरी, डिज़ाइन एक्सपोर्ट, ग्रुप चैट में शेयर की गई फाइलें — क्योंकि आपको शायद ही कभी पक्का पता हो कि कोई फाइल कैसे बनाई गई या उसके साथ छेड़छाड़ हुई या नहीं।
बिना डिज़ाइन टूल के अपना काम जांचना
सुरक्षा से अलग, लाइव प्रीव्यू सिर्फ यह जांचने के लिए भी बहुत उपयोगी है कि आपका हाथ से लिखा या एडिट किया SVG विज़ुअल रूप से सही बन रहा है या नहीं — यह पक्का करना कि viewBox सही सेट है, कोई पाथ वहीं बंद होता है जहाँ आप चाहते हैं, या कोई ग्रेडिएंट डेफिनिशन उसे इस्तेमाल करने वाले शेप द्वारा सही तरीके से रेफर की जा रही है। छोटी SVG गलतियाँ (कोई मिसिंग क्लोजिंग टैग, गलत टाइप हुआ एट्रिब्यूट) सिर्फ कोड पढ़ने पर अक्सर दिखाई नहीं देतीं, लेकिन रेंडर होते ही तुरंत साफ दिख जाती हैं।