क्या मैं एसवीजी पाठ को पथ में बदल सकता हूं लेकिन ग्लिफ़ का पुन: उपयोग कर सकता हूं?

Question

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

इसलिए मैंने पाठ को पथों में बदल दिया। हम 4000 अलग-अलग लेबल के बारे में बात कर रहे हैं। शायद 15,000 नए आकार अब वे वैक्टर हैं। यह 4MB है। आम तौर पर आप तर्क कर सकता है यह संपीड़न के ही उधार होगा, लेकिन मैं करने के लिए है में लाइन HTML में इस एसवीजी । मैं सीएसएस परिवर्तनों को गतिशील रूप से जोड़ रहा हूं और यह एकमात्र तरीका है जिसमें मेरे पास क्रॉस-ब्राउज़र समर्थन का एक मौका है। तो वैसे भी, कच्चे-सुगंधित-इसका उत्पादन उपयोगी होने के लिए बहुत बड़ा है।

यहाँ मेरे साथ क्या हुआ, ये सभी स्पेस नंबर आम ग्लिफ़ साझा करते हैं। नौ के माध्यम से शून्य। मुझे हर संख्या के प्रत्येक उदाहरण के लिए एक आकार परिभाषा क्यों शामिल है ? क्या मैं इनकी नक़ल कर सकता हूँ?

मैं इंकस्केप का उपयोग कर रहा हूं लेकिन मैं सुझावों के लिए खुला हूं।

Comments

कोई भी मौका जिससे आप एसवीजी फ़ाइल साझा कर सकें, इसलिए हम इसके साथ प्रयोग कर सकते हैं?

— JohnB

बग वास्तव में क्या है (स्क्रीनशॉट), और आप इसे ब्राउज़र पर कैसे निर्यात और लोड कर रहे हैं? एक अच्छा मौका है कि आप इसे केवल कुछ सीएसएस स्टाइल, या पाठ तत्वों को ठीक करने / बदलने के लिए पृष्ठ की एक छोटी स्क्रिप्ट के साथ ठीक कर सकते हैं। यदि यह एक गतिशील मानचित्र प्रदर्शन है, तो आप इसे एक वास्तविक मानचित्र में बदलना चाहते हैं - अधिकांश ब्राउज़र मैपिंग लाइब्रेरी (और कई डेटा-आधारित) को लेबलिंग के लिए बहुत समर्थन मिलता है।

— ब्रिचिन

क्षमा करें, SVG साझा करने के लिए मेरा नहीं है (यह एक ग्राहक का है) लेकिन बग के बारे में जाना जाता है । इसका अनिवार्य रूप से मतलब है कि एसवीजी में फ़ॉन्ट एक बिंदु से अधिक नहीं होगा ... यदि आप हजारों गिने हुए पार्किंग स्थानों के साथ मानचित्र पर सभी तरह से ज़ूम आउट करते हैं तो यह एक गंभीर मुद्दा है । वे होना चाहिए (जैसे) ~ 0.08pt और वे वास्तव में 13pt हैं।

— ओली

आपको गलत बग नंबर मिल गया है, आप वास्तव में इस की

— रॉबर्ट लोंगसन

आप इसे एक सबसेट पर परीक्षण करना चाह सकते हैं, लेकिन path|simplifyआपकी मदद कर सकते हैं? एक लोअरकेस "s" 28 बिंदु पथ में परिवर्तित हो जाता है, इसे 17 में सरलीकृत करता है, और सरलीकृत और असूचीबद्ध संस्करणों को ओवरलेइंग करते हुए यहां तक ​​कि ज़ूम किया जाता है ताकि एक "s" स्क्रीन भर जाए कोई अंतर नहीं है।

— क्रिस एच

Answer 1

<use>तत्व आप दस्तावेज़ में कहीं परिभाषित वस्तुओं का पुन: उपयोग करने के लिए अनुमति देता है। उदाहरण के लिए, आप प्रत्येक ग्लिफ़ को एक के रूप में परिभाषित कर सकते हैं <symbol>और फिर उन्हें कई बार पुन: उपयोग कर सकते हैं। यहाँ इसके बारे में एक अच्छा लेख है: संरचना, समूह और एसवीजी में संदर्भित - <g>, <use>, <defs>और <symbol>तत्वों ।

मुझे नहीं पता कि सीधे Inkscape में ऐसा कैसे करना है, हालांकि - विशेष रूप से पाठ के एक समूह के लिए नहीं जो आपके पास पहले से ही पाठ के रूप में है। आपको एसवीजी को पोस्ट-प्रोसेस करने और पुन: उपयोग किए जा सकने वाले सभी रास्तों को खोजने के लिए एक स्क्रिप्ट लिखनी पड़ सकती है।

Comments

<use>मैं क्या सोच रहा था जब मैं इस से पूछा, पटकथा कैसे है था। मूर्खतापूर्ण लगता है कि समरूप मार्कअप को डी-डुप्लिकेट करने के लिए कुछ भी नहीं है।

— ओली

@ तब भी समान मार्कअप को समाप्त करने के लिए कुछ भी नहीं था ; मुझे अपनी खुद की (और समान रूप से बाइट से मतलब है, मुझे लिखना पड़ा; मैंने उन्हें हैश किया और हैश की तुलना में)

— क्रिस एच

मैं दोपहर के भोजन के बारे में सोचता था, और यह मुझे लगता है कि इंक्सस्केप के भीतर एक (अजगर) स्क्रिप्ट की तरह होगा। स्क्रिप्ट पाठ के रूप में पाठ के साथ शुरू होती है, और इसे s के संदर्भ में बदल देती है <symbol>(या ऐसा लगता है कि आप <def>अपने टेक्स्ट-टू-पथ ग्लिफ़ को देख सकते हैं

— क्रिस H

Answer 2

वहाँ कुछ संपीड़न विकल्प उपलब्ध हैं जो सफलता की अलग-अलग डिग्री प्रदान करेंगे। उनका परीक्षण करने के लिए, मैंने एक कलाकृति फ़ाइल बनाई, जिसमें पूरी तरह से दोहराया गया पाठ था। अन-विस्तारित, फ़ाइल का आकार 13.8 KB है। विस्तारित, फ़ाइल का आकार 1.42 एमबी है ।

अच्छा विकल्प: SVGZ - 46.5 KB का उपयोग करें

विस्तारित कलाकृति को सहेजते हुए SVGZ ने मुझे 46.5 KB की आउटपुट फाइल दी जो मानक SVG से काफी छोटी है। ध्यान दें कि समर्थन अलग-अलग हो सकता है ।

बेहतर विकल्प: 21.1 केबी के साथ संपीड़ित करें

दस्ताना एक उपकरण है जो आपके लिए एसवीजी फ़ाइल को स्क्रब और ऑप्टिमाइज़ करेगा। की "अधिकतम संपीड़न" कमांड का उपयोग करके scour -i input.svg -o output.svgz --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none, विस्तारित कलाकृति को 21.1 KB तक घटा दिया गया था। मूल अन-विस्तारित फ़ाइल आकार से दूर नहीं!

Comments

दस्त नहीं करता है, यह सिर्फ कबाड़ को हटा देता है और जब तक यह मेरे लिए अच्छा नहीं होता है ( बड़ी संख्या में वस्तुओं को देखते हुए), मेरा "4 एमबी" पोस्ट-स्कॉर था। संपीड़ित सामग्री बहुत अच्छी होगी, लेकिन और मुझे इसका पहले उल्लेख करना चाहिए था- मुझे ब्राउज़र लक्ष्यीकरण मुद्दों के लिए एसवीजी को इनलाइन करना होगा (और इसमें हेरफेर की आवश्यकता भी है)। मुझे पता है, मुझे पता है, यह दर्दनाक है, लेकिन मुझ पर विश्वास करो जब मैं कहता हूं कि यह मुझे उस समय अधिक चोट पहुंचा रहा है:

— ओली

मुझे कहना चाहिए था, scourनहीं करता है के जटिल हिस्सा संपीड़ित करता है। यह फ़ाइल को आपके लिए gzip के माध्यम से भी फेंक सकता है, लेकिन ID और व्हॉट्सएप मिनिफिकेशन सामान इसकी मुख्य टमटम है।

— ओली

@ ठीक है, इसलिए शब्द "ऑप्टिमाइज़" का मेरा सावधानीपूर्वक चयन :) यह एक धमाकेदार है कि आपकी फ़ाइल पहले से ही स्कर्स्ड है ... लेकिन!

— JohnB

मैंने इलस्ट्रेटर में थोड़ा गड़बड़ कर दिया; इसका एसवीजी आउटपुट सिंबल का सम्मान करता है। यहाँ एक त्वरित उदाहरण है । यह काफी प्रयास करेगा, लेकिन आप एक इलस्ट्रेटर स्क्रिप्ट बनाने में सक्षम हो सकते हैं जो आपके पाठ को अलग-अलग पात्रों में तोड़ देगा और उन्हें प्रतीकों से बदल देगा। सबसे बड़ी बाधा जो मैं देख रहा हूं वह रोटेशन के साथ काम करेगा। यदि सभी पाठ एक्स अक्ष के समानांतर हैं तो यह मुश्किल नहीं लगता है, लेकिन एक कोण पर पाठ से निपटना एक चुनौती हो सकती है। बेशक, अगर आपके पास इलस्ट्रेटर उपलब्ध नहीं है, तो यह बहुत उपयोगी नहीं है

— जॉन्स

Answer 3

यह एक इन-ब्राउज़र या सर्वर समाधान पर है

एसवीजी फ़ाइलों को अनुकूलित करने के कई अलग-अलग तरीके हैं। लगता है जैसे आप पहले से ही एक अच्छा सा कर चुके हैं।

कुछ संसाधन जो मुझे बहुत उपयोगी लगे हैं वे एक सीएसएस-ट्रिक्स लेख हैं जो बहुत विशिष्ट विवरणों पर केंद्रित हैं। और विशेष रूप से, यह उपकरण जो SVGO का उपयोग करता है ।

यदि आपके पास कई, बार-बार पथ हैं, तो मैं आकार को गतिशील रूप से बनाने के लिए जावास्क्रिप्ट का उपयोग करने पर विचार करूंगा। यहाँ एक उदाहरण है । एक दिशा प्रत्येक ग्लिफ़ के लिए एक निर्धारित फ़ंक्शन होना चाहिए, और उस फ़ंक्शन के लिए अनुरोध द्वारा बनाए गए svg तत्व के भीतर प्रत्येक पथ होगा। या अपनी इनलाइन svg बनाने के लिए एक पूर्ण स्ट्रिंग, और / या तर्कों की सरणी लें। यह, निश्चित रूप से, अपेक्षा करता है कि आपके रास्ते कोड की लंबाई से अधिक हैं अनुरोध करने के लिए आवश्यक फ़ंक्शन (बहुत आसान धारणा)।

Comments

हालांकि यह उत्तर कई संभावित समाधान प्रस्तुत करता है, एसवीजीओ सबसे दिलचस्प लगता है। इसे ऑप्टिमाइज़ करने के लिए .svg फ़ाइल पर भी चलाया जा सकता है। हालांकि वर्तमान में यह मार्ग समर्पण नहीं लगता है। यदि पूछनेवाला समाप्त हो जाता है कस्टम स्क्रिप्टिंग वैसे भी, यह SVGO के लिए एक वृद्धि के रूप में कर एक अच्छा विचार हो सकता है।

— जेपीए

@jpa पहले (या जबकि) रास्तों में परिवर्तित होने से निश्चित रूप से जाने का रास्ता होगा। पाठ चार "1" के साथ के सभी बदल दें <use xlink:href="#digit_one">जहां digit_oneएक रास्ता है

— क्रिस एच

@ क्रिस मैं यह नहीं देख सकता कि कोई बाद में भी क्यों नहीं काट सकता। प्रारंभिक बिंदु पर आने के लिए सभी रास्तों को सामान्य करें, हैश का उपयोग करें, यह पता लगाने के लिए कि क्या पथ पहले से ही हुआ है। यकीन है, के रूप में सुंदर नहीं है, लेकिन काम करना चाहिए और सभी पाठ लेआउट तर्क को फिर से लागू / पता लगाने की तुलना में लागू करना आसान हो सकता है।

— jpa

@jpa आप कर सकते हैं, लेकिन अगर मूल को सामान्य करने से राउंडिंग त्रुटियां पेश की जाती हैं, तो हैश मैच नहीं करेगा। मैं जिस स्क्रिप्ट के बारे में सोच रहा हूं, वह चरित्र पथ को पूरा करने के लिए टेक्स्ट-टू-पथ को कॉल करेगा, लेकिन फिर उन्हें मास्टर्स के सेट के संदर्भ में बदल देगा।

— क्रिस एच

@jpa और राउंडिंग त्रुटियाँ वास्तविक हैं। एक खिलौना उदाहरण पर शून्य का पहला द्विघात वक्र छठे दशमलव स्थान में 1 से भिन्न होता है - हैशिंग को स्क्रू करने के लिए पर्याप्त है

— क्रिस एच

Answer 4

यहाँ बहुत उच्च स्तर पर आपकी स्क्रिप्ट को क्या करना चाहिए। अपनी पसंदीदा भाषा और वातावरण का उपयोग करने के लिए स्वतंत्र महसूस करें, यह सिर्फ एक तर्क के लिए एक शुरुआती बिंदु है जो आपको वह देना चाहिए जो आप खोज रहे हैं।

• SVG की xml में सभी टेक्स्ट एलिमेंट्स के माध्यम से लूप करें और जिनके पास न्यूमेरिक टेक्स्ट (पार्किंग स्पॉट्स हैं, आप निर्दिष्ट नहीं करते हैं कि आपके svg में कोई और टेक्स्ट है), पार्किंग के साथ स्ट्रिंग के लिए Inkscape द्वारा बनाई गई आईडी को स्वचालित रूप से बदलें। स्पॉट की संख्या। इंकस्केप को केवल विशिष्ट आईडी की आवश्यकता होती है, यह गैर-वर्णनात्मक आईडी बनाता है, लेकिन उपयोगकर्ता द्वारा बनाई गई या मैन्युअल रूप से बनाई गई या परिवर्तित की गई आईडी को सम्मान और परिवर्तित नहीं करेगा।
• एक टेबल स्टोर में प्रत्येक पार्किंग स्थल के टेक्स्ट एलिमेंट के x & y निर्देशांक होते हैं।
• चाहे इंक्सस्केप हो या स्क्रिप्टिंग, सभी पार्किंग स्पॉट टेक्स्ट को पथ में परिवर्तित करें।
• अंकों के लिए 0-9 एसवीजी में संलग्न करें <defs>प्रत्येक अंक के लिए पथ की जानकारी को परिभाषित करने वाला एक उपयुक्त अनुभाग।
• <g>पार्किंग स्थलों के सभी एस के माध्यम से लूप और उन्हें एक के साथ बदलें<use xlink:href="#digit" x=x y=y />
• फायदा

मैं कुछ जटिलताओं का सामना कर सकता हूं जिनसे आपको निपटना होगा, और उन लोगों के साथ शुभकामनाएं।

• लूप को पार्किंग अंकों के तार को 2 अंकों या उससे अधिक के साथ विभाजित करने की आवश्यकता होगी और पहले अंक और बाद के अंकों के बीच उपयुक्त अंतर मुश्किल हो सकता है; यह आपके द्वारा उपयोग किए जा रहे फोंट पर बहुत अधिक निर्भर करेगा।
• आप निर्दिष्ट नहीं करते हैं कि पार्किंग स्पॉट किस अभिविन्यास में हैं या यदि वे घुमावदार सेट-अप पर भी हैं। मैनुअल एक्स के कारण, 2 अंकों की संख्या के लिए y ऑफ़सेट और अधिक से अधिक, आपको पार्किंग स्थल के 'ओरिएंटेशन' का पता लगाने के लिए अतिरिक्त तर्क की आवश्यकता हो सकती है और पहले से अलग-अलग अंकों के अलग-अलग रास्तों को सही ढंग से कैसे अंतरिक्ष में लाया जाए।

उम्मीद है की यह मदद करेगा। शुभ लाभ।