पाथ पर SVG टेक्स्ट: संपादन योग्य बैज अक्षर बनाएँ

SVG टेक्स्ट पाथ पर रखने के लिए ID वाला पाथ परिभाषित करें, <text> के अंदर <textPath> से उसका संदर्भ दें और टैग के बीच शब्द लिखें। अक्षर बीच में रखने के लिए startOffset="50%" और text-anchor="middle" साथ लें। प्रतीक अलग समूह में रखें ताकि चित्र दोबारा बनाए बिना शब्द बदल सकें।

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

प्रतीक के पास क्षैतिज अक्षरों के लिए textLength से सीधा SVG लेबल फिट करें और अक्षरों के अनुपात बदलने से पहले अक्षरों के बीच के अंतर में आए बदलावों की तुलना करें।

तीन अलग हिस्सों से शुरू करें

बैज को प्रतीक, गाइड पाथ और उसका अनुसरण करने वाला टेक्स्ट चाहिए। गाइड अक्षरों की स्थिति नियंत्रित करता है; अंतिम डिज़ाइन में उसका दिखाई देना ज़रूरी नहीं। MDN textPath संदर्भ टेक्स्ट और उसके पाथ के बीच href संबंध बताता है।

नीचे के उदाहरण में हमने SVG कोड से साधारण चीड़ का पेड़ और अर्धवृत्त गाइड बनाया। दोनों मौलिक प्रदर्शन चित्र हैं, PerfectVector रूपांतरण आउटपुट नहीं। बैज पर PINE TRAIL CLUB लिखा है; निर्माण के सभी चरणों में अक्षर टेक्स्ट स्ट्रिंग रहते हैं।

संपादन योग्य बैज बनाएँ

यह कोड badge.svg में सहेजकर ब्राउज़र में खोलें। फ़ाइल संपादन योग्य मूल के रूप में रखें। फ़ॉर्मैट आपके लिए नया हो तो हमारी SVG फ़ाइल मार्गदर्शिका टेक्स्ट, पाथ और एम्बेड की गई छवियों का अंतर समझाती है।

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400" viewBox="0 0 400 400"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Pine Trail Club badge</title>
  <defs>
    <path id="badge-arc"
          d="M70 215 A130 130 0 0 1 330 215" />
  </defs>
 
  <circle cx="200" cy="205" r="166"
          fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
  <g id="emblem" fill="#214b41">
    <path d="M200 150 148 220 175 220 133 273
             267 273 225 220 252 220Z" />
    <path d="M188 269H212V303H188Z" />
  </g>
 
  <text fill="#214b41" font-family="Georgia, serif"
        font-size="29" text-anchor="middle">
    <textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
  </text>
</svg>

पाथ (70, 215) से शुरू होता है और ऊपरी अर्धवृत्त पर (330, 215) तक जाता है। उसकी त्रिज्या 130 इकाइयाँ है। पाथ <defs> में रखने से वह दृश्य स्ट्रोक बनाए बिना संदर्भ के लिए उपलब्ध होता है। हल्का बाहरी वृत्त अलग रंगा हुआ आकार है।

PINE TRAIL CLUB को अपने छोटे नाम में बदलें, सहेजें और फिर लोड करें। पेड़ स्थिर रहना चाहिए और नए शब्द उसी गाइड पर चलने चाहिए। लंबे नाम के लिए फिट फिर जाँचें; बीच में रखना मनमाने टेक्स्ट को चाप में फिट नहीं करता।

ऑफ़सेट और एंकर दोनों से बीच में रखें

startOffset="50%" टेक्स्ट का संदर्भ स्थान पाथ के आधे रास्ते पर रखता है। text-anchor="middle" टेक्स्ट के बीच को उस स्थान पर मिलाता है। एक वक्र पर स्थिति चुनता है; दूसरा चुनता है कि टेक्स्ट का कौन सा हिस्सा वहाँ बैठे। startOffset संदर्भ और text-anchor संदर्भ ये नियंत्रण बताते हैं।

केवल text-anchor को start बदलकर देखें। बाएँ से दाएँ चलने वाले इस टेक्स्ट में शब्द अब आधे बिंदु से शुरू होकर दाएँ अंतिम बिंदु की ओर जाते हैं। हमारे ब्राउज़र परीक्षण में इससे अक्षर दाईं ओर चले गए और वाक्यांश का कुछ हिस्सा इस्तेमाल योग्य चाप से बाहर रहा। फ़ॉन्ट आकार बदलने से पहले middle वापस करें।

सममित बैज में गणितीय रूप से बीच में रखने के बाद परिणाम आँख से जाँचें। अक्षरों के आकार और बगल के खाली स्थान अलग होते हैं; टेक्स्ट की कुल लंबाई बीच में होने पर भी छोटा दृश्य समायोजन चाहिए हो सकता है। ऐसा बदलाव सोच-समझकर करें, केवल करीब दिखने तक कई असंबंधित निर्देशांक न बदलें।

टेक्स्ट खिसकाने से पहले पाथ की दिशा जाँचें

इसी ऊपरी चाप को उलटने के लिए उसका d मान बदलें:

d="M330 215 A130 130 0 0 0 70 215"

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

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

अंतिम अंतर तय करने से पहले फ़ॉन्ट चुनें

उदाहरण Georgia माँगता है, फिर सामान्य serif विकल्प। यह अनुरोध SVG में फ़ॉन्ट एम्बेड नहीं करता। रेंडरर परिवार सूची से उपलब्ध फ़ॉन्ट चुनता है, जैसा MDN font-family संदर्भ बताता है।

हमारे Chromium प्रदर्शन में उन्हीं शब्दों को Georgia, serif से Arial, sans-serif बदलने पर मापी गई टेक्स्ट लंबाई बदली। चाप और प्रतीक नहीं बदले। ज़रूरी है कि आप टेक्स्ट द्वारा घेरे गए विस्तार और अक्षरों की दिखावट जाँचें, कोई निश्चित चौड़ाई नहीं जिसे दूसरा कंप्यूटर अलग रेंडर कर सकता है।

वास्तविक बैज में आकार या अक्षर अंतर बदलने से पहले इच्छित फ़ॉन्ट और मोटाई तय करें। फिर SVG इस्तेमाल होने वाले वातावरण में दोबारा खोलें। वहाँ फ़ॉन्ट बदलता हो तो प्रतिस्थापन या आयात व्यवहार अलग पहचानने के लिए SVG फ़ॉन्ट समस्या मार्गदर्शिका लें।

शब्द चाप से बाहर जाएँ तो छोटा वाक्यांश, छोटा फ़ॉन्ट आकार या चौड़ा गाइड आज़माएँ। हर बदलाव के बाद पूरा बैज देखें। गाइड त्रिज्या बढ़ाने से अक्षर बाहरी बॉर्डर के पास जा सकते हैं; अक्षर आकार घटाने से छोटे छपे बैज को पढ़ना कठिन हो सकता है। केवल निश्चित जगह भरने के लिए अक्षर खींचने से बचें, जब तक वह विकृति डिज़ाइन का हिस्सा न हो।

केवल उस चित्र को वापस बनाएँ जिसे ट्रेसिंग चाहिए

प्रतीक केवल PNG या JPG में हो तो उसकी पुनर्प्राप्ति टाइपोग्राफ़ी के काम से अलग रखें। स्रोत की ऐसी प्रति लें जो प्रतीक को यथासंभव साफ़ अलग करती हो। पूरा मूल बैज दोबारा बनाने के दृश्य संदर्भ के रूप में रखें।

PerfectVector से रास्टर प्रतीक वेक्टराइज़ करें, फिर उसकी बाहरी आकृति, अंदर के अंतर और छोटे विवरण स्रोत से मिलाएँ। स्वीकृत SVG चित्र प्रतीक समूह में लें और इच्छित फ़ॉन्ट से शब्द अलग दोबारा बनाएँ। PerfectVector छवि से वेक्टर पाथ बनाता है; यह कार्यप्रवाह OCR, फ़ॉन्ट पहचान या घुमावदार संपादन योग्य टेक्स्ट के स्वचालित पुनर्निर्माण पर निर्भर नहीं है।

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

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

संपादन योग्य मूल रखें और डिलीवरी प्रति बनाएँ

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

Illustrator के SVG सहेजने के विकल्पों में Convert To Outlines टेक्स्ट को पाथ बनाता है। Adobe यह चेतावनी भी देता है कि निर्यात किया पाथ वाला टेक्स्ट SVG व्यूअर में अलग रेंडर हो सकता है। ये निर्यात प्रति उसके गंतव्य में जाँचने के कारण हैं, हर आगे के टूल में पूरा बैज वैसा ही दिखने की गारंटी नहीं। Adobe का SVG सहेजने का दस्तावेज़ देखें।

हस्तांतरण का यह क्रम अपनाएँ:

1. किसी चीज़ को आउटलाइन करने से पहले लाइव टेक्स्ट मूल सहेजें।
2. शब्द, फ़ॉन्ट, पाथ दिशा, बीच की स्थिति और अंतर की पुष्टि करें।
3. अलग डिलीवरी प्रति बनाएँ और संपादक में उसका टेक्स्ट आउटलाइन में बदलें।
4. प्रति दोबारा खोलें और सभी अक्षर, अक्षरों के अंदर के खाली हिस्से, अंतर और प्रतीक मिलाएँ।
5. प्राप्त करने वाले एप्लिकेशन में बैज इच्छित आउटपुट आकार पर जाँचें।

आउटलाइन करना वर्तमान फ़ॉन्ट दिखावट स्थिर कर देता है। आउटलाइन करते समय गलत वैकल्पिक फ़ॉन्ट सक्रिय हो तो गलत अक्षर स्थिर हो जाते हैं। वेब छवि के लिए उपयोगी सुलभ नाम भी रखें; आउटलाइन अक्षर आकृतियाँ अपने आप मूल टेक्स्ट स्ट्रिंग नहीं रखतीं।

अक्सर पूछे जाने वाले प्रश्न

मेरा SVG टेक्स्ट पाथ के बीच में क्यों नहीं है? बीच में रखे उदाहरण के लिए startOffset="50%" और text-anchor="middle" साथ लें। start एंकर के साथ 50% ऑफ़सेट वाक्यांश को गाइड के आधे रास्ते से शुरू करता है। पाथ का आकार और पूरा वाक्यांश फिट होना भी जाँचें।

टेक्स्ट उल्टा क्यों है? गाइड की दिशा जाँचें। टेक्स्ट पाथ की बनाई दिशा में चलता है, इसलिए पाथ उलटने से अक्षरों का अभिविन्यास बदल सकता है। टेक्स्ट खिसकाने या उसकी वर्तनी बदलने से पहले गाइड दिशा जाँचें।

क्या बैज वेक्टराइज़ करने से संपादन योग्य घुमावदार टेक्स्ट बनता है? वेक्टराइज़ेशन दिखाई देने वाले अक्षर आकारों को चित्र के रूप में दोबारा बनाता है। संपादन योग्य शब्दों के लिए इच्छित फ़ॉन्ट और textPath गाइड से टेक्स्ट अलग बनाएँ। आउटलाइन डिलीवरी प्रति बनाने से पहले लाइव टेक्स्ट मूल रखें।

स्रोत

1. MDN — textPath — लाइव टेक्स्ट को संदर्भित पाथ से जोड़ना।
2. MDN — startOffset — गाइड पर टेक्स्ट की स्थिति।
3. MDN — text-anchor — संदर्भ स्थान के अनुसार टेक्स्ट संरेखित करना।
4. W3C — SVG 2 टेक्स्ट — ग्लिफ़ स्थिति और पाथ पर टेक्स्ट के लेआउट नियम।
5. MDN — font-family — उपलब्ध फ़ॉन्ट और वैकल्पिक परिवार चुनना।
6. Adobe — Illustrator में चित्र सहेजें — SVG टेक्स्ट आउटलाइन करना और पाथ पर टेक्स्ट की निर्यात सीमाएँ।

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