एसवीजी आइकन पर जा रहे हैं - उन्हें कोड से अलग कैसे करें?

Question

एसवीजी आइकन फ़ॉन्ट आइकन पर कुछ फायदे हैं: वे एक चर आकार के कंटेनर तत्व फिट करने के लिए स्केल किए जा सकते हैं, और आप सैद्धांतिक रूप से व्यक्तिगत पथों का रंग बदल सकते हैं। मुझे यह तथ्य भी पसंद है कि मैं उन्हें आसानी से इनक्सस्केप में बना सकता हूं: पी

लेकिन मैं सीवीजी फ़ाइल में एसवीजी कैसे स्थानांतरित करूं ताकि उन्हें उसी पृष्ठ पर पुन: उपयोग किया जा सके, जैसे आइकन फोंट, और अभी भी इन फायदों से लाभ ?

पृष्ठभूमि संपत्ति background: url(#svg_element) के साथ एसवीजी का समर्थन करती है, लेकिन इसका मतलब है कि मुझे HTML में एसवीजी रखना है: | यदि मैं इसे "डेटा" स्ट्रिंग के रूप में रखता हूं, तो मैं उसी सीएसएस फ़ाइल में पथ रंग कैसे बदलूं?

Answer 1

गहन चर्चा के लिए, Sara Soueidan देखें जिसने एसवीजी पर बहुत काम किया है। recent article/talk she gave में आपके लिए पचाने के लिए बहुत सारी जानकारी हो सकती है।

Chris Coyer में कुछ भी उपयोगी चीजें हैं।

Answer 2

मैंने पहले एसवीजी के साथ काम किया है लेकिन एसवीजी आइकन विशेष रूप से नहीं। हालांकि मेरे पास जो ज्ञान है और उसके आसपास कुछ कर रहा है, उसके आधार पर मैं यहां आया हूं (शायद उस मामले में मैंने आपका प्रश्न पूरी तरह से नहीं समझा होगा, कृपया अधिक प्रश्न पोस्ट करें)।

लेकिन यह कैसे मैं सीएसएस फ़ाइल में एसवीजी ले जाऊं तो वे एक ही पृष्ठ

पर पुन: उपयोग किया जा सकता है लेकिन इसका मतलब है कि मैं HTML

एसवीजी है में एसवीजी डाल करने के लिए है मूल रूप से एक्सएमएल, इसलिए बिल्कुल सही नहीं है कि आप HTML फ़ाइल में एसवीजी क्यों नहीं डालना पसंद करते हैं। यदि आप HTML फ़ाइल में एसवीजी डालते हैं तो आप स्टाइल एसवीजी के लिए बाहरी या आंतरिक सीएसएस का उपयोग कर सकते हैं। ऐसा करने के लिए यहां एक sample है।

HTML फ़ाइल में:

<circle cx="100" cy="100" r="75" /> 

एक सीएसएस फ़ाइल में: (आप HTML फ़ाइल में सीएसएस फ़ाइल शामिल करें)

<style> 
circle { 
    fill: deepPink; 
    transition: fill .3s ease-out; 
} 

circle:hover { 
    fill: #009966; 
} 
</style> 

इधर, कई अन्य के लिए दूसरा विकल्प है <img/> टैग का उपयोग करें। यहां एक article है जो बताता है कि <img/> टैग का उपयोग करके एक अलग फ़ाइल से एसवीजी का उपयोग कैसे करें। और यहां code इसके साथ है। यह भी ध्यान रखें कि यह jQuery प्लगइन svginject का उपयोग करता है।

यहां कुछ अन्य options हैं जो एसवीजी को HTML और उनकी योग्यता से बाहर रखने के लिए हैं।

उम्मीद है कि इससे मदद मिलती है।

Answer 3

यदि आप पृष्ठभूमि छवि के रूप में एसवीजी का उपयोग करते हैं तो आप पथ को बदल नहीं सकते हैं और रंग भर सकते हैं (AFAIK)। हालांकि, आप मेट्रो-आईश आइकन बनाने के लिए सफेद एसवीजी और पृष्ठभूमि रंगों का उपयोग कर सकते हैं। यह ठीक है jQuery Mobile theming system करता है।

.icon { 
 
    display: inline-block; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-size: 80%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
} 
 
.icon-1 { 
 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E"); 
 
} 
 
.icon-bg-1 { 
 
    background-color: #800080; 
 
} 
 
.icon-bg-2 { 
 
    background-color: #DB7093; 
 
} 
 
.icon-bg-3 { 
 
    background-color: #CD853F; 
 
} 
 
.icon-bg-4 { 
 
    background-color: #B0E0E6; 
 
}

<span class="icon icon-1 icon-bg-1"></span> 
 
<span class="icon icon-1 icon-bg-2"></span> 
 
<span class="icon icon-1 icon-bg-3"></span> 
 
<span class="icon icon-1 icon-bg-4"></span>

एक अन्य विकल्प के लिए एक रंगीन एसवीजी का उपयोग करें और CSS3 hue-rotate filter का उपयोग एसवीजी का रंग बदलने के लिए है। यह संपत्ति अभी तक व्यापक रूप से समर्थित नहीं है।

नोट: ह्यू रोटेशन केवल "रंग" को प्रभावित करता है; काला, सफ़ेद और भूरे रंग अप्रभावित रहते हैं।

.icon { 
 
    display: inline-block; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-size: 80%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-color: #EEEEEE; 
 
} 
 
.icon-1 { 
 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FF0000%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E"); 
 
} 
 
.icon-hue-1 { 
 
    -webkit-filter: hue-rotate(0deg); 
 
    -moz-filter: hue-rotate(0deg); 
 
      filter: hue-rotate(0deg); 
 
} 
 
.icon-hue-2 { 
 
    -webkit-filter: hue-rotate(90deg); 
 
    -moz-filter: hue-rotate(90deg); 
 
    filter: hue-rotate(90deg); 
 
} 
 
.icon-hue-3 { 
 
    -webkit-filter: hue-rotate(180deg); 
 
    -moz-filter: hue-rotate(180deg); 
 
      filter: hue-rotate(180deg); 
 
} 
 
.icon-hue-4 { 
 
    -webkit-filter: hue-rotate(270deg); 
 
    -moz-filter: hue-rotate(270deg); 
 
      filter: hue-rotate(270deg); 
 
}

<span class="icon icon-1 icon-hue-1"></span> 
 
<span class="icon icon-1 icon-hue-2"></span> 
 
<span class="icon icon-1 icon-hue-3"></span> 
 
<span class="icon icon-1 icon-hue-4"></span>

Answer 4

लेकिन मैं सीएसएस फ़ाइल में एसवीजी कैसे ले जाऊं तो वे एक ही पृष्ठ पर पुन: उपयोग किया जा सकता है, आइकन फोंट की तरह, और अभी भी इन फायदों से लाभ?

svg टेम्पलेट्स

के साथ एक svg टेम्पलेट बनाने की सुविधा देता है।

खाका (एचटीएमएल)

<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide"> 
    <circle id="circle-tmp" cx="50" cy="50" r="50" /> 
</svg> 

यह एक टेम्पलेट तो हम इसे छिपाने। (लेकिन अभी भी डोम में)

.hide { display: none;} //css

उपयोग (एचटीएमएल)

<svg viewBox="0 0 100 100 class="circle-first"> 
    <use xlink:href="#circle-tmp" /> 
</svg> 

इस पृष्ठ पर कहीं भी पुन: उपयोग किया जा सकता है।

मैं उसी सीएसएस फ़ाइल में पथ रंग कैसे बदलूं?

आसान, बस इसे स्टाइल करें!

सीएसएस

.circle-first { 
    fill: #12bb34; 
} 

कार्य उदाहरण? यहां आप जा रहे हैं: Fiddle

ब्राउज़र समर्थन? नहीं 100% यकीन है कि है, लेकिन सभी बड़े ब्राउज़रों में svg समर्थन: CanIUseIt

Answer 5

ऐसा लगता है आप html कोड से svg फ़ाइल के दूर xml सामग्री रखने चाहता हूँ।

इस को पूरा करने के दो परिदृश्यों html में svg फ़ाइलें एम्बेड करने के लिए उपलब्ध हैं:

1. <object data="~/img/file.svg" type="image/svg+xml"></object> तत्व का प्रयोग, तो xmlhtml==> से अलग किया जा जाएगा परिणामस्वरूप दृश्य होगा html और xml का संयोजन जिसे css (शायद scoped एक उदाहरण के साथ स्टाइल किया जा सकता है) लक्ष्य पृष्ठ पर <style scoped="scoped"></style> )।
2. <img src="~/img/file.svg"/> तत्व का उपयोग, तो xml से html==> अलग हो जाएगा परिणामस्वरूप दृश्य होगा केवल html और css svg फ़ाइल के xml सामग्री पर प्रदर्शन नहीं कर सकते।

एक और तरीका है svg रोजगार इनलाइन तकनीक, कहते हैं उपयोग करने के लिए, <svg> टैग का उपयोग करें ताकि आप, इस लिए भी इनलाइन स्टाइलशीट का उपयोग कर सकते है लेकिन आप अलग xml करना चाहते हैं यहाँ html :)

से अधिक जानकारी के लिए सूचना: Using SVG और SVG Styling with CSS।

Answer 6

एसवीजी आइकन की नस्लों को संरक्षित करने के लिए, इस समय आपके HTML पृष्ठ में <svg> को शामिल करने का कोई विकल्प नहीं है।

Chris Coyier's article शामिल करने के लिए आम तौर पर स्वीकार किए जाने वाले सर्वोत्तम अभ्यास का वर्णन करता है। <symbols> रूप

1. स्टोर अपने एसवीजी आइकन परिभाषाएँ:

   <svg id='my-icons'> 
       <symbol id='icon-puppy'> <!-- puppy icon goes here --> </symbol> 
       <symbol id='icon-kitty'> <!-- kitty icon goes here --> </symbol> 
   </svg> 
   

2. जब आप एक आइकन का उपयोग करने की जरूरत है, संदर्भ आइकन परिभाषा:

   <svg class='icon'> 
       <use xlink:href='#icon-puppy'/> 
   </svg> 
   

ऐसा लगता है कि कुछ This article वर्णन करता है कि आप HTML गतिशील में एसवीजी फ़ाइल सहित कैसे जा सकते हैं y।

Answer 7

आप evil-icons प्रोजेक्ट में कुछ खुदाई भी कर सकते हैं। आप svg का उपयोग करने के कुछ साफ तरीके से पता लगाएंगे।

उनका सबसे अच्छा विचार है कि आप अपने सभी आइकनों को एक फ़ाइल "sprite.svg" में मर्ज करें। आपके प्रत्येक svg आइकनों को एक आईडी के साथ <symbol> टैग द्वारा संलग्न करने की आवश्यकता है। फिर जब भी आपको किसी xlink के माध्यम से आवश्यकता होती है, तो आप इसे एक्सेस करते हैं, जैसा कि अन्य उत्तरों में टिप्पणी की गई है।

पूरे sprite.svg को लोड करके आप लोड समय और साफ-सफाई में लाभ प्राप्त करेंगे।