मार्गदर्शिका और लेख

SVG बनाम PNG: आपको कौन सा फ़ॉर्मेट चुनना चाहिए?

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

CSS के साथ SVG आइकन को एनिमेट कैसे करें

अपने इनलाइन SVG टैग में एक CSS क्लास जोड़ें और transform या stroke-dasharray कीफ़्रेम लगाएं। हमारा लाइव एडिटर बिना JavaScript के स्मूद एनिमेशन बनाता है।

Figma या ब्राउज़र में SVG आइकन कैसे एडिट करें

SVG Nexus से SVG कोड कॉपी करें और सीधे Figma या Illustrator में पेस्ट करें, या बिना किसी सॉफ्टवेयर के हमारे ब्राउज़र वेक्टर स्टूडियो में आइकन एडिट करें।

React, Next.js और Vue में SVG आइकन का उपयोग कैसे करें

किसी भी आइकन पेज पर React TSX या Vue 3 टैब चुनें और currentColor तथा Tailwind CSS सपोर्ट वाला तैयार कंपोनेंट कोड कॉपी करें।

इनलाइन SVG और इमेज टैग

होवर पर रंग बदलना और CSS एनिमेशन चाहिए तो इनलाइन SVG या कंपोनेंट इस्तेमाल करें। इमेज सर्च में दिखाना है तो चौड़ाई, ऊँचाई और वैकल्पिक टेक्स्ट वाला इमेज टैग इस्तेमाल करें।

ग्रेडिएंट और क्लिप आईडी टकराव रोकें

रंगीन सेट अक्सर paint0_linear जैसी आंतरिक आईडी दोबारा इस्तेमाल करते हैं। एक ही पेज पर दो आइकॉन एक आईडी साझा करें तो गलत ग्रेडिएंट बनता है। SVG Nexus हर आइकॉन की आंतरिक आईडी को अलग दायरा देता है।

सुलभ आइकॉन और RTL पलटाव

सजावटी आइकॉन को aria-hidden और focusable false से छिपाएँ। सिर्फ़ आइकॉन वाले बटन को साफ़ aria-label दें। दाएँ से बाएँ लिखी भाषाओं के लिए तीर को क्षैतिज रूप से पलटें।

बाहरी SVG फ़ाइलें साफ़ करें

SVG एक XML प्रारूप है, इसलिए अविश्वसनीय फ़ाइल में स्क्रिप्ट और इवेंट हैंडलर हो सकते हैं। script नोड हटाएँ और सख़्त सुरक्षा नीति तथा nosniff हेडर के साथ SVG परोसें।