आइकन फ़ॉन्ट के लिए स्केच से निर्यात करना


9

मैं फॉन्टेलो में आयात करने के लिए स्केच से एसवीजी आइकनों को निर्यात करने की कोशिश कर रहा हूं, हालांकि एसवीजी ऐप के लिए सही नहीं दिखते हैं (वे भी IcoMoon में काम नहीं करते हैं)।

जिस आइकन को मैं एक परीक्षण के रूप में बनाने की कोशिश कर रहा हूं, वह एक साधारण 'हैमबर्गर' शैली का आइकन है, जो सिर्फ कुछ पंक्तियों का है, लेकिन वे सही तरीके से काम नहीं करेंगे। इसे कम से कम कहना निराशाजनक है।

क्या किसी को इसके साथ कोई अनुभव है और वह अपने ज्ञान के साथ भाग ले सकता है? धन्यवाद।


क्या आप अपनी svg फ़ाइल को वेब पर कहीं रख सकते हैं और उससे लिंक कर सकते हैं? वास्तव में इकोमून की समस्या क्या है? मैंने पाया है कि अगर मैं अपनी आकृतियों को नंगे न्यूनतम रास्तों में नहीं मिलाता, तो यह आइकॉमन अजीब चीजें करेगा।
चॉवि

आइकोमून पर वास्तव में क्या समस्या है?
चॉवी

मुझे यह समझ में आया, मैं एसवीजी पर सीमाओं का उपयोग कर रहा था और मुझे महसूस नहीं हुआ कि आइकन-फोंट ने उन्हें अनदेखा किया।
एलेक्स मैककेबे

मैं एक समान (शायद एक ही) समस्या हो रही है। Fontello में निर्यात की गई SVG फ़ाइल को खींचने से कुछ नहीं होता है। मैं नहीं बता सकता कि क्या यह Fontello के साथ एक बग है, या फ़ाइल किसी कारण से मान्यता प्राप्त नहीं है।
इलियोट्रेगन

मैं Icomoon का उपयोग करने के लिए चला गया। यह .svg फ़ाइलों को बेहतर पढ़ने के लिए लगता है। मुझे यह भी पता है कि यदि आप सीमाओं का उपयोग करते हैं तो यह पूरी चीज को फेंक देगा।
एलेक्स मैककेबे

जवाबों:


11

मुझे पता चला कि आइकोमून सही आयात के लिए स्केच से एसवीजी का निर्यात कैसे किया जाता है:

चरण 1

एसवीजी को पथ समूह का चयन करके सीमाओं से बाहर किए जाने से रोकें और परत: पथ> वेक्टराइज़ स्ट्रोक पर क्लिक करें

यह जानने के लिए कि यह काम कर चुका है, स्ट्रोक जहां बंद रास्तों में तब्दील हो जाते हैं और इंस्पेक्टर अब बॉर्डर कलर के बजाय फिल रंग दिखाता है ।

चरण 2

निरीक्षक पर निर्यात करें टैब पर क्लिक करके और एसवीजी प्रारूप का चयन करके प्रत्येक आइकन / svg निर्यात करें

चरण 3

हमेशा की तरह SVG आइकॉन को आइकॉन पर आयात करें, अब सेट को आइकनों को सही ढंग से प्रदर्शित करना चाहिए और ग्रिड का आकार सही होना चाहिए। नोट: सुनिश्चित करें कि स्केच पर आपके सभी एसवीजी की ऊंचाई समान है।

अद्यतन 2016 @jackocnr को इंगित करने के लिए धन्यवाद:

2016 में, स्केच मेनू विकल्प परत> कन्वर्ट टू आउटलाइन है


मैं सदिश स्ट्रोक विकल्पों के बारे में पूरी तरह से भूल गया था। धन्यवाद दोस्त!
एलेक्स मैककेबे

"... सुनिश्चित करें कि स्केच पर आपके सभी एसवीजी की ऊंचाई समान है।" आप इसके लिए माइनस ("-") प्रतीक का प्रबंधन कैसे करते हैं?

1
2016 में, स्केच मेनू विकल्प परत है> कन्वर्ट में रूपरेखा
jackocnr

1

इस नियमावली ने मेरे लिए काम किया। यह बहुत जानकारीपूर्ण है। वह लेखक स्केच निर्यात समस्याओं के बारे में बात करता है। मैं अपने लेख से उद्धृत कर रहा हूँ अगर मामले को हटा दिया जाएगा।

कुल मिलाकर समाधान

  1. प्रत्येक आइकन के लिए एक आर्टबोर्ड बनाएं (डालें -> आर्टबोर्ड)।
  2. सुनिश्चित करें कि प्रत्येक आर्टबोर्ड की स्थिति में कोई आधा-पिक्सेल नहीं है और यह एक सम संख्या है।
  3. सभी आइकन घुमाव निकालें।
  4. किसी भी बाउंडिंग बॉक्स को हटा दें ताकि स्केच अनावश्यक कोड निर्यात न करें।
  5. SVG को बॉर्डर लेयर> पाथ> वेक्टराइज़ स्ट्रोक से बाहर होने से रोकें (धन्यवाद गस )
  6. निर्यात साफ .svg

* यह वह आइकन है जिसे लेखक ने निर्यात करने की कोशिश की है

यहाँ छवि विवरण दर्ज करें

स्केच निर्यात करने वाले कीड़े

बग # 1

निश्चित स्केच निर्यात को आर्टबोर्ड स्थिति में बदलकर सम संख्या में बदल देता है। यह कोड में किसी भी परिवर्तन को हटा देता है। एक अन्य नोट पर, चूंकि स्थिति आधे-पिक्सेल से बंद थी, स्केच ने मेरे व्यूबॉक्स का आकार 0 0 25 25 में बदल दिया। मेरा मूल आर्टबोर्ड 24 x 24px था। इस बग ने कोड में चश्मा भी जोड़ा। नहीं बुएनो।

बग # 2

समस्या: डिजाइन के अनुसार, प्रत्येक आइकन चौड़ाई पर सेट था: जीपीएक्स, ऊंचाई: जीपीएक्स, और बॉर्डर-त्रिज्या: 3 पीएक्स। समस्या यह है कि निर्यात करते समय, आयत को पथ में जोड़ा गया था, इस प्रकार सीएसएस द्वारा किसी भी आकार में स्केल करना मुश्किल हो गया।

समाधान: किसी भी पारदर्शी बाउंडिंग बॉक्स को हटा दें और css को जादू करने दें। सभी डेवलपर्स को वास्तव में जरूरत थी 24 x 24px पर सेट किया गया व्यूबॉक्स। वे चौड़ाई, ऊंचाई और सीमा-त्रिज्या में जोड़ सकते हैं।

बग # ३

समस्या: स्केच एक घुमाव (-180.000000) निर्यात करता है।

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

समाधान: अपने .svg आइकन को Adobe Illustrator में खोलें, आइकन को घुमाएँ, फिर स्केच में खींचें और छोड़ें। यह सब एक साथ रोटेशन को हटा देता है।

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


0

यदि आप उप-पथ का उपयोग कर रहे हैं, तो निर्यात करने से पहले आकार को समतल करें। मुझे मैन्युअल रूप से कंपाउंड पथ बनाने के बारे में फोंटेलो में एक त्रुटि मिली, लेकिन यह सही ढंग से काम करता है।

(मेरा आकार एक चक्र था जिसमें दो आकृतियों को काट दिया गया था।)


दुर्भाग्य से, आप केवल आकृतियों में एक दूसरे को प्रतिच्छेद कर सकते हैं। यदि आप घटाव का उपयोग कर रहे हैं, तो यह आपको नहीं होने देगा।
एलेक्स मैककेबे

@AlexMcCabe कैसे प्रत्येक पथ को घटाना है कि कैसे समतल रास्ते पर कोई खबर?
गुइडो बोमन

कोई बात नहीं थी, सबसे अच्छी बात यह है कि अपने आकृतियों को जितना संभव हो उतना सरल करें, या हाथों को रेखाओं से जोड़ दें। जो एक बुरा सपना है: /
एलेक्स मैककेबे
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.