बाहरी फ़ाइलों के बिना svg में FontAwesome आइकन का उपयोग करें

Question

मुझे एक एसवीजी (PHP और/या जावास्क्रिप्ट के साथ) बनाने की आवश्यकता है, जहां कुछ एसवीजी तत्व FontAwesome से आइकन हैं, लेकिन: बाहरी निर्भरताओं के बिना (जैसे: एक सीएसएस फ़ाइल आयात करना आदि) ।)।

मुझे this स्टैक ओवरफ्लो प्रश्न मिला, जो एक समान विषय है, लेकिन मेरी समस्या ठीक नहीं है, क्योंकि बाहरी निर्भरताएं हैं, जैसे वेबपृष्ठ पर FontAwesome (CSS फ़ाइलें) जोड़ना, जहां svg दिखाया गया है।

अलग-अलग है, मुझे एक ऑल-इन-वन एसवीजी की आवश्यकता है, जहां सभी आवश्यक FontAwesome परिभाषा svg का हिस्सा हैं, क्योंकि उपयोगकर्ता को svg के साथ काम करना जारी रखने के लिए जेनरेट किए गए एसवीजी को डाउनलोड करने में सक्षम होना चाहिए दर्शक या संपादक।

क्या एक तरीका है (उदाहरण के लिए) एक "फ़ॉन्ट विस्मयकारी" आइकन एक svg में परिभाषित करने के लिए?

मुझे this (शायद) एसवीजी सूचनाओं की सूची मिली। तो ऐसा लगता है, आइकन पथ एसवीजी कोड के रूप में उपलब्ध हैं। तो मैं इसे svg में किस का उपयोग कर सकता हूं?

---

// अद्यतन: मैं निम्न उदाहरण पाया है, लेकिन मैं नहीं जानता कि, कैसे FontAwesome परिभाषा शामिल करने के लिए और कैसे :-(

<?xml version="1.0" standalone="yes"?> 
<svg width="100%" height="100%" version="1.1" 
xmlns = 'http://www.w3.org/2000/svg'> 
    <defs> 
    <font id="Font2" horiz-adv-x="1000"> 
     <font-face font-family="Super Sans" font-weight="normal" font-style="italic" 
      units-per-em="1000" cap-height="600" x-height="400" 
      ascent="700" descent="300" 
      alphabetic="0" mathematical="350" ideographic="400" hanging="500"> 
     <font-face-src> 
      <font-face-name name="Super Sans Italic"/> 
     </font-face-src> 
     </font-face> 
     <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> 
     <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> 
     <glyph unicode="@"><!-- Outline of @ glyph --></glyph> 
     <!-- more glyphs --> 
    </font> 
    </defs> 
</svg> 

Answer 1

एक आइकन एक्सेस करने का आपका उदाहरण एक है ।

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200"> 
    <defs> 
     <style type="text/css"> 
     @font-face { 
      font-family: 'FontAwesome'; 
      src: url(data:font/opentype;base64,[...]) format('opentype'); 
     } 
     </style> 
    </defs> 
    <rect x="0" y="0" height="100" width="500" fill="#eee" /> 
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32"> 
     &#xf007 
    </text> 
    </svg> 

बदलें: एसवीजी फ़ॉन्ट और यह IE या Firefox पर काम नहीं करता है आप एक डेटा यूआरआई और एक @font-face के रूप में एम्बेड के रूप में FontAwesome एन्कोड करने के लिए यदि आप इसे हर जगह काम करना चाहता हूँ की जरूरत है फ़ॉन्ट के बेस 64 एन्कोडेड संस्करण के साथ। आप एक .ttf या an .otf फ़ाइल को बेस 64 सेवा या कमांड लाइन openssl base64 -in <infile> -out <outfile> पर अपलोड कर सकते हैं।

यदि आप FontAwesome की लाइब्रेरी को सब्सक्राइब करना चाहते हैं तो आप icomoon http://icomoon.io/app/#library पर जा सकते हैं और FontAwesome लाइब्रेरी जोड़ सकते हैं। फिर आपको आवश्यक आइकनों का चयन करें, ज़िप डाउनलोड करें, फिर tt12 एन्कोडिंग सेवा जैसे tt12 एन्कोडिंग सेवा को इस http://www.opinionatedgeek.com/dotnet/tools/base64encode/ पर अपलोड करें और परिणामस्वरूप स्ट्रिंग को अपने src: फ़ॉन्ट-फेस घोषणा में पेस्ट करें।