SVG माइटर नोक: काटे बिना तीखे कोने ठीक करें

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

परीक्षण करते समय मूल SVG की प्रति रखें। जानबूझकर तीखी नोक वाले लोगो को माइटर बचाना पड़ सकता है, जबकि इंपोर्ट आउटलाइन की अनचाही नोक को सपाट जोड़ चाहिए। पहले तय करें कि कौन-सा कोना बचना चाहिए।

संकरे कोने में लंबी नोक क्यों बनती है

स्ट्रोक पाथ की केंद्र रेखा के दोनों तरफ़ चौड़ाई है। stroke-linejoin="miter" में बाहरी स्ट्रोक किनारे मिलने तक आगे जाते हैं। जितना तीखा मोड़, मिलने का बिंदु उतना दूर हो सकता है। SVG 2 रंगने की परिभाषा के अनुसार SVG की शुरुआती जोड़ शैली miter और शुरुआती stroke-miterlimit 4 है।

सीमा अनुपात है, पिक्सेल या SVG इकाई की दूरी नहीं। माइटर लंबाई को stroke-width से भाग देने का मान सीमा पार करे तो सामान्य miter जोड़ bevel बनता है। बड़ी सीमा लंबी नोक देती है; छोटी सीमा अधिक न्यून कोणों को सपाट करती है। MDN माइटर सीमा संदर्भ कोने के कोण से संबंध और बताता है कि CSS प्रॉपर्टी SVG प्रस्तुति एट्रिब्यूट को ओवरराइड कर सकती है।

एक पाथ, चार दृश्य परिणाम

परीक्षण में हमने d="M130 520 L180 200 L230 520" और 26 इकाई स्ट्रोक वाला खुला कोणीय प्रतीक खंड बनाया। पहले दो पैनल माइटर सीमा 10 देते हैं। दूसरा y=170 पर कसी दृश्य सीमा लगाकर नोक काटता है। तीसरा सीमा 4 देता है, इसलिए यह कोना bevel बनता है। चौथा round देता है। यह उस पाथ और रेंडरर का नियंत्रित उदाहरण है, हर इंपोर्ट SVG के समान कोने की गारंटी नहीं।

लाल टूटा केंद्रीय पाथ चारों पैनल में वही है। यह महत्वपूर्ण है: स्ट्रोक जोड़ बदलने से मूल वेक्टर पाथ फिर बनाए बिना रंगी आउटलाइन सुधर सकती है।

यह लंबी नोक, सपाट जोड़ या कटा सिरा है?

पहली नज़र में कटी नोक जानबूझकर सपाट जोड़ जैसी हो सकती है। ज़ूम करें और देखें कि अंत फ़ाइल सीमा से मिलता है या नहीं। गायब SVG स्ट्रोक की जाँच रंग और क्लिपिंग के दूसरे कारण बताती है; यह परीक्षण माइटर कोना अलग करता है।

गलत चीज़ बदले बिना कोना ठीक करें

1. पाथ और प्रभावी जोड़ खोजें

वेक्टर संपादक में कोना चुनें या SVG टेक्स्ट में stroke, stroke-width, stroke-linejoin और stroke-miterlimit देखें। पाथ के अपने एट्रिब्यूट के साथ पैरेंट समूह और CSS नियम भी देखें। MDN के अनुसार इनलाइन या स्टाइलशीट stroke-miterlimit प्रॉपर्टी उसी तत्व के प्रस्तुति एट्रिब्यूट से ऊपर हो सकती है।

चुना ऑब्जेक्ट संपादन योग्य स्ट्रोक की जगह भरी आउटलाइन हो तो माइटर सेटिंग बदलना बंद करें। उस भराव का पाथ बदलें या पाथ में न बदले गए मूल स्ट्रोक की प्रति पर लौटें। पूरा इंपोर्ट गलत आकार हो तो स्ट्रोक चौड़ाई से सुधारने से पहले ज्ञात आकार का SVG इंपोर्ट परीक्षण चलाएँ।

2. नक़ल पर एक जोड़ सेटिंग बदलें

यांत्रिक सपाट कोना स्वीकार्य हो तो पहले bevel आज़माएँ। डिज़ाइन नरम किनारा दे सके तो round आज़माएँ। सटीक नोक चिह्न का हिस्सा हो तो miter रखें और केवल इच्छित नोक बचाने वाली सीमा चुनें। SVG stroke-linejoin संदर्भ सामान्य जोड़ आकृतियों के अंतर बताता है।

ऊपर के पाथ की छोटी परीक्षण प्रति यह है:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

इस खास कोण पर bevel फ़ॉलबैक देखने के लिए stroke-miterlimit को 4 करें। फिर 10 लौटाएँ और stroke-linejoin को round या bevel करें। अंतिम दोनों जोड़ शैलियों में stroke-miterlimit का मान अप्रासंगिक है। एक कोना खराब हो इसलिए पूरे लोगो में सीमा न घटाएँ; दूसरी नोक जानबूझकर हो सकती हैं।

3. इच्छित नोक को पर्याप्त कैनवस दें

माइटर सही लेकिन किनारे पर गायब हो तो केवल पाथ निर्देशांकों के बजाय रंगे परिणाम के आसपास viewBox बढ़ाएँ या स्थान बदलें। SVG 2 निर्देशांक तंत्र परिभाषा दृश्य आयत समझाती है; स्ट्रोक अपने केंद्रीय पाथ निर्देशांकों से बाहर जा सकता है। भीतर के SVG व्यूपोर्ट और क्लिप पाथ भी देखें। रूट viewBox बढ़ने के बाद भी पैरेंट क्लिप नोक काट सकता है।

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

4. वितरण फ़ाइल फिर खोलें

ब्राउज़र और लक्ष्य संपादक या प्रोडक्शन ऐप में परिणाम देखें। 100% और इच्छित अंतिम आकार पर नोक जाँचें। देने के लिए संपादन योग्य स्ट्रोक की जगह भरी सीमाएँ चाहिए तो मूल रखें, संपादक में वितरण प्रति आउटलाइन करें और नई भरी सीमा देखें। आउटलाइन ज्यामिति बदलती है; यह वापस बदल सकने वाली माइटर सेटिंग नहीं। भराव और आउटलाइन की व्यापक जाँच के लिए SVG रंगने का क्रम मार्गदर्शिका देखें।

जब रास्टर लोगो को पहले नया पाथ चाहिए

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

मूल SVG हो तो स्क्रीनशॉट वेक्टराइज़ करने के बजाय वही फ़ाइल सुधारें। वास्तव में पिक्सेल से कलाकृति फिर बनानी हो तो लोगो वेक्टराइज़ेशन मार्गदर्शिका मदद करती है; यह लेख उपयुक्त संपादन योग्य स्ट्रोक होने के बाद शुरू होता है।

अंतिम कोना जाँच

1. बिना बदली वेक्टर मूल प्रति सेव करें।
2. पुष्टि करें कि कोना संपादन योग्य स्ट्रोक है या भरी सीमा।
3. प्रभावित एक पाथ पर miter, bevel और round तुलना करें।
4. माइटर बचा रहे हों तो सीमा परखें और पूरी रंगी नोक के लिए दृश्य जगह रखें।
5. वास्तविक गंतव्य में SVG फिर खोलकर अंतिम आकार पर देखें।

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

मेरे SVG के तीखे कोनों पर लंबी नोक क्यों हैं? माइटर जोड़ बाहरी स्ट्रोक किनारों को मिलने तक बढ़ाता है। न्यून कोण पर मिलने का बिंदु केंद्रीय पाथ से दूर हो सकता है। नोक अनचाही हो तो माइटर सीमा घटाएँ या bevel अथवा round दें।

stroke-miterlimit घटाने से कोना सपाट क्यों होता है? माइटर लंबाई और स्ट्रोक चौड़ाई का अनुपात सीमा पार करे तो सामान्य माइटर जोड़ bevel बनता है। छोटे मान अधिक कोनों में यह फ़ॉलबैक लगाते हैं। नोक जानबूझकर हो तो ऊँची सीमा रखें, फिर सीमा क्षेत्र देखें।

माइटर सीमा बढ़ाने पर भी SVG नोक क्यों कटती है? ऊँची सीमा नोक लंबी कर सकती है, जबकि viewBox या क्लिप अब भी काटता है। रंगे स्ट्रोक के आसपास दृश्य क्षेत्र बढ़ाएँ या चिह्न खिसकाएँ, फिर गंतव्य में वितरण SVG खोलें।

स्रोत

1. W3C — SVG 2 रंगना — स्ट्रोक जोड़, शुरुआती मान और माइटर फ़ॉलबैक व्यवहार परिभाषित करता है।
2. MDN — stroke-miterlimit — सीमा अनुपात और तीखे कोने के कोणों से संबंध समझाता है।
3. MDN — stroke-linejoin — स्ट्रोक पाथ की सामान्य कोना आकृतियाँ बताता है।
4. MDN — CSS stroke-miterlimit — SVG प्रस्तुति एट्रिब्यूट पर CSS प्रॉपर्टी की प्राथमिकता बताता है।
5. W3C — SVG 2 निर्देशांक तंत्र — सीमा जाँच में इस्तेमाल viewBox और व्यूपोर्ट संबंध तय करता है।

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