फ़ॉन्ट से SVG निकालना बहुत बढ़िया

Question

मैं फ़ॉन्ट विस्मयकारी ग्लिफ़ से एसवीजी पथ डेटा प्राप्त करना चाहता हूं ताकि मैं अपने HTML में सीधे एसवीजी के रूप में उनका उपयोग कर सकूं। मैंने सोचा था कि यह फॉन्टव्यूबल-वेबफोंट.एसवीजी से पथ डेटा को कॉपी-पेस्ट करना जितना आसान होगा , लेकिन जब मैं अपने एचटीएमएल में इसका उपयोग करता हूं तो प्रतीक सभी उल्टा-पुल्टा कर रहे हैं। किसी को पता है क्यों?

( फिडल देखें )

फ़ॉन्ट विस्मयकारी SVG:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... HTML SVG में पोर्ट किया गया (और नीचे स्केल किया गया):

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

Answer 1

एसवीजी विनिर्देश के अनुसार सभी ...

एसवीजी में मानक ग्राफिक्स के विपरीत, जहां प्रारंभिक समन्वय प्रणाली में नीचे की ओर इशारा करते हुए वाई-अक्ष है, एसवीजी फोंट के लिए डिज़ाइन ग्रिड, ग्लिफ़ के लिए प्रारंभिक समन्वय प्रणाली के साथ, वाई-अक्ष है, जो स्वीकार्य उद्योग अभ्यास के लिए स्थिरता के लिए ऊपर की ओर इशारा करता है। कई लोकप्रिय फ़ॉन्ट प्रारूप।

इस टिप्पणी के अनुसार , रैपर को बदलने के <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>लिए ट्रिक लगती है, जहां 1792 इकाइयां-प्रति-एमएम और 1536 फॉन्ट-फेस एलिमेंट पर चढ़ाई है

Comments

इस जवाब की पूर्णता, आवरण को बदलने के लिए करने के लिए <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>चाल है, जहां कर रहा है 1792है units-per-emऔर 1536है ascentपर font-faceतत्व।

— 20

पुन 1792 is the units-per-em: टाइपो? मुझे लगता है 179.2कि ऊंचाई / चौड़ाई का मिलान करना होगा ।

— नैट कुक

Answer 2

बस इस github रेपो से तैयार svg आइकन प्राप्त करें
वे पहले से ही फ़्लिप किए गए हैं और आवश्यकतानुसार केंद्रित हैं

किसी भी फाइल को दबाएं और फिर "रॉ"

Comments

मैंने पाया कि इनमें से बहुत सारे आइकन थे जो पक्षों पर

— काटे

Answer 3

IcoMoon ऐप इस मृत को सरल बनाता है।

Comments

Yea IcoMoon कमाल है

— यारिन

IcoMoon का उपयोग करना बहुत आसान है, लेकिन मैंने पाया है कि यह इस GitHub रेपो में SVG की तुलना में लंबे समय तक पथ निर्यात करता है । पिता-उपहार आइकन की तुलना करने के लिए प्रयास करें। path837 IcoMoon के माध्यम से अक्षर, बनाम है रेपो में 514 ।

— डैन डस्केल्सस्कु

अच्छा लगता है दान, इस चेतावनी के बारे में कोई पता नहीं था। फिर भी, मुझे IcoMoon पसंद है।

— SISYN

Answer 4

Fontforge स्क्रिप्ट का उपयोग करें। एक स्क्रिप्ट है जो मुझे यहाँ ऑनलाइन मिली है :

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf 

देखें: http://fontforge.sourceforge.net/scripting.html

Answer 5

एक नोड.जेएस टूल भी है जो आपके लिए इसे स्वचालित करेगा, और पहले और बाद में बनाएगा verify.html। https://github.com/eugene1g/font-blast

मैंने इसे अन्य फोंट पर इस्तेमाल किया है, अब तक केवल 1 खराब आइकन रूपांतरण, लेकिन फ़ॉन्ट एसवीजी में बाकी ठीक था।

Comments

मैं यह कोशिश करने जा रहा हूँ

— जॉन खतरनाक

फॉन्ट-ब्लास्ट सुपर क्विक एंड

— 00-BBB

Answer 6

आप बस faयहाँ का नवीनतम संस्करण डाउनलोड कर सकते हैं: https://fontawesome.com/

और फिर advanced-options/raw-svgफ़ोल्डर में जाएं। वहां आपको तीन फ़ोल्डर मिलेंगे brands, regularऔर solidसभी नवीनतम आइकन उपलब्ध होंगे।

Answer 7

आप उन्हें यहाँ से flaticon.com डाउनलोड कर सकते हैं:

http://www.flaticon.com/packs/font-awesome

Comments

मददगार हो सकता है, लेकिन जब आप 512x512 से 20x20 तक एक पथ का आकार बदलना चाहते हैं, तो इसके लिए बहुत बड़े पैमाने पर डाउन-बटन की आवश्यकता होती है

— निकोललैस

Answer 8

आप बस किसी भी फ़ॉन्ट-विस्मयकारी svg को आप Github में उनके रेपो से डाउनलोड कर सकते हैं

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs