आपकी ट्रेस की हुई SVG, PNG से बड़ी क्यों निकलती है
ट्रेसिंग किसी छवि को वापस वेक्टर नहीं बनाती। वह असल में क्या करती है, फ़ोटो दस गुना बड़ी क्यों होती हैं, और यह कब सचमुच काम आती है।
आप PNG को SVG में ट्रेस करते हैं, यह उम्मीद लेकर कि छोटी, साफ़ और असीम रूप से ज़ूम होने वाली फ़ाइल मिलेगी। मिलती है कई गुना बड़ी कोई चीज़, जो थोड़ी ग़लत भी दिखती है। कुछ बिगड़ा नहीं है - ट्रेसिंग यही करती है, और इसकी वजह समझने में दो मिनट लगते हैं जो बहुत सारी झुंझलाहट बचा देते हैं।
ट्रेसिंग, पिक्सेल में बदलने का उल्टा नहीं है#
पहली बात साफ़ कर लें: PNG को SVG में बदलना उस वेक्टर फ़ाइल को वापस नहीं लाता जिससे वह बनी थी। वह फ़ाइल, अगर कभी थी भी, अब नहीं है। पिक्सेल में बदलना आकृतियों को फेंक देता है और रंगों की एक जाली रख लेता है, और कोई भी चीज़ उन्हें दोबारा नहीं बना सकती।
ट्रेसर इसके बजाय पिक्सेलों से शुरू करके नई आकृतियाँ गढ़ता है। वह पिक्सेलों को मिलते-जुलते रंग के क्षेत्रों में बाँटता है, हर क्षेत्र के चारों ओर एक दीवार खींचता है और उसे भरता है। नतीजा तस्वीर के क़रीब पहुँचता है। यह एक नया चित्र है जो पुराने जैसा दिखता है।
यही अंतर आगे की हर बात समझा देता है।
फ़ाइल बड़ी क्यों हो जाती है#
PNG और SVG बिल्कुल अलग-अलग चीज़ों की क़ीमत चुकाते हैं।
PNG पिक्सेलों की क़ीमत चुकाता है, वह भी सस्ते में। वह पैटर्न ढूँढकर दबाता है - एक जैसे पिक्सेलों की लड़ी लगभग मुफ़्त पड़ती है, मुलायम ग्रेडिएंट थोड़ा और।
SVG सीमाओं की क़ीमत चुकाता है, वह भी महँगी। हर क्षेत्र की दीवार को निर्देशांक के रूप में लिखना पड़ता है। एक सपाट आकृति मुट्ठी भर संख्याएँ हैं। हज़ार छोटे क्षेत्र, हज़ार दीवारें हैं।
तो SVG की लागत इस बात से बढ़ती है कि छवि में कितने अलग-अलग क्षेत्र हैं, न कि कितने पिक्सेल। एक लोगो में क़रीब छह होते हैं। एक फ़ोटो में दसियों हज़ार।
यही रिश्ता, तीन असली फ़ाइलों पर मापा गया:
| स्रोत | PNG/JPG के रूप में | SVG में ट्रेस करने पर | पथ |
|---|---|---|---|
| काला लोगो, 400 x 400 | 7.7 KB | 1.9 KB | 4 |
| सपाट 6-रंगी चित्र | 6.3 KB | 16.2 KB | 120 |
| फ़ोटो, 320 x 480 | 14.1 KB | 151.5 KB | 607 |
लोगो छोटा हो जाता है - चार पथ उसे पूरी तरह बता देते हैं, और अब वह किसी भी आकार में खुलता है। चित्र क़रीब तीन गुना होता है। फ़ोटो अपने मूल से दस गुना से भी ज़्यादा फूल जाती है, और दिखती भी बदतर है।
फ़ोटो के लिए कोई उम्मीद क्यों नहीं#
फ़ोटो में सपाट क्षेत्र होते ही नहीं। उसका हर हिस्सा एक मुलायम ढलान है - त्वचा के रंग, आसमान, छाया, धुँधलापन। ट्रेसर को यह सब सपाट आकृतियों से बताना पड़ता है, यानी या तो कुछ बड़ी आकृतियाँ (और तब वह पोस्टर जैसी दिखती है) या हज़ारों नन्ही आकृतियाँ (और तब फ़ाइल फट पड़ती है)। ऐसी कोई सेटिंग नहीं जो इस चुनाव से बचा ले।
दूसरी ओर JPEG ठीक इसी काम में असाधारण रूप से अच्छा है। वह ऐसी बारीकी फेंककर, जिसे कोई नहीं देखता, मुलायम रंग-परिवर्तन को सस्ते में सहेज लेता है। SVG से यह माँगना कि वह इसमें टक्कर दे, ग़लत प्रारूप से ठीक वही काम माँगना है जिसमें वह सबसे कमज़ोर है।
यह फ़र्क़ पहले से आसानी से पकड़ा जा सकता है, क्योंकि फ़ोटो और चित्र इस मामले में बहुत अलग होते हैं कि उनमें कितने अलग रंग हैं। हमारी तीन सींखचा फ़ाइलों पर मापा गया: काले लोगो में 244 अलग रंग थे, सपाट चित्र में 150, और फ़ोटो में 59,629। तीन कोटि का अंतर। हमारे PNG से SVG और JPG से SVG टूल इन्हें गिनते हैं और आपके इंतज़ार करने से पहले ही चेता देते हैं।
असली नियंत्रण रंगों की संख्या है#
अगर आप सिर्फ़ एक सेटिंग बदलें, तो यही बदलिए। उसी सपाट चित्र पर:
| रंग | आउटपुट | पथ |
|---|---|---|
| 2 | 622 B | 2 |
| 6 | 18.9 KB | 141 |
| 8 | 16.2 KB | 120 |
| 16 | 24.2 KB | 185 |
दो रंगों ने सोलह के मुक़ाबले तीस गुना छोटी फ़ाइल बनाई। और उस पंक्ति पर ध्यान दीजिए जो एकदिश नहीं है: छह रंगों ने आठ से बड़ी फ़ाइल दी, क्योंकि थोड़े ख़राब पैलेट ने एक क्षेत्र को कई हिस्सों में बाँट दिया। परिमाणन सुथरा नहीं होता, और यह एक और वजह है कि "जितना ज़्यादा उतना बेहतर" मानने के बजाय दो-चार सेटिंग आज़माकर देख लेना चाहिए।
नीचे से शुरू कीजिए। तभी तक बढ़ाइए जब तक पूर्वावलोकन साफ़-साफ़ बेहतर हो रहा हो - जो ज़्यादातर सपाट चित्रों में आपकी उम्मीद से काफ़ी पहले रुक जाता है।
ट्रेसिंग सचमुच कब काम करती है#
तब, जब स्रोत वाक़ई सपाट आकृतियों से बना हो:
- लोगो और वर्डमार्क, ख़ासकर सफ़ेद पर काले
- रेखा-चित्र और स्कैन किए हुए चित्र
- हस्ताक्षर और मुहरें
- कटिंग मशीन चलाने वाली हर चीज़ - विनाइल कटर, लेज़र एनग्रेवर और कढ़ाई सॉफ़्टवेयर को पिक्सेल नहीं, पथ चाहिए, इसलिए यहाँ ट्रेसिंग कोई सुधार नहीं बल्कि अंदर जाने का इकलौता रास्ता है
- हाथ से संपादन के लिए एक कच्चा शुरुआती बिंदु, Illustrator या Inkscape में
और यह फ़ोटो, ग्रेडिएंट, गिरती छाया, मुलायम फ़ोकस या लिखावट के स्क्रीनशॉट के लिए काम नहीं करती। ये सब मुलायम बदलावों पर टिके हैं, और सपाट क्षेत्र किसी मुलायम बदलाव को या तो बंधों के साथ दिखा सकते हैं या फिर आकृतियों की भारी भीड़ के साथ।
ख़राब स्रोत को सँभालने वाली दो चीज़ें#
अगर आप कुछ स्कैन किया हुआ या JPEG में दबा हुआ ट्रेस कर रहे हैं, तो अधिकांश काम दो सेटिंग कर देती हैं:
कम-से-कम क्षेत्रफल बढ़ाइए। JPEG संपीड़न उस जगह भी हल्के चौकोर धब्बे छोड़ता है जो देखने में सादा सफ़ेद काग़ज़ लगती है, और ट्रेसर उनमें से हर एक को ईमानदारी से घेर लेता है। 16 या 32 पिक्सेल से छोटे क्षेत्रों को छोड़ देने से पथों की संख्या आम तौर पर तेज़ी से घटती है, बिना कोई दिखने वाला नुक़सान।
ट्रेस करने से पहले कंट्रास्ट बढ़ाइए। अगर स्याही ठीक से काली और काग़ज़ ठीक से सफ़ेद हो, तो बीच के धूसर रंग कम होते हैं, यानी कम क्षेत्र, कम पथ और छोटी फ़ाइल। किसी भी इमेज एडिटर में पाँच सेकंड, बाद में ट्रेसर की सेटिंग से जूझने के हर प्रयास पर भारी पड़ते हैं।
संक्षेप में#
- ट्रेसिंग पिक्सेलों से नई आकृतियाँ गढ़ती है। यह मूल वेक्टर फ़ाइल वापस नहीं लाती।
- SVG का आकार पिक्सेल से नहीं, रंग-क्षेत्रों की संख्या से बढ़ता है - इसीलिए लोगो सिकुड़ते हैं और फ़ोटो फट पड़ती हैं।
- SVG में ट्रेस की गई फ़ोटो आम तौर पर दस गुना बड़ी और बदतर दिखने वाली होती है। मूल फ़ाइल ही रखिए।
- असली सेटिंग रंगों की संख्या है। 2 से शुरू कीजिए और ऊपर बढ़िए।
- सपाट चित्रों पर नतीजा सचमुच शानदार है: हमारा सींखचा लोगो 7.7 KB से 1.9 KB और चार पथों पर आ गया, और अब किसी भी आकार में खुलता है।
टूल आज़माएँ
मुफ़्त, निजी और तुरंत। सब कुछ आपके ब्राउज़र में चलता है।
