एनिमेटेड SVG निर्यात

3 min read

अपने एनिमेशन को वेब एम्बेडिंग और स्केलेबल ग्राफिक्स के लिए SVG फ़ाइलों के रूप में निर्यात करें।.

SVG का उपयोग कब करें

जब SVG आदर्श होते हैं:

वेबसाइटों पर एनिमेशन एम्बेड करना
अनंत स्केलेबिलिटी की आवश्यकता है
लघु फ़ाइल का आकार महत्वपूर्ण है
आपको संपादन योग्य वेक्टर आउटपुट की आवश्यकता है

SVG के रूप में निर्यात

*Export
E-Mail साइटमैप
*Export
तुरंत डाउनलोड करें

एनिमेशन समर्थन

पूरी तरह से समर्थित

एनिमेशन	SVG आउटपुट
पल्स	`<animateTransform type="scale">`
रोटेट	`<animateTransform type="rotate">`
Bounce	`<animateTransform type="translate">`
फेड	`<animate attributeName="opacity">`
Wobble	`<animateTransform type="rotate">`
स्लाइड	`<animateTransform type="translate">`
उदय	`<animateTransform type="translate">`

समर्थित नहीं

फ़ीचर	कारण
लेखक	जावास्क्रिप्ट की आवश्यकता
प्रभाव (स्पार्कल, ब्लास्ट)	फ्रेम आधारित एनिमेशन
पैटर्न रोटेशन	onFrame-based
जटिल keyframes	सीमित SMIL समर्थन

** ब्राउज़र समर्थन:* SVG एनिमेशन SMIL का उपयोग करते हैं, जो क्रोम, फ़ायरफ़ॉक्स, सफारी और एज में समर्थित है। कुछ पुराने ब्राउज़र स्थिर SVG दिखा सकते हैं।.

वेबसाइटों पर एम्बेड करना

डायरेक्ट एम्बेड

<img src="animation.svg" alt="Animated graphic">

इनलाइन SVG

अधिक नियंत्रण के लिए, SVG कोड को सीधे पेस्ट करें:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

CSS पृष्ठभूमि

.element {
  background-image: url('animation.svg');
}

निर्यात के बाद अनुकूलन

SVG फाइलें संपादन योग्य XML हैं। आप कर सकते हैं:

एक पाठ संपादक में खोलें
रंग, आकार, समय संशोधित करें
CSS स्टाइल जोड़ें
कस्टम जावास्क्रिप्ट एम्बेड करें

क्या निर्यात हो जाता है

तत्व	के रूप में निर्यात
पाठ	`<text>` तत्व
आकृति	`<path>`, `<circle>`, आदि.
पृष्ठभूमि	`<rect>`
एनिमेशन	SMIL `<animate>` टैग

फाइल साइज

SVG फाइलें आम तौर पर बहुत छोटी होती हैं:

सरल एनिमेशन: 2-10 KB
परिसर दृश्य: 20-50 KB
GIF या MP4 से बहुत छोटा

टिप्स

SVG युक्तियाँ:

वेब एम्बेड के लिए SVG का उपयोग करें जहां गुणवत्ता मायने रखती है
प्रभाव और टाइपराइटर एनिमेशन से बचें
लक्ष्य ब्राउज़र में टेस्ट
एम्बेड करने के बाद SVG को CSS के साथ स्टाइल किया जा सकता है

Unsupported एनिमेशन के लिए Fallback

यदि आपका डिज़ाइन असहाय सुविधाओं का उपयोग करता है:

एनिमेटेड संस्करण के लिए MP4 या GIF के रूप में निर्यात करें
स्थिर गिरावट के लिए PNG के रूप में निर्यात करें
प्रगतिशील वृद्धि के लिए <picture> तत्व का उपयोग करें