HTML => एसवीजी

परिचय

एसवीजी स्केलेबल वेक्टर ग्राफिक्स के लिए खड़ा है। एसवीजी का उपयोग वेब के लिए ग्राफिक्स को परिभाषित करने के लिए किया जाता है

HTML <svg> तत्व एसवीजी ग्राफिक्स के लिए एक कंटेनर है।

एसवीजी में पथ, बॉक्स, सर्कल, पाठ और ग्राफिक चित्र खींचने के कई तरीके हैं।

टिप्पणियों

एसवीजी स्केलेबल वेक्टर चित्र बनाने के लिए एक्सएमएल-आधारित भाषा है। इसे सीधे एक HTML दस्तावेज़ में लिखा जा सकता है या बाहरी एसवीजी फ़ाइलों से एम्बेड किया जा सकता है। इनलाइन एसवीजी को क्रमशः सीएसएस और जावास्क्रिप्ट का उपयोग करके बहाल और संशोधित किया जा सकता है।

एसवीजी के लिए ब्राउज़र समर्थन भिन्न होता है, लेकिन यहां पता लगाया जा सकता है ।

अधिक व्यापक जानकारी के लिए, एसवीजी प्रलेखन देखें।

HTML में बाहरी SVG फ़ाइलों को एम्बेड करना

बाहरी SVG तत्वों को एम्बेड करने के लिए आप <img> या <object> तत्वों का उपयोग कर सकते हैं। ऊंचाई और चौड़ाई निर्धारित करना वैकल्पिक है लेकिन अत्यधिक अनुशंसित है।

छवि तत्व का उपयोग करना

<img src="attention.svg" width="50" height="50">

<img> का उपयोग करने से आप CSS का उपयोग करके SVG को स्टाइल करने या जावास्क्रिप्ट का उपयोग करके हेरफेर करने की अनुमति नहीं देते हैं।

वस्तु तत्व का उपयोग करना

<object type="image/svg+xml" data="attention.svg" width="50" height="50">

<img> विपरीत, <object> सीधे एसवीजी को दस्तावेज़ में आयात करता है और इसलिए इसे जावास्क्रिप्ट और सीएसएस का उपयोग करके हेरफेर किया जा सकता है।

इनलाइन एसवीजी

SVG को सीधे HTML डॉक्यूमेंट में लिखा जा सकता है। इनलाइन एसवीजी को सीएसएस और जावास्क्रिप्ट का उपयोग करके स्टाइल और हेरफेर किया जा सकता है।

<body>
    <svg class="attention" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
        <path id="attention" d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-5,13l0,106q0,8,5,13t12,6l108,0q7,0,12,-6t5,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-122,0q-7,0,-14,6q-5,4,-5,12l9,255q0,5,6,9t13,3l103,0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-1,70q-10,17,-26,26t-35,10l-858,0q-18,0,-35,-10t-26,-26q-21,-35,-1,-70l429,-786q9,-17,26,-27t36,-10t36,10t27,27Z" />
    </svg>
</body>

उपरोक्त इनलाइन SVG को तब संबंधित CSS वर्ग का उपयोग करके स्टाइल किया जा सकता है:

.attention {
    fill: red;
    width: 50px;
    height: 50px;
}

परिणाम इस तरह दिखता है:

CSS का उपयोग करके SVG एम्बेड करना

आप background-image संपत्ति का उपयोग करके बाहरी एसवीजी फाइलें जोड़ सकते हैं, जैसे आप किसी अन्य छवि के साथ करते हैं।

HTML:

<div class="attention"></div>

सीएसएस:

.attention {
    background-image: url(attention.svg);
    background-size: 100% 100%;
    width: 50px;
    height: 50px;
}

आप डेटा url का उपयोग करके छवि को सीधे css फ़ाइल में एम्बेड कर सकते हैं:

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201000%201000%22%20%3E%0D%0A%3Cpath%20id%3D%22attention%22%20d%3D%22m571%2C767l0%2C-106q0%2C-8%2C-5%2C-13t-12%2C-5l-108%2C0q-7%2C0%2C-12%2C5t-5%2C13l0%2C106q0%2C8%2C5%2C13t12%2C6l108%2C0q7%2C0%2C12%2C-6t5%2C-13Zm-1%2C-208l10%2C-257q0%2C-6%2C-5%2C-10q-7%2C-6%2C-14%2C-6l-122%2C0q-7%2C0%2C-14%2C6q-5%2C4%2C-5%2C12l9%2C255q0%2C5%2C6%2C9t13%2C3l103%2C0q8%2C0%2C13%2C-3t6%2C-9Zm-7%2C-522l428%2C786q20%2C35%2C-1%2C70q-10%2C17%2C-26%2C26t-35%2C10l-858%2C0q-18%2C0%2C-35%2C-10t-26%2C-26q-21%2C-35%2C-1%2C-70l429%2C-786q9%2C-17%2C26%2C-27t36%2C-10t36%2C10t27%2C27Z%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

HTML
एसवीजी

खोज…