SVG इंस्टांस

स्वयं को प्रयास करें इस उदाहरण

नीचे का उदाहरण SVG कोड को सीधे HTML कोड में अंतर्निहित करता है。

Firefox, Internet Explorer 9, Google Chrome, Opera और Safari दोनों का समर्थन करते हैं。

SVG इंस्टांस

SVG बुनियादी रूपाकार

गोल
वर्गाकार रेखाचित्र
अवरोध वाला वर्गाकार रेखाचित्र
अवरोध 2 वाला वर्गाकार रेखाचित्र
गोलाकार वर्गाकार रेखाचित्र
दूरगामी
तीन दूरगामी एक-दूसरे से आधुनिक
दो दूरगामी
रेखा
तीन दायरे वाला बहुभुज
चार दायरे वाला बहुभुज
तारा
दूसरा तारा
बिंदुदृश्य
दूसरा बिंदुदृश्य
रास्ता
द्विगुणित बेल्स वृत्त
एक लिखित पद लिखें
लिखित चित्र को घुमाना
बहु-पद लिखित
लिंक के रूप में लिखित
रेखा, लिखित या सीमा का रंग (stroke) को परिभाषित करना
रेखा, लिखित या सीमा की चौड़ाई (stroke-width) को परिभाषित करना
खुले पथ के विभिन्न प्रकार के अंत (stroke-linecap) को परिभाषित करना
डॉट का परिमाप (stroke-dasharray) को परिभाषित करना

SVG फिल्टर

feGaussianBlur - धुंधली प्रभाव
feOffset - एक वर्गाकार को बढ़ाना और आरंभिक चित्र को बढ़ाने वाले चित्र के ऊपर मिश्रित करना
feOffset - धुंधली बढ़ाने वाले चित्र को बढ़ाना
feOffset - छाया को काला बनाना
feOffset - छाया को किसी रंग में रंगित करना
feBlend फिल्टर
फिल्टर 1
फिल्टर 2
फिल्टर 3
फिल्टर 4
फिल्टर 5
फिल्टर 6

SVG गेंदगति

पीले से लाल तक ऊर्ध्व रेखीय रंग उत्प्लाव वाला अगला दूरगामी
पीले से लाल तक ऊर्ध्व रेखीय रंग उत्प्लाव वाला अगला दूरगामी
पीले से लाल तक ऊर्ध्व रेखीय रंग उत्प्लाव वाला अगला दूरगामी और लिखित
सफेद से नीले तक वृत्तीय रंग उत्प्लाव वाला अगला दूरगामी
सफेद से नीले तक वृत्तीय रंग उत्प्लाव वाला अगला दूरगामी

SVG अन्य

5 सेकंड में बार-बार गायब होने वाला वर्गाकार रेखाचित्र
रंग बदलने वाला लगातार बढ़ता वर्गाकार रेखाचित्र
तीन रंग बदलने वाले वर्गाकार रेखाचित्र
घूमते हुए दीर्घवृत्त को घूमाएं टेक्स्ट
घूमते हुए दीर्घवृत्त को घूमाएं, टेक्स्ट को घूमाएं
घूमते हुए दीर्घवृत्त को घूमाएं, टेक्स्ट को घूमाएं और स्केल करें
घूमते हुए दीर्घवृत्त को घूमाएं, टेक्स्ट को घूमाएं और स्केल करें + रंग बदलने वाला लगातार बढ़ता वर्ग