SVG Bézier वक्र: नोड बढ़ाए बिना अनचाहा मोड़ ठीक करें

दो सामान्य घन Bézier खंडों के मिलन पर अनचाहा तीखा मोड़ हटाने के लिए साझा एंकर स्थिर रखें और पास के हैंडल एक सीधी रेखा पर एंकर के विपरीत तरफ़ रखें। उनकी लंबाई अलग होने पर भी वक्र समान स्पर्शरेखा दिशा रख सकते हैं। बराबर प्रतिबिंबित हैंडल अतिरिक्त शर्त लगाते हैं; हर दिखने में सहज जोड़ के लिए वे ज़रूरी नहीं हैं।

बदलाव से पहले मूल आकृति देखें। पत्ती की नुकीली नोक, कटाव या अक्षर का कोना जानबूझकर हो सकता है। नीचे का सुधार शुरुआत, जोड़, अंत और खंड संख्या स्थिर रखते हुए एक अवांछित दिशा बदलाव ठीक करता है।

जोड़ नियंत्रित करने वाले दो हैंडल खोजें

घन SVG कमांड में दो नियंत्रण बिंदु और अंतिम बिंदु हैं:

C firstControlX firstControlY secondControlX secondControlY endX endY

खंड वर्तमान बिंदु से शुरू होता है। पहला नियंत्रण बिंदु वहाँ से निकलने की दिशा और दूसरा अंत तक पहुँचने की दिशा बताता है। MDN का पाथ ट्यूटोरियल वे नियंत्रण बिंदु और घन लिखावट दिखाता है। छोटे अक्षर वाली कमांड के निर्देशांक जोड़ों में हैंडल बदलने से पहले आधार समझने के लिए SVG सापेक्ष पाथ कमांड देखें।

साझा एंकर पर पिछले खंड का अंतिम और अगले खंड का पहला नियंत्रण बिंदु देखें। हैंडल अलग रेखाओं में हों तो जोड़ दिशा बदलता है। पास एक और नोड जोड़ने से वह संबंध अपने-आप ठीक नहीं होता।

मूल दो खंड वाला उदाहरण सुधारें

पूरा SVG join-example.svg सेव करके ब्राउज़र में खोलें। यह (150, 100) पर जानबूझकर तीखे मोड़ वाला मौलिक घुमावदार चिह्न है।

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

आने वाला नियंत्रण बिंदु (100, 100) जोड़ के सीधे बाएँ है। निकलने वाला (170, 50) उसके ऊपर और दाएँ है। वक्र क्षैतिज आता और अलग दिशा में निकलता है।

केवल दूसरे खंड का पहला नियंत्रण बिंदु (175, 100) करें:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

दोनों पास के हैंडल अब जोड़ से जाने वाली क्षैतिज रेखा पर हैं। आने वाला 50 इकाइयाँ लंबा और निकलने वाला 25 है। अलग लंबाई होने पर भी स्पर्शरेखा दिशा समान है।

प्रतिबिंबित जोड़े के लिए वह बिंदु इसके बजाय (200, 100) करें। दोनों हैंडल फिर साझा एंकर से 50 इकाइयाँ जाते हैं। इससे असमान हैंडल सुधार से अधिक दूसरे खंड की आकृति बदलती है, इसलिए दोनों की इच्छित सीमा से तुलना करें।

हर रूप में दो घन खंड और वक्र पर तीन एंकर हैं: शुरुआत, जोड़ और अंत। नियंत्रण बिंदु अलग निर्देशांक हैं। तुलना मौलिक ब्राउज़र रेंडरिंग है, ट्रेस किया PerfectVector परिणाम या संपादक के नोड टूल का स्क्रीनशॉट नहीं।

दिशा और हैंडल लंबाई अलग जाँचें

जोड़ J पर खत्म होते घन वक्र का अंतिम नियंत्रण बिंदु A हो तो अंत का अवकलज 3 × (J − A) है। J से शुरू अगले घन वक्र का पहला नियंत्रण बिंदु B हो तो शुरुआती अवकलज 3 × (B − J) है।

हमारे उदाहरण में आने वाला अवकलज हर पैनल में (150, 0) है:

समान स्पर्शरेखा दिशाओं को G1 निरंतरता कहते हैं। प्रथम अवकलज मिलने को C1 निरंतरता कहते हैं, इन दोनों घन वक्रों के लिए सामान्य शून्य से एक पैरामीटर अंतराल इस्तेमाल करते हुए। Michigan Tech के Bézier अवकलज नोट्स अंत की ये शर्तें निकालते हैं।

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

दोनों संरेखित उदाहरण जोड़ के आर-पार समान वक्रता की गारंटी नहीं देते। वक्र में स्पर्शरेखा का कोना न हो, फिर भी लोगो की इच्छित आकृति से मेल के लिए उसे बदलना पड़ सकता है। केवल चुना नोड नहीं, पूरा घुमाव देखें।

प्रतिबिंब ही इच्छित आकृति हो तो S इस्तेमाल करें

प्रतिबिंबित रूप अधिक संक्षेप में लिखा जा सकता है:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

यहाँ S पिछले घन वक्र के अंतिम नियंत्रण बिंदु को वर्तमान बिंदु के चारों ओर प्रतिबिंबित करके पहला नियंत्रण बिंदु निकालता है:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

S240 50 270 50 के बाकी जोड़े दूसरा नियंत्रण बिंदु और अंतिम बिंदु देते हैं। यह 50/50 प्रतिबिंबित हैंडल वाला रूप है। वक्र बदले बिना यह 50/25 रूप की जगह नहीं ले सकता।

SVG घन कमांड विनिर्देश प्रतिबिंब नियम को पिछले C, c, S या s तक सीमित करता है। पिछली कमांड रेखा या द्विघात वक्र हो तो अप्रत्यक्ष पहला नियंत्रण बिंदु इसके बजाय वर्तमान बिंदु है।

मसलन:

M30 150 L150 100 S240 50 270 50

रेखा के बाद अंतिम खंड C150 100 240 50 270 50 जैसा चलता है। उसका पहला हैंडल शुरुआत पर सिमटा है। बाकी नियंत्रण ज्यामिति एक रेखा पर न होने से वह फिर भी मुड़ सकता है; रेखा के बाद S सीधा खंड मजबूर नहीं करता।

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

नोड संपादक में वही सुधार करें

प्रति पर काम करें, पाथ चुनें और संदिग्ध जोड़ के आसपास हैंडल दिखाएँ। पुष्टि करें कि एक साझा एंकर है। केवल ऊपर चढ़े दो अलग अंतिम बिंदुओं में हैंडल दिशा बदलने से पहले जुड़ाव ठीक करना पड़ सकता है।

Inkscape की नोड प्रकार मार्गदर्शिका एक रेखा साझा करने वाले सहज नोड और बराबर लंबाई भी रखने वाले सममित नोड अलग बताती है। हर जोड़ सममित करने के बजाय सीमा के अनुसार नोड प्रकार चुनें।

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

पूरे घुमाव में भीड़ वाले एंकर हों तो स्थानीय हैंडल सुधार पर्याप्त नहीं हो सकता। SVG नोड संख्या मार्गदर्शिका सरल करना और SVG संपादन प्रक्रिया व्यापक बदलाव बताती है। दोनों क्रियाओं में जानबूझकर बने कोने बचाएँ।

सुधारी आकृति की स्रोत से तुलना करें

सहज जोड़ एक गुणवत्ता जाँच है। यह ट्रेस लोगो का मूल से मेल साबित नहीं करता। वेक्टर ट्रेस गुणवत्ता जाँच सूची से बाहरी आकृति, खुली जगह और जानबूझकर बने कोनों की तुलना करें।

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

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

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

क्या सहज जोड़ के लिए दोनों Bézier हैंडल बराबर लंबे होने चाहिए? नहीं। अशून्य हैंडल अलग लंबाई रखते हुए समान स्पर्शरेखा दिशा रख सकते हैं। साझा एंकर पर वे एक रेखा में विपरीत तरफ़ होने चाहिए। बराबर प्रतिबिंबित हैंडल यहाँ इस्तेमाल दो घन खंडों के प्रथम अवकलज का मेल भी जोड़ते हैं।

SVG S कमांड मेरा वक्र क्यों बदलती है? S अपना पहला नियंत्रण बिंदु निकालता है। C या S के बाद पिछले घन वक्र का अंतिम नियंत्रण बिंदु प्रतिबिंबित करता है; दूसरी कमांड के बाद वर्तमान बिंदु लेता है। वह निकाला बिंदु आपके इच्छित स्पष्ट नियंत्रण बिंदु से अलग हो सकता है।

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

स्रोत

1. MDN — SVG पाथ — घन नियंत्रण बिंदु और पाथ कमांड लिखावट समझाता है।
2. Michigan Tech — Bézier अवकलज — अंतिम स्पर्शरेखाएँ और वक्र जोड़ने की शर्तें निकालता है।
3. W3C — SVG घन Bézier कमांड — S का प्रतिबिंब नियम और फ़ॉलबैक नियंत्रण बिंदु परिभाषित करता है।
4. Inkscape — नोड प्रकार — तीखे, सहज, सममित और स्वचालित नोड व्यवहार अलग करता है।

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