एसवीजी में पाठ

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



पिछले लेख: एसवीजी ग्राफिक्स और स्टाइलिंग एसवीजी ग्राफिक्स पता करना

सबसे पहले, मूल वाक्यविन्यास पर विचार करें, जो कि बेसलाइन को परिभाषित करने वाले x और y निर्देशांक के साथ एक पाठ टैग है:

<svg> <text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text> </svg> 

ऐसा एसवीजी टेक्स्ट सामान्य से अलग नहीं है:

stylization

सीएसएस का उपयोग करके टेक्स्ट को स्टाइल किया जा सकता है: नियमित एचटीएमएल की तरह, फॉन्ट-वेट, फॉन्ट-स्टाइल और टेक्स्ट-डेकोरेशन। यदि आपको किसी एकल तत्व पर शैली लागू करने की आवश्यकता है, तो आपको tspan टैग का उपयोग करना होगा:

 <svg> <text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan></text> </svg> 

लेखन का तरीका

आप सामान्य से (बाएं से दाएं) पाठ के अभिविन्यास को कुछ अन्य में बदल सकते हैं, उदाहरण के लिए, जैसा कि जापान में, ऊपर से नीचे तक लेखन-मोड का उपयोग करके : tb निर्माण, जहां tb "शीर्ष-से-नीचे" है

 <svg> <text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text> </svg> 

पाठ की रूपरेखा

एक एसवीजी पाठ मुख्य रूप से एक वेक्टर छवि है, इसलिए रूपरेखा के साथ आप एक स्ट्रोक जोड़ सकते हैं और भरण के साथ भरण बदल सकते हैं:

 <svg> <text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">This is SVG Text</text> </svg> 

गाइड

एसवीजी में, पाठ को न केवल क्षैतिज या लंबवत रूप से प्रदर्शित किया जा सकता है, बल्कि मार्गदर्शक के साथ - कोई भी वेक्टर वक्र। पेन टूल का उपयोग करके ग्राफिक्स एडिटर (जैसे एडोब इलस्ट्रेटर) में एक सादृश्य पाया जा सकता है:



कोड में पथ और दोष टैग होने चाहिए:

 <defs> <path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/> </defs> 

गाइड के साथ टेक्स्ट को "रन" करने के लिए टेक्स्टपैथ का उपयोग करना भी आवश्यक है:

 <use xlink:href="#textpath"/> <text x="10" y="100"> <textPath xlink:href="#textpath"> Lorem ipsum dolor sit amet consectetur. </textPath> </text> 

ढाल

आप पाठ को भरने के लिए एक ढाल भी जोड़ सकते हैं। सबसे पहले आपको रंग सेट करने की आवश्यकता है:

 <defs> <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%"> <stop stop-color="#999" offset="0%"/> <stop stop-color="#111" offset="100%"/> </linearGradient> </defs> 

और फिर भरने के साथ ढाल लागू करें:

 <text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text> 

फोंट

वेब-सुरक्षित फोंट का उपयोग करने के लिए, एक साधारण निर्माण ( डेमो ) पर्याप्त है:

 <text x="100" y="100" style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: normal"> Text using web safe font </text> 

@ फॉन्ट-फेस का उपयोग करने के लिए, आपको डीम्स टैग में फोंट की घोषणा करने की आवश्यकता है, फिर ऑपरेशन का सिद्धांत HTML ( डेमो ) के समान होगा:

 <defs> <style type="text/css"> <![CDATA[ @font-face { font-family: Delicious; src: url('http://nimbupani.com/demo/svgfonts/delicious-roman.otf'); } ]]> </style> </defs> <text x="100" y="100" style="font-family: 'Delicious'; font-weight:normal; font-style: normal"> Text using CSS @font-face </text> 

एसवीजी फोंट (एक्सटेंशन .svg, कई उदाहरणों के साथ ) भी हैं जो दो तरीकों से उपयोग किए जा सकते हैं: बाहरी एसवीजी फ़ॉन्ट को कॉल करके या पहले से निर्मित एसवीजी फ़ाइल का उपयोग करके। यह लेख इन विधियों का विवरण देता है।

एसवीजी फोंट का उपयोग करने के लाभ:

• यह किसी भी ब्राउज़र या प्रोग्राम द्वारा समर्थित है जो एसवीजी फाइलें देख सकता है
• आप एक फाइल में कई फोंट स्टोर कर सकते हैं
• खुला स्रोत
• आधुनिक ब्राउज़रों के लिए समर्थन

निष्कर्ष

एसवीजी पाठ का उपयोग निश्चित रूप से नियमित एचटीएमएल की तुलना में अधिक लचीला है। मुख्य बात यह है कि इस उपकरण को सही ढंग से और जगह पर लागू करने में सक्षम होना चाहिए। यह याद रखने योग्य है कि SVG IE 8 और उसके नीचे समर्थित नहीं है ।

सभी उदाहरण / डाउनलोड स्रोत का प्रदर्शन

पढ़ने के लिए उपयोगी:

• एसवीजी टेक्स्ट आधिकारिक दस्तावेज - W3.org
• SVG में फ़ॉन्ट्स के बारे में - Divya Manian
• SVG फ़ॉन्ट्स: कैसे करें - Fr B
• Hongkiat.com पर उदाहरणों के मूल
• मोज़िला देव में एसवीजी डोविशन। उदाहरण और उपकरण के साथ नेटवर्क - एमडीएन
• एसवीजी लेखन मोड विशेषता - एमडीएन