Hyvector – तेज़ और आधुनिक SVG एडिटर

• Hyvector एक वेब-आधारित एडिटर है, जो तेज़ और आधुनिक तरीके से SVG (Scalable Vector Graphics) इमेज को कुशलतापूर्वक एडिट करने देता है
• इसे JavaScript सपोर्ट की आवश्यकता होती है, और सही तरह से काम करने के लिए इसे सक्षम करना होगा
• जटिल इंस्टॉलेशन या कॉन्फ़िगरेशन के बिना इसे तुरंत ब्राउज़र में एक्सेस किया जा सकता है
• यह दमदार परफ़ॉर्मेंस और आधुनिक डिज़ाइन को मिलाकर सहज यूज़र अनुभव प्रदान करता है
• यह टेक्स्ट या कोड-लेवल SVG एडिटिंग नहीं, बल्कि विज़ुअल इंटरफ़ेस के ज़रिए सुविधाजनक एडिटिंग वातावरण प्रदान करता है

प्रमुख फायदे और महत्व

• ओपन सोर्स और कमर्शियल SVG एडिटरों की तुलना में यह तेज़ रिस्पॉन्स स्पीड और आधुनिक UI देता है
• वेब-आधारित होने के कारण इसे ऑपरेटिंग सिस्टम से स्वतंत्र रूप से कहीं से भी एक्सेस किया जा सकता है
• यह डिज़ाइनर और डेवलपर, दोनों के लिए प्रभावी वेक्टर इमेज कार्य वातावरण प्रदान करता है
• अलग से प्लगइन या अतिरिक्त प्रोग्राम इंस्टॉल करने की झंझट के बिना इसे तुरंत इस्तेमाल किया जा सकता है
• सहज एडिटिंग टूल्स की मदद से SVG रिसोर्स का आसानी से निर्माण और संशोधन किया जा सकता है

[GN⁺]

Hacker News राय

• मैं एक C++ SVG rendering library को side project के रूप में बना रहा हूँ और कभी कोई अच्छा SVG editor नहीं मिला, इसलिए ज़्यादातर Illustrator इस्तेमाल करता था और फिर result markup को साफ़ करता था, या text-based editor svgviewer.dev का उपयोग करता था। तुम्हारा UX बहुत polished है और यह भी प्रभावशाली है कि यह उन दूसरे tools से अधिक features पहले से support करता है जिन्हें मैंने देखा है। मेरे प्रोजेक्ट donner में भी web-based code editor prototype है। SVG एक ऐसा क्षेत्र रहा है जिसकी क्षमता बहुत बड़ी है, लेकिन tools की सीमाओं ने उसे रोके रखा था, इसलिए innovation होते देख खुशी हुई
  • Inkscape में ऐसी क्या समस्या है, यह जानने की जिज्ञासा है। कुछ bugs हैं, लेकिन कुल मिलाकर यह ठीक काम करता हुआ लगता है
• शुरुआत अच्छी लगती है, लेकिन कुछ साफ़ तौर पर missing features हैं: node tool edit करते समय start/end nodes को आसानी से snap होकर जुड़ जाना चाहिए, और खासकर pencil tool से draw करते समय snap distance ज़्यादा होना अच्छा रहेगा। Wick Editor style transform और distort tools mobile-friendly होंगे। अगर polygon में corner rounding काम नहीं करता, तो उस feature को छिपा देना या disable कर देना बेहतर होगा
  • मैं सच में ऐसी feedback चाहता था, धन्यवाद
• high-level control मिलना सच में अच्छा लगा, जैसे path reverse जैसी चीज़ों पर भी control है, भले ही बदलाव visual रूप से साफ़ न दिखे। लेकिन reverse लागू हुआ या नहीं, यह समझना मुश्किल है, इसलिए feedback होना अच्छा रहेगा। selection copy करने पर इस्तेमाल हुए सभी fonts base64 के रूप में SVG में embed हो जाते हैं, जिससे file बहुत बड़ी हो जाती है। क्या तुम SVG के साथ 1:1 mapping पर टिके रहना चाहते हो, या abstraction पर भी विचार है? मैं अभी भी Figma का उपयोग Vector Networks feature की वजह से करता हूँ। भले ही उसके लिए valid path data में internal conversion चाहिए होगा, लेकिन वह बहुत उपयोगी होगा। तकनीकी रूप से यह देखकर हैरानी हुई कि तुमने SVG rendering approach अपनाई है, मुझे लगा था यह canvas-based होगा। हाल में मैंने SVG से 3D objects render करके देखा था और जल्दी ही performance issues मिले, लेकिन कारण अब तक नहीं मिला। क्या तुमने पुराने devices पर stress test किया है?
  • Vector Networks (मैं इसे path graph कहता हूँ) दरअसल वही intermediate structure निकला जो मेरे पास boolean path operations के लिए पहले से था, यह बात मुझे कुछ समय तक पता ही नहीं थी। हाल तक मैं Vector Networks को लेकर skeptical था, लेकिन आजकल AI-generated images बढ़ने के साथ लगा कि यह bitmap vectorization output के रूप में काफ़ी शानदार हो सकता है। मैं इसे जोड़ना चाहता हूँ, लेकिन priority में इससे भी ज़्यादा urgent काम पहाड़ की तरह पड़े हैं। मैं stress testing जारी रखूँगा, और मैंने इसे 100 euro वाले बेहद पुराने slow Android tablet पर भी चलाकर देखा है। Hacker News पर पोस्ट काफ़ी impulsively कर दी थी, और मुझे थोड़ा और testing कर लेना चाहिए था। पहले मैं पुराने ThinkPad machines पर performance problems तुरंत महसूस करने के लिए test करता था, लेकिन IDEs इतने भारी हो गए हैं कि अब यह मुश्किल है। फिर भी मैं पुराने devices संभालकर रखता हूँ ताकि देख सकूँ कि चीज़ें ठीक चल रही हैं या नहीं। comments में आई सभी suggestions को मैं issue बनाऊँगा। इतनी उपयोगी feedback की बाढ़ देखकर हैरान हूँ; मुझे तो सिर्फ 5 upvotes और लगभग 2 comments की उम्मीद थी। SVG rendering approach इसलिए चुनी क्योंकि मैं चाहता था कि saved SVG file और rendering बिल्कुल एक जैसी दिखें। Overlay के लिए Canvas या WebGL पर भी सोचा था, लेकिन अभी ज़्यादातर images पर यह काफ़ी तेज़ चलता है
• लगता है, काश KDE का Karbon ऐसा intuitive और fast SVG editing tool बन पाता। खासकर SVG Path Editor वाली capabilities की बहुत ज़रूरत है, जैसे path coordinates को relative values में बदलना, path के अंदर curves और lines को अलग-अलग edit करना वगैरह। लेकिन अभी तक यह किसी और editor में नहीं मिला। और हाँ, यह बहुत बड़ा काम है, फिर भी अगर animation features जुड़ जाएँ तो बहुत अच्छा होगा
  • SVG Path Editor नाम के कई projects हैं, लेकिन यहाँ जिस yqnn.github.io project का ज़िक्र हुआ है, वह अब तक मेरे इस्तेमाल किए गए tools में सबसे advanced और usable लगा
• मैं सच में चाहता हूँ कि यह project सफल हो। first-time user experience के लिए एक सुझाव है: शुरू करते ही एक बना-बनाया 'खाली unnamed document' मिलना चाहिए ताकि लोग तुरंत अभ्यास कर सकें, और उदाहरण के लिए Bezier pencil जैसा कोई मज़ेदार tool default में selected हो। मैंने कई बार click किया, फिर समझ आया कि document ही नहीं है, उसके बाद नया document बनाया और tool बदलकर इस्तेमाल किया, लेकिन ज़्यादातर users यहीं अटक जाएँगे। canvas का default size भी थोड़ा बड़ा होना चाहिए, जैसे 512 या 500 square। नई चीज़ें आज़माते समय अगर 10-20 seconds में मज़ा न आए तो लोग तुरंत निकल जाते हैं। उसी समय के भीतर उन्हें engage करना पड़ता है। कुल मिलाकर बहुत बढ़िया बना है
  • सहमत हूँ। मैंने तुरंत pencil पर click करके कुछ scribble करने की कोशिश की, लेकिन कुछ नहीं हुआ, तो निराशा हुई। नया document बनाने के बाद भी pencil ने काम नहीं किया। आखिर तक मैं समझ ही नहीं पाया कि इसे इस्तेमाल कैसे करना है। Bezier tool से nodes तो जोड़ पाया, लेकिन दूसरे tools से manipulate नहीं कर सका। लगता है Chrome/Windows पर drag functionality पूरी तरह काम नहीं कर रही
• मुझे समझ ही नहीं आया कि इसे इस्तेमाल कैसे करना है। एक line segment तो बना लिया, लेकिन उसे move या resize कैसे करें यह नहीं मिला, drag handles दिखा सका था। rectangle या circle जैसी दूसरी shapes बनाने का कोई तरीका भी समझ नहीं आया। buttons को लगभग 20 बार दबाया, लेकिन कुछ नहीं हुआ
  • main toolbar में text tool और image tool के बीच जो है, वही shape tool है। उसके पहले दो options rectangle और circle हैं
  • मुझे लगता है, ऐसे apps में इस्तेमाल के hints बहुत भरपूर होने चाहिए, और उन्हें बंद करने का option भी होना चाहिए
• इस tool को test करते हुए बहुत मज़ा आया, यह बेहद fast और intuitive लगा। खासकर zoom/pan performance पुराने tools की तुलना में कहीं बेहतर थी। एक सवाल है: क्या generative workflows के लिए plugin या API layer जोड़ने की कोई योजना है? SVG editing में scripting या AI-based visual effects मिलाकर काम करने वाले users बढ़ रहे हैं, इसलिए अगर Hyvector में mini-language या JS bridge जैसी programmable layer हो, तो यह बहुत अधिक शक्तिशाली हो जाएगा। launch के लिए बधाई, और creative vector work की barrier कम करने वाले नए tools हमेशा खुशी देते हैं
  • धन्यवाद। हाल में अपने day job के दूसरे projects में मैंने थोड़ा-थोड़ा AI इस्तेमाल करना शुरू किया है, और मैं सहमत हूँ कि AI generation integration की अनुमति देना महत्वपूर्ण है। अगर तुम थोड़ा और विस्तार से बताओ कि AI और vector editor को कैसे जोड़ना चाहते हो, तो अच्छा होगा। मैंने AI-generated bitmaps को vectorize और colorize करने का उपयोग सोचा है, लेकिन उसके अलावा अभी ज़्यादा नहीं सोचा
• यह UX मुझे सच में बहुत पसंद आया। Wacom support वाले Android tablet पर usability बहुत अच्छी थी। spline editing का तरीका, यानी individual handles की जगह line पर किसी भी बिंदु को drag करके adjust करना, यह idea कहाँ से आया पता नहीं, लेकिन वाकई अच्छा है। बस एक कमी लगी कि बाईं तरफ़ के tree में touch scrolling काम नहीं करती। इसके अलावा सब बहुत smooth है। क्या keyboard shortcuts implemented हैं?
  • curve dragging को implement करने का तरीका हैरान करने वाला सरल था। बहुत पहले एक Google forum discussion से implementation idea मिला था। Shift दबाकर drag करने पर handle direction भी बनी रहती है। बाईं तरफ़ का tree हर device पर perfectly संभालना मुश्किल है। उसमें click, touch click, drag-and-drop, swipe scroll, touch scroll सब support करना है, और सैकड़ों elements भी अच्छे से दिखाने हैं, इसलिए यह जटिल है। अभी iOS पर swipe scroll या थोड़ी stutter जैसी दिक्कतें हैं, उन्हें list में दर्ज कर लिया है। keyboard shortcuts mobile को छोड़कर desktop पर menu bar खोलने पर items के दाईं ओर दिखते हैं
• खुद इस्तेमाल करके लगा कि पहली शुरुआत बहुत अच्छी है। UX खास तौर पर पसंद आया: pen tool intuitive है, object panel में हर layer का preview दिखता है, clipping path अच्छी तरह integrated है, और text-to-outline conversion व boolean operations जैसी दुर्लभ features भी मिलती हैं। critical feedback के तौर पर: tools के बीच switch करने के shortcuts होने चाहिए और tooltips में भी दिखने चाहिए; Ctrl +/- से zoom in/out, space+drag से pan support होना चाहिए; group edit करते समय group के अंदर individual objects चुनना कठिन है, double-click करने पर सीधे node tool में चला जाता है, लेकिन group isolation mode होना चाहिए; pen tool इस्तेमाल करते समय पिछले point के control points adjust किए जा सकें; pen mode में undo path point addition को undo करने के बजाय उससे पहले के action पर चला जाता है, जो असुविधाजनक है; text support सीमित है और @font-face जैसे embedded fonts नहीं दिखते; filter support भी ऐसा ही है; SVG rendering independent तरीके से हो रही लगती है, इसलिए शायद browser की तरह सही draw नहीं हो रही
  • अच्छी feedback के लिए धन्यवाद। आने वाले कुछ दिनों में मुझे बहुत सारे issues लिखने पड़ेंगे। सच कहूँ तो Hacker News पर पोस्ट करते समय सिर्फ 5 upvotes और 2 comments की उम्मीद थी, लेकिन response बहुत बड़ा रहा। group के अंदर individual objects को Ctrl + click से select किया जा सकता है। selection logic अभी उतनी साफ़ नहीं है और मैं इसे और बेहतर करूँगा, लेकिन फिलहाल यह तरीका मदद करेगा
• इसमें बहुत potential दिखा। quick feedback के तौर पर, canvas के ऊपर toolbar आने से focus टूटता है और working space कम हो जाती है। सामान्य toolbar placement या canvas के नीचे रखना बेहतर होगा। या फिर toolbar को move और collapse करने योग्य बना देना चाहिए
  • धन्यवाद। toolbar की design और position मैं पहले ही कई बार बदल चुका हूँ। window संकरी होने पर auto-collapse feature पहले से है, और collapse button जोड़ना बहुत आसान होगा