TTF को SVG में बदलें

Q: क्या SVG फ़ॉन्ट में कर्निंग और लिगेचर बने रहते हैं?

सिर्फ़ आंशिक रूप से। SVG फ़ॉन्ट फ़ॉर्मेट `hkern` एलिमेंट से केर्निंग जोड़ी और कई अक्षरों वाले ग्लिफ़ रख सकता है, लेकिन स्मॉल कैप्स, अल्टरनेट या कॉन्टेक्स्चुअल नियमों जैसी OpenType फ़ीचर टेबल का कोई विकल्प उसमें नहीं है। ये चाहिए तो TTF अपने पास रखें।

यह पेज TrueType फ़ॉन्ट को SVG फ़ॉन्ट में बदलता है: एक XML फ़ाइल, जिसमें हर अक्षर एक <glyph> एलिमेंट होता है और उसकी आउटलाइन SVG पाथ डेटा में लिखी होती है। यह आइकन फ़ॉन्ट टूल और फ़ॉन्ट एडिटर के लिए काम का है, लेकिन यह आपके टेक्स्ट की तस्वीर जैसा नहीं है।

या TTF, OTF, WOFF … फ़ाइलें यहाँ ड्रop करें ·

प्रति फ़ाइल अधिकतम 95 MB· अधिकतम 20 फ़ाइलें· 30 मिनट बाद हटा दी जाती हैं

आउटपुट

इसमें बदलें

फ़ाइलें हमारे सर्वर पर प्रोसेस होती हैं और 30 मिनट बाद हटा दी जाती हैं।

अक्षर

रखे जाने वाले अक्षर

जो स्क्रिप्ट आप इस्तेमाल नहीं करते उन्हें हटाने से वेब फ़ॉन्ट सैकड़ों KB से घटकर 30 KB से कम हो सकता है। कंप्यूटर पर इंस्टॉल करने वाले फ़ॉन्ट के लिए सभी अक्षर रखें।

रेंडरिंग और वेब

फ़ॉन्ट का नाम

फ़ैमिली नाम

मूल नाम रखने के लिए खाली छोड़ें। नाम बदलने पर बदला हुआ फ़ॉन्ट मूल फ़ॉन्ट के साथ बिना टकराव के इंस्टॉल हो सकता है।

स्टाइल नाम

जैसे Regular, Bold, Italic। मूल स्टाइल नाम रखने के लिए खाली छोड़ें।

इस टूल का उपयोग कैसे करें

1
TTF अपलोड करें
एक या ज़्यादा .ttf फ़ाइलें जोड़ें, एक बैच में अधिकतम 20 फ़ाइलें और हर फ़ाइल 95 MB तक। आइकन फ़ॉन्ट और टेक्स्ट फ़ॉन्ट, दोनों चलते हैं।
2
आउटपुट में SVG फ़ॉन्ट ही रहने दें
इसमें बदलें में SVG font चुना हुआ है। हिंटिंग SVG आउटपुट पर लागू नहीं होती, इसलिए वह विकल्प दिखता नहीं; एडवांस्ड सेटिंग के अंदर फ़ैमिली नाम से फ़ॉन्ट का नाम फिर भी बदला जा सकता है।
3
SVG में कन्वर्ट करें
SVG में कन्वर्ट करें दबाएँ और .svg फ़ाइल डाउनलोड करें। ग्लिफ़ के पाथ देखने के लिए उसे टेक्स्ट एडिटर, Inkscape या FontForge में खोलें।

TTF से SVG में बदलने पर क्या मिलता है?

एक SVG फ़ॉन्ट फ़ाइल, जिसमें हर अक्षर की आउटलाइन SVG पाथ डेटा के रूप में होती है। इसे तब चुनें जब आपको चाहिए:

1आइकन फ़ॉन्ट टूल या Inkscape के SVG Font Editor में इम्पोर्ट करने के लिए ग्लिफ़ आउटलाइन
2बहुत शुरुआती iPhone ब्राउज़र के लिए पुराने वेबफ़ॉन्ट किट का .svg हिस्सा
3हर अक्षर का पढ़ने लायक वेक्टर डेटा, जैसे किसी एक आइकन को निकालने के लिए

SVG फ़ॉन्ट बनाम टेक्स्ट की SVG इमेज

TTF से SVG खोजने पर दो अलग लक्ष्य आपस में मिले मिलते हैं। एक है SVG फ़ॉन्ट: वह फ़ॉन्ट फ़ॉर्मेट जिसे W3C की 2001 की SVG 1.0 Recommendation ने तय किया था, जहाँ <font> एलिमेंट में हर अक्षर के लिए एक <glyph> होता है, जिसमें Unicode वैल्यू, एडवांस विड्थ और पाथ के रूप में आउटलाइन होती है। दूसरा है किसी टेक्स्ट की SVG तस्वीर, यानी लोगो या नाम के अक्षर जो पहले से एक लाइन में सजे हों और आकृतियों के रूप में सेव हों। यह कन्वर्टर पहली तरह की फ़ाइल बनाता है। अगर आपके पास फ़ॉन्ट नहीं बल्कि लोगो की इमेज है, तो PNG से SVG उसे पाथ में ट्रेस करता है।

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

SVG फ़ॉन्ट फ़ाइल कैसी दिखती है

SVG फ़ॉन्ट के मार्कअप का छोटा उदाहरण

<!-- एक ग्लिफ़ वाला SVG फ़ॉन्ट -->
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

यह पेज जो बनाता है: एक फ़ाइल, हर अक्षर के लिए एक <glyph>, फ़ॉन्ट यूनिट में, y अक्ष ऊपर की ओर।

FontForge, Inkscape और आइकन फ़ॉन्ट टूल में खुलता है
कंप्यूटर पर इंस्टॉल नहीं होता
मौजूदा Chrome, Edge या Firefox में लोड नहीं होता

सामान्य OTF या TTF, जिसमें रंगीन, परतदार ग्लिफ़ वाली एक अतिरिक्त SVG टेबल होती है।

किसी भी फ़ॉन्ट की तरह इंस्टॉल होता है
इमोजी और बहुरंगी लेटरिंग के लिए इस्तेमाल होता है
सपोर्ट ऐप और ब्राउज़र के हिसाब से बदलता है

SVG फ़ॉन्ट कहाँ से आए और कहाँ चले गए

SVG 1.0 font एलिमेंट तय करता है: 2001
आख़िरी iPhone Safari जिसे SVG वेब फ़ॉन्ट चाहिए थे: iOS 4.1
2014 में SVG फ़ॉन्ट हटाता है: Chrome 38
font वाला अध्याय हटा देता है: SVG 2

TTF

TrueType फ़ॉन्ट

TTF, TrueType फ़ॉन्ट फ़ॉर्मैट है जिसे Apple ने 1980 के दशक के अंत में बनाया और 1991 में जारी किया, फिर Microsoft को लाइसेंस दिया। यह ग्लिफ़ की रूपरेखा क्वाड्रैटिक कर्व से तय करता है और हिंटिंग निर्देश शामिल करता है जिससे स्क्रीन पर टेक्स्ट साफ़ दिखता है। इसे हर डेस्कटॉप ऑपरेटिंग सिस्टम, वर्ड प्रोसेसर और डिज़ाइन ऐप सपोर्ट करता है। इसमें OpenType की कुछ उन्नत टाइपोग्राफ़ी सुविधाएँ नहीं हैं और यह वेब फ़ॉन्ट फ़ॉर्मैट से बड़ा होता है।

कंप्रेशन: लॉसलेस
ट्रांसपेरेंसी (पारदर्शिता): –
एनिमेशन: –
शुरुआत का वर्ष: 1991 · Apple

TTF कन्वर्टर

SVG

Scalable Vector Graphics

SVG एक XML-आधारित वेक्टर फ़ॉर्मेट है, जिसे W3C ने 2001 में मानकीकृत किया। यह पिक्सल की जगह आकृतियों, पाथ और टेक्स्ट को बताता है, इसलिए किसी भी साइज़ पर तीखा रहता है और लोगो व आइकन के लिए आमतौर पर बहुत छोटा होता है। यह ट्रांसपेरेंसी, CSS स्टाइलिंग, स्क्रिप्टिंग और एनिमेशन को सपोर्ट करता है, और हर ब्राउज़र इसे सीधे रेंडर करता है। SVG फ़ोटो के लिए उपयुक्त नहीं है, और जटिल इलस्ट्रेशन रेंडर होने में धीमे हो सकते हैं। Illustrator, Inkscape, Figma और ब्राउज़र इसे खोल और एडिट कर सकते हैं।

कंप्रेशन: –
ट्रांसपेरेंसी (पारदर्शिता): हाँ
एनिमेशन: हाँ
शुरुआत का वर्ष: 2001 · W3C

SVG कन्वर्टर

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

TTF से SVG: अक्सर पूछे जाने वाले सवाल

क्या आज CSS @font-face में SVG फ़ॉन्ट इस्तेमाल कर सकते हैं?

ज़्यादातर ब्राउज़र में नहीं। Chrome ने 2014 में वर्ज़न 38 में SVG फ़ॉन्ट सपोर्ट हटा दिया था, और Firefox व Internet Explorer में यह कभी आया ही नहीं। वेबसाइट के लिए TTF को TTF से WOFF2 से बदलें।

ड्रॉइंग में पेस्ट करने पर ग्लिफ़ उल्टे क्यों दिखते हैं?

SVG फ़ॉन्ट फ़ॉन्ट के अपने कोऑर्डिनेट सिस्टम का इस्तेमाल करते हैं, जिसमें y अक्ष बेसलाइन से ऊपर की ओर जाता है, जबकि आम SVG ड्रॉइंग में y ऊपर से नीचे की ओर गिना जाता है। पाथ को वर्टिकली पलट दें, जैसे scale(1,-1) ट्रांसफ़ॉर्म से, तो वह सही दिखेगा।

Cricut या लेज़र कटर के लिए टेक्स्ट को SVG पाथ में कैसे बदलें?

TTF इंस्टॉल करें, Inkscape या Illustrator में अपने शब्द टाइप करें और टेक्स्ट को आउटलाइन में बदलें: Inkscape में Path › Object to Path, Illustrator में Type › Create Outlines। फिर उसे SVG के रूप में सेव करें। SVG फ़ॉन्ट में हर अक्षर अलग से रखा होता है, शब्दों की तरह सजा हुआ नहीं होता।

क्या SVG फ़ॉन्ट में कर्निंग और लिगेचर बने रहते हैं?

सिर्फ़ आंशिक रूप से। SVG फ़ॉन्ट फ़ॉर्मेट hkern एलिमेंट से केर्निंग जोड़ी और कई अक्षरों वाले ग्लिफ़ रख सकता है, लेकिन स्मॉल कैप्स, अल्टरनेट या कॉन्टेक्स्चुअल नियमों जैसी OpenType फ़ीचर टेबल का कोई विकल्प उसमें नहीं है। ये चाहिए तो TTF अपने पास रखें।

क्या SVG फ़ॉन्ट आउटपुट आइकन फ़ॉन्ट के लिए काम का है?

हाँ, आज इसका मुख्य उपयोग यही है। IcoMoon जैसे आइकन फ़ॉन्ट टूल SVG फ़ॉन्ट इम्पोर्ट करते हैं, जिससे आप पुराने आइकन फ़ॉन्ट से आइकन निकाल सकते हैं, उन्हें एडिट करके नया सेट बना सकते हैं या हर आइकन को अलग SVG के रूप में एक्सपोर्ट कर सकते हैं।