ट्रेस की गई फ़ाइल अंदर से कैसी दिखती है

ट्रेसर नतीजे को ऑब्जेक्ट के हिसाब से ग्रुप करता है: सबसे पहले बैकग्राउंड का एक <g> (अगर इमेज में बैकग्राउंड है), फिर हर अलग ऑब्जेक्ट का एक <g>, हर एक का नाम <title> में (Background, Object 1, Object 2 …)। हर ग्रुप के अंदर हर शेप अपना अलग <path> एलिमेंट है, जिसमें एक fill और एक d एट्रिब्यूट होता है, जो आउटलाइन को move-to, line-to और cubic-curve कमांड के रूप में रखता है। शेप इस हिसाब से नेस्ट होती हैं कि कौन किसे घेरता है: जो शेप दूसरों को घेरती है (जैसे चेहरा, जिसमें आंखें हैं), वह अपना अलग ग्रुप बन जाती है (Part 1.1, Part 1.1.1 …), जिसका पहला पाथ खुद वह शेप होती है, जो अपने अंदर की चीज़ों के नीचे पूरी बनी होती है, ताकि आंख छिपाने पर छेद नहीं, चेहरा दिखे। कुछ पिक्सेल से छोटे धब्बे अपने पैरेंट के अंदर बिना नाम वाले पाथ रहते हैं। इसमें कोई स्ट्रोक और कोई टेक्स्ट एलिमेंट नहीं होता: लोगो का वर्डमार्क एक भरी हुई आउटलाइन है, टाइप किया हुआ टेक्स्ट नहीं। सेटिंग्स में लेयर को रंग के हिसाब से पर रखने पर फ़ाइल में कोई ग्रुप नहीं होता, बल्कि हर रंग का एक <path> होता है।

एक छोटा गोल लैंडस्केप SVG, फिर उसके चारों पाथ अलग-अलग: एक नीली डिस्क, एक क्रीम आसमान, एक गहरा नीला पहाड़, और अपनी परछाईं के साथ एक नारंगी सूरज

हमारे होम पेज का सैंपल SVG (बाएं), फिर उसके चारों पाथ अलग-अलग: हर शेप एक अलग एलिमेंट है, अपने फ़िल के साथ, चुनने, रंग बदलने या डिलीट करने के लिए तैयार।

एडिटर ठीक यही स्ट्रक्चर पढ़ता है, फ़ाइल के अपने साइज़ और कोऑर्डिनेट पर। हर पाथ एक शेप है जिसे आप चुनने के लिए क्लिक कर सकते हैं। लेयर लिस्ट फ़ाइल के सबसे ऊपरी ग्रुप दिखाती है: जिस फ़ाइल की शेप सीधे SVG में हैं (रंग के हिसाब से किया गया ट्रेस), वह एक ही लेयर के रूप में खुलती है, और ऑब्जेक्ट के हिसाब से ग्रुप की गई फ़ाइल हर ग्रुप की एक लेयर के साथ खुलती है, उसी के नाम पर।

ब्राउज़र एडिटर में आसानी से होने वाले काम

  • किसी शेप का रंग बदलें। उसे चुनें और नया फ़िल चुनें। क्योंकि एक पाथ में किसी ऑब्जेक्ट के अंदर उस रंग के सारे हिस्से होते हैं, इसलिए “नीला” बदलने पर उस ऑब्जेक्ट के सारे नीले हिस्से एक साथ बदल जाते हैं; अगर उनमें से दो को अलग रखना है, तो यह डेस्कटॉप एडिटर में अलग करने का काम है।
  • खिसकाएं और स्केल करें। खिसकाने के लिए खींचें, साइज़ बदलने के लिए हैंडल इस्तेमाल करें। वेक्टर को स्केल करने से वह कभी धुंधला नहीं होता, इसलिए एक ही फ़ाइल से पेज हेडर के साइज़ का वर्ज़न और favicon वाला दूसरा वर्ज़न बनाएं।
  • अलग-अलग पॉइंट खिसकाएं। कोई शेप चुनें और पॉइंट टूल (N) पर जाएं: ट्रेस किए गए कर्व के हर एंकर पॉइंट पर एक हैंडल आ जाता है जिसे आप खींच सकते हैं, और उसके कर्व हैंडल पास के हिस्सों को मोड़ते हैं। ब्राउज़र छोड़े बिना किसी टेढ़ेपन को ठीक करने या एक किनारे को सीधा करने का यही तरीका है।
  • शेप अलाइन करें और बराबर दूरी पर रखें। कई शेप चुनें और उनके किनारों या बीच को एक-दूसरे के हिसाब से, या आर्टवर्क के हिसाब से अलाइन करें (एक अकेली शेप हमेशा आर्टवर्क के हिसाब से अलाइन होती है); तीन या ज़्यादा चुनने पर डिस्ट्रिब्यूट उन्हें बराबर गैप पर रख देता है।
  • जोड़ें, घटाएं, इंटरसेक्ट करें। दो या ज़्यादा शेप चुनें और शेप मिलाएं इस्तेमाल करें: यूनियन उन्हें जोड़कर एक आउटलाइन बनाता है, सबट्रैक्ट ऊपर वाली शेप को सबसे नीचे वाली में से काट देता है, इंटरसेक्ट सिर्फ़ ओवरलैप रखता है, एक्सक्लूड वह रखता है जो ओवरलैप नहीं होता, और डिवाइड हर ओवरलैप को अलग शेप बना देता है। कर्व, कर्व ही रहते हैं, नतीजे में सबसे नीचे वाली शेप का रंग और लेयर रहती है, और एक अनडू से ओरिजिनल शेप वापस आ जाती हैं। कटिंग से पहले आमतौर पर यही स्टेप होता है: ओवरलैप होते अक्षरों को जोड़कर एक टुकड़ा बनाएं, या नॉकआउट बनाने के लिए कोई शेप घटाएं।
  • ग्रिड पर स्नैप करें। मैग्नेट चालू करें और ग्रिड साइज़ चुनें: फिर आप जो भी खिसकाते, बनाते, साइज़ बदलते या पॉइंट-दर-पॉइंट आकार बदलते हैं, वह ग्रिड पर बैठता है, और चालू रहने तक ग्रिड आर्टवर्क के ऊपर दिखता है। एडिटर यह सेटिंग आपके ब्राउज़र में याद रखता है।
  • शेप दोबारा इस्तेमाल करें और कई फ़ाइलों पर काम करें। किसी सिलेक्शन को मेरे पार्ट्स में रखें (आपके अकाउंट के लिए आपके ब्राउज़र में सेव, फ़ाइल में एक्सपोर्ट हो सकता है) और उसे किसी भी दूसरी ड्रॉइंग में जोड़ें। उनके बीच कॉपी करने के लिए अपनी कोई दूसरी अनलॉक की गई फ़ाइल नए टैब में खोलें: हर टैब की अपनी अनडू हिस्ट्री होती है और वह अपनी फ़ाइल के नए वर्ज़न के रूप में सेव होता है।
  • क्रम बदलें, छिपाएं और लॉक करें। लेयर को छिपाया, लॉक किया (ताकि क्लिक नीचे की शेप पर जाएं), नाम बदला और ऊपर-नीचे किया जा सकता है; किसी लेयर के अंदर Ctrl+D किसी शेप को डुप्लिकेट करता है और ऐरो की उसे थोड़ा खिसकाती हैं।
  • बचे-खुचे हिस्से डिलीट करें। धब्बों वाले पाथ और बचा हुआ बैकग्राउंड रेक्टेंगल एक क्लिक में हट जाते हैं। JPEG ट्रेस के बाद आमतौर पर यही पहला एडिट होता है।
  • एक्सपोर्ट करें। SVG सेव करें, या ट्रांसपेरेंसी के साथ चुनी गई पिक्सेल चौड़ाई पर PNG एक्सपोर्ट करें। अनलॉक किए गए नतीजे को एडिट करने में कोई अतिरिक्त क्रेडिट नहीं लगता।

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

डेस्कटॉप वेक्टर एडिटर वाले काम

कुछ बदलावों के लिए पाथ की ऐसी चीर-फाड़ चाहिए जो ब्राउज़र एडिटर नहीं देता:

  • एक रंग को अलग-अलग ऑब्जेक्ट में बांटना (दो नीली शेप जिन्हें अलग-अलग खिसकाना है): डेस्कटॉप एडिटर में “Break apart”।
  • आउटलाइन को ऑफ़सेट करना (उसे तय दूरी से बड़ा या छोटा करना, जैसे स्टिकर की कटिंग के लिए कंटूर)।
  • फ़िल को सेंटर-लाइन स्ट्रोक में बदलना, पेन प्लॉटर या सिंगल-लाइन एनग्रेविंग के लिए।
  • टेक्स्ट को आउटलाइन में बदलना। ब्राउज़र एडिटर लाइव टेक्स्ट जोड़ता और रखता है, लेकिन उसे पाथ में नहीं बदलता।

Inkscape (फ्री, ओपन सोर्स) ये सब कर लेता है; कमर्शियल एडिटर भी। SVG खोलें, ज़रूरत के हिसाब से “Break apart”, “Outset” या नोड टूल इस्तेमाल करें, और सेव करें। क्योंकि फ़ाइल स्टैंडर्ड पाथ डेटा वाला सादा SVG है, इसलिए उसमें कुछ भी png2svg.art से बंधा नहीं है।

काम का एक सही क्रम

  1. अनलॉक करें और एडिटर में खोलें। भटकी हुई शेप डिलीट करें, साफ़ दिखने वाली रंग की गलतियां ठीक करें, टेढ़े किनारे को पॉइंट-दर-पॉइंट स्मूद करें, ऊपर-नीचे का क्रम जांचें।
  2. शेप मिलाएं से शेप जोड़ें या काटें, और जो एक लाइन में होना चाहिए उसे अलाइन करें।
  3. SVG सेव करें। अगर साइज़ मायने रखता है तो इसे ऑप्टिमाइज़र से गुज़ारें (मेटाडेटा हटाना और कोऑर्डिनेट राउंड करना; पहले/बाद का बताया गया साइज़ देखें)।
  4. अगर काम में ज़रूरत हो, तो डेस्कटॉप एडिटर में ऑफ़सेट करें या तोड़कर अलग करें।
  5. अनलॉक किए गए नतीजे को अपनी फ़ाइलों में रहने दें: जब तक वह सेव है, उसे दोबारा डाउनलोड करना फ्री है, और रखने की अवधि के अंदर आप उसे कभी भी एडिटर में फिर से खोल सकते हैं।

ध्यान रखने वाली सीमाएं

  • एडिटर ग्रेडिएंट नहीं जोड़ सकता; फ़िल ठोस रंग होते हैं या कुछ नहीं। स्ट्रोक (रंग और चौड़ाई) जोड़े जा सकते हैं, और फ़ाइल में पहले से मौजूद ग्रेडिएंट, स्ट्रोक और लाइव टेक्स्ट बने रहते हैं। जो कुछ एडिटर नहीं रख सकता, उसकी लिस्ट सेव करने से पहले दिखाई जाती है।
  • बहुत बड़े ट्रेस (किसी डिटेल वाले इलस्ट्रेशन से बने हज़ारों पाथ) किसी भी ब्राउज़र में धीमे चलते हैं; एडिट करने से पहले कम रंगों के साथ ट्रेस को सिंपल करें।
  • एक्सपोर्ट किए गए PNG आपके चुने साइज़ पर रास्टर होते हैं — जितना सबसे बड़ा साइज़ चाहिए उस पर एक्सपोर्ट करें, या SVG ही इस्तेमाल करते रहें।