SVG आर्क फ़्लैग: A कमांड से सही वक्र बनाएँ

SVG A कमांड के दो फ़्लैग चुनते हैं कि शुरुआती और अंतिम बिंदु को कौन-सा चाप जोड़ता है। छोटे रास्ते के लिए large-arc-flag 0 और लंबे के लिए 1 करें। दीर्घवृत्त के चारों ओर दिशा चुनने के लिए sweep-flag 0 या 1 करें। शुरुआती और अंतिम बिंदु तथा त्रिज्याएँ स्थिर रखकर केवल दो अंक बदलें और चारों संभावनाएँ देखें। SVG 2 पाथ विनिर्देश चार चाप का यह चुनाव परिभाषित करता है।

कोड बदलने के बाद घुमावदार लोगो किनारा, बैज छल्ला या इंटरफ़ेस सजावट गलत तरफ़ मुड़े तो यह उपयोगी है। स्रोत PNG हो तो पहले वेक्टराइज़ेशन संपादन योग्य आकृतियाँ दे सकता है; A कमांड अलग, जानबूझकर किया ज्यामिति संपादन है।

A के बाद सात मान पढ़ें

निरपेक्ष चाप कमांड का क्रम है:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx और ry दीर्घवृत्त की त्रिज्याएँ हैं। x-axis-rotation वर्तमान निर्देशांक तंत्र में उसे घुमाता है। दोनों फ़्लैग 0 या 1 हैं। अंत में x y अंतिम बिंदु है। शुरुआत पिछली कमांड, अक्सर M x y, का छोड़ा वर्तमान बिंदु है। छोटा a निरपेक्ष की जगह सापेक्ष अंतिम बिंदु देता है; MDN पाथ ट्यूटोरियल कमांड रूप समझाता है।

मसलन, M70 370 A140 110 0 0 1 280 420 (70, 370) से शुरू होकर 140 और 110 त्रिज्याएँ देता है, दीर्घवृत्त बिना घुमाव रखता है, sweep 1 वाला छोटा रास्ता चुनता और (280, 420) पर खत्म होता है। अंक SVG उपयोगकर्ता निर्देशांक तंत्र में हैं। वे भौतिक प्रिंट आकार की अपने-आप गारंटी नहीं हैं।

चार संभावित चाप देखें

हमने एक SVG फ़ाइल से मौलिक नमूना रेंडर किया। हर पैनल की शुरुआत (70, 370), अंत (280, 420), त्रिज्या 140 110 और घुमाव 0 समान हैं। केवल फ़्लैग बदलते हैं। नारंगी शुरुआत और हरा अंत दिखाता है। यह अपनी पाथ कमांड का ब्राउज़र जैसा रेंडर है, PerfectVector रूपांतरण आउटपुट नहीं।

“ऊपर” और “नीचे” लेबल इस शुरुआत, अंत और निर्देशांक लेआउट के हैं। वे 0 और 1 के सार्वभौमिक अर्थ नहीं। अलग अंतिम बिंदु या ट्रांसफ़ॉर्म समूह दृश्य चाप दूसरी जगह रख सकता है। Sweep फ़्लैग चुने दीर्घवृत्त पर बढ़ते या घटते कोण की दिशा चुनता है; नीचे जाती y अक्ष वाले सामान्य SVG viewBox में sweep 1 अक्सर घड़ी की दिशा में दिखता है। SVG ट्यूटोरियल का इंटरैक्टिव आर्क संपादक बाकी इनपुट स्थिर रखकर दिशा बदलाव देखने के लिए उपयोगी है।

एक पैनल दोहराने के लिए इसे arc.svg सेव करके ब्राउज़र में खोलें:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

ऊपर की तालिका से घुमाव 0 के बाद केवल दो अंक बदलें। साथ में त्रिज्या या अंतिम बिंदु बदलें तो कौन-से बदलाव से रास्ता बदला, पता नहीं चलेगा।

गलत तरफ़ गया वक्र सुधारें

1. खंड खोजें। पाथ के d में पिछला शुरुआती बिंदु, A कमांड और अंतिम बिंदु पहचानें। पाथ में कई चाप खंड हो सकते हैं; केवल गलत वाला बदलें।
2. लंबा या छोटा निर्णय जाँचें। छोटा वक्र अचानक लगभग पूरे दीर्घवृत्त को घेरे तो large-arc-flag 1 से 0 करें। नियोजित छल्ला खंड छोटा जोड़ बने तो 1 आज़माएँ।
3. तरफ़ या चलने की दिशा देखें। सब स्थिर रखकर sweep-flag बदलें। यह अक्सर दोनों सिरों के बिंदुओं के बीच जीवा के दूसरी तरफ़ चाप ले जाता है।
4. पूरी कलाकृति देखें। सुधरा खंड फिर भी पड़ोसी खंड से अजीब कोण पर मिल सकता या viewBox से बाहर जा सकता है। इच्छित प्रदर्शन आकार पर फ़ाइल फिर खोलें, फिर ज़रूरत अनुसार पास की ज्यामिति या कैनवस बदलें।

कोई फ़्लैग जोड़ा इच्छित आकृति न दे तो समस्या संभवतः फ़्लैग नहीं है। त्रिज्याएँ और दोनों सिरों के बिंदु संभावित दीर्घवृत्त तय करते हैं; फ़्लैग उनमें से चुनते हैं। NaN आर्क मार्गदर्शिका त्रिज्या या अंतिम बिंदु से मूल दीर्घवृत्त बदलना दिखाती है।

घुमाव और त्रिज्या की सीमाएँ

rx और ry अलग हों तो x-axis-rotation मायने रखता है: चाप चुनने से पहले दीर्घवृत्त घुमाता है। समान त्रिज्या में वृत्त घुमाने से आउटलाइन नहीं बदलती। तिरछे अंडाकार किनारे वाले लोगो में पहले इच्छित त्रिज्या और घुमाव दें, फिर फ़्लैग चुनें। वरना गलत दीर्घवृत्त की सही तरफ़ चुन सकते हैं।

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

ट्रेस वक्र को शुरुआत मानें, आर्क सूत्र नहीं

रास्टर लोगो में साफ़ गोल किनारा हो सकता है, लेकिन वापस मिला SVG उसे स्पष्ट A के बजाय Bézier खंड और एंकर से बता सकता है। इमेज वेक्टराइज़र दृश्य आकृतियाँ बनाता है; यह ज़रूरी नहीं कि वह डिज़ाइनर के मूल वृत्त का केंद्र, त्रिज्याएँ या आर्क फ़्लैग पहचान सके। मूल वेक्टर हो तो दोबारा ट्रेस के बजाय वही बदलें।

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

काम का यह विभाजन महत्वपूर्ण है: PerfectVector रास्टर स्रोत पाथ में वापस ला सकता है, जबकि सटीक आर्क पैरामीटर सेट करना और जोड़ देखना डिज़ाइन निर्णय है। केवल फ़्लैग बदलने के लिए पहले से साफ़ SVG को PNG बनाकर फिर ट्रेस न करें।

SVG देने से पहले

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

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

SVG में large-arc और sweep फ़्लैग क्या हैं? Large-arc फ़्लैग दो दोनों सिरों के बिंदुओं के बीच छोटा या लंबा संभावित चाप चुनता है। Sweep फ़्लैग दीर्घवृत्त पर खंड की चलने की दिशा चुनता है। जब ज्यामिति में ऊपर बताए गए शून्य त्रिज्या या समान सिरों जैसे विशेष अपवाद न हों, तब दोनों मिलकर चार विकल्पों में से चुनते हैं।

SVG large-arc फ़्लैग बदलने का दृश्य असर क्यों नहीं? देखें कि दोनों सिरों के बिंदु दीर्घवृत्त पर एक-दूसरे के विपरीत तो नहीं, जिससे दोनों रास्ते आधे चक्कर हैं। समान अंतिम बिंदु, शून्य त्रिज्या या बिंदु जोड़ने को रेंडरर की बदली त्रिज्या भी देखें। एक बार में एक पैरामीटर बदलकर रेंडर पाथ तुलना करें।

क्या इमेज वेक्टराइज़ेशन मेरी मूल आर्क कमांड अपने-आप वापस ला सकता है? ऐसा न मानें। ट्रेसर रास्टर से संपादन योग्य वेक्टर आकृतियाँ दे सकता है, लेकिन परिणाम Bézier वक्र या कई एंकर इस्तेमाल कर सकता है। मूल ज्यामिति चाहिए तो वेक्टर संपादक में सटीक वृत्त या दीर्घवृत्त फिर बनाएँ।

स्रोत

1. W3C — SVG 2 पाथ — आर्क लिखावट, फ़्लैग संयोजन और पाथ ज्यामिति।
2. W3C — SVG 2 कार्यान्वयन नोट्स — त्रिज्या सुधार और विशेष चाप मामले सँभालना।
3. MDN — SVG पाथ — निरपेक्ष तथा सापेक्ष पाथ कमांड और आर्क ट्यूटोरियल।
4. SVG Tutorial — आर्क — त्रिज्या, घुमाव और फ़्लैग के इंटरैक्टिव उदाहरण।
5. NaN — SVG पाथ कमांड: आर्क — दीर्घवृत्त फ़िट और फ़्लैग परिणाम का इंटरैक्टिव विवरण।

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