एक बार जब हमारे पास एसवीजी के हमारे "डिफेक्ट्स ब्लॉक" कहे जाते हैं - एसवीजी का वह हिस्सा जो उन सभी चीजों को परिभाषित करता है जिन्हें हम बाद में आकर्षित करना चाहते हैं - हम इसे कहां डालते हैं? अब तक हम इसे सीधे HTML में डाल रहे हैं, और यह बिल्कुल काम करता है। यदि हम इसे पृष्ठ के शीर्ष पर छोड़ देते हैं, तो खोलने के टैग के बाद कहें :
एसवीजी का समर्थन करने वाले सभी ब्राउज़रों में यह बहुत अच्छा काम करेगा।
यह नीचे ले जाने के लिए आकर्षक हो सकता है। शायद आइकन पृष्ठ के लिए सुपर महत्वपूर्ण नहीं हैं, न कि वास्तविक सामग्री जो वे पृष्ठ वितरित करने के लिए हैं, इसलिए हम आइकन को पृष्ठ के निचले भाग पर ले जाते हैं, उनके लोडिंग को हटाते हुए, जैसे हम अक्सर जावास्क्रिप्ट के साथ करते हैं। हम इस वीडियो में कोशिश करते हैं, लेकिन हमारे द्वारा बाद में कोशिश की गई आइकनों को सफारी करने में समस्या है । ईमानदार होने के लिए, मैंने अन्य ब्राउज़र में असंगत व्यवहार या विभिन्न प्रकार के साथ-साथ इसे इस तरह से करते हुए देखा है, और ऐसा लगता है कि परिदृश्य इस संबंध में थोड़ा सा बदलाव कर रहा है। तो मैंने सुना है: लागू करने के लिए एक मुश्किल बात है। यदि आप अपने दस्तावेजों में दोषों को ठीक रखते हैं तो ब्लॉक को सबसे ऊपर रखना सबसे सुरक्षित है।
इस वीडियो में हम इस सभी के कुछ बुनियादी परीक्षण को देखते हैं, और फिर कुछ वास्तविक दुनिया की वेबसाइटों को देखते हैं जो इस प्रणाली का उपयोग कर रहे हैं और कैसे / जहां वे svg defs ब्लॉक सम्मिलित करते हैं।
CodePen पर Chris Coyier (@chriscoyier) द्वारा पेन 954e71cb5d5e79fb61d3c89bb3f21b8a देखें।
ध्यान दें
मुझे यह शब्द पसंद है "एसवीजी डिफेक्ट्स ब्लॉक" - बस इसलिए हम इसे कुछ ऐसा कह सकते हैं जिसका एक विशिष्ट उद्देश्य है लेकिन वास्तव में आधिकारिक नाम नहीं है। लेकिन, आपको हमेशा एक टैग का उपयोग करने की आवश्यकता नहीं है । जब आप एस का उपयोग करते हैं, तो वे वैसे भी अपने आप को प्रस्तुत नहीं करते हैं, और वास्तव में मुझे नहीं लगता कि यह होना चाहिए । मैंने सुना है एसवीजी में ग्रेडिएंट्स की परिभाषाएं समान हैं, और अगर वे अंदर हैं तो भी काम नहीं करेंगे । इसके बावजूद, यह अभी भी "एसवीजी कोड का एक ब्लॉक है जिसे हम बाद में उपयोग करने के लिए परिभाषित कर रहे हैं" तो मैं संभवतः इसे "एसवीजी डिस्क्स ब्लॉक" कहता रहूंगा।