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

 (hyvector.com)
3 पॉइंट द्वारा GN⁺ 2025-05-11 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • वेक्टर ग्राफ़िक्स के काम में भारी डेस्कटॉप ऐप खोलने की ज़रूरत बिना, Hyvector ब्राउज़र में कुछ ही सेकंड में SVG को एडिट और एक्सपोर्ट करने का वर्कफ़्लो देता है
  • आइकन में बदलाव, लोगो ड्राफ्ट, और SVG path की सफ़ाई जैसे तेज़ काम अकाउंट बनाए या बड़ा ऐप डाउनलोड किए बिना तुरंत किए जा सकते हैं
  • सारी प्रोसेसिंग लोकल पर ही रहती है, यानी privacy-first तरीका, और इसका लक्ष्य तेज़ शुरुआत व कम मेमोरी उपयोग है
  • द्विदिश टेक्स्ट, जटिल लिपि प्रणालियाँ, और Arabic जैसी जुड़ी हुई लिपियों के लिए cross-format shaping को सपोर्ट करता है
  • एक solo developer ने 5 साल तक इसका मुख्य आधार बनाया, और अब स्थिर core engine पर global colors, dynamic stroke widths, और variable fonts जैसी सुविधाएँ जोड़ी जा रही हैं

इंस्टॉलेशन के बिना SVG एडिटिंग वर्कफ़्लो

  • Hyvector एक SVG और वेक्टर ग्राफ़िक्स एडिटर है जो सीधे ब्राउज़र में चलता है
  • इसका फ़ोकस फ़ाइल को जल्दी खोलने, एडिट करने, और फिर ग्राफ़िक्स एक्सपोर्ट करने वाले वर्कफ़्लो पर है
  • इसे अकाउंट बनाए बिना या बड़ा ऐप डाउनलोड किए बिना इस्तेमाल किया जा सकता है
  • जिन कामों के लिए यह खास तौर पर तेज़ है, वे हैं
    • आइकन में बदलाव
    • लोगो ड्राफ्ट बनाना
    • SVG path की सफ़ाई

हल्का रनटाइम और प्राइवेसी

  • बिना इंस्टॉल किए कहीं से भी चलाया जा सकता है
  • लक्ष्य है तेज़ स्टार्टअप और कम मेमोरी उपयोग
  • सारी प्रोसेसिंग लोकल पर ही रहने वाला privacy-first तरीका अपनाता है

एडिटिंग फीचर और डेवलपमेंट की स्थिति

  • टाइपोग्राफ़ी सपोर्ट

    • पूरा bidirectional text सपोर्ट करता है
    • जटिल लिपि प्रणालियों को संभाल सकता है
    • Arabic जैसी जुड़ी हुई लिपियों के लिए cross-format shaping को सपोर्ट करता है

  • वेक्टर एडिटिंग टूल

    • drag-and-drop स्टाइल का element tree view देता है
    • skew, rotation, और resizing सहित पूरे transform-आधारित नियंत्रण के साथ path को सटीक रूप से नियंत्रित किया जा सकता है
    • शक्तिशाली eraser mode सहित paint brush उपलब्ध है

  • solo developer प्रोजेक्ट

    • शुरुआत में यह एक तेज़ side project था, लेकिन वेक्टर ग्राफ़िक्स की जटिलता के कारण यह 5 साल तक चला
    • मुख्य आधार पूरा हो चुका है और core engine अब स्थिर है
    • अगली सुविधाओं में global colors, dynamic stroke widths, और variable fonts जैसी चीज़ें तैयार की जा रही हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-05-11
Hacker News की राय

  • शानदार। मेरा side project एक C++ SVG rendering library है, और अच्छा SVG editor ढूंढना मुश्किल रहा है
    आम तौर पर Illustrator में काम करके फिर generated markup साफ करना पड़ता है, या https://www.svgviewer.dev/ जैसे text-based editor पर लौटना पड़ता है
    UX काफी polished है, और अभी भी मैंने जो दूसरे tools देखे हैं उनसे ज्यादा features support करता है। संदर्भ के लिए, मेरा project https://github.com/jwmcglynn/donner है, और web-based “editor” (फिलहाल सिर्फ code-based editing संभव है) का prototype https://jwmcglynn.github.io/donner-editor/ पर है
    SVG में potential बहुत है, लेकिन tools कमजोर होने की वजह से यह क्षेत्र प्रभावित रहा है, इसलिए इस space में नए प्रयास देखना अच्छा है

    • Inkscape में क्या समस्या है? Bugs थोड़े हैं, लेकिन उसके अलावा यह काफी अच्छा काम करता है

  • अच्छी शुरुआत है। कुछ साफ features missing लगे
    Node tool को edit करते समय start/end nodes को एक-दूसरे से snap करने की कोशिश करनी चाहिए, और पहली बार बनाते समय, खासकर pencil tool में snap distance ज्यादा रखा जा सकता है
    Editing के लिए node tool की बजाय Wick Editor के Flash/Futurewave SmartSketch-style pull/push deformation जैसा तरीका mobile के लिए कहीं ज्यादा friendly लगेगा
    अगर polygons में corner rounding काम नहीं करती, तो उसे छिपा देना या disable कर देना चाहिए

  • काश KDE का Karbon ऐसा दिखता। यह friendly लेकिन तेज और सक्षम SVG editor है
    अगर संभव हो, तो SVG Path Editor0 में मौजूद features भी शामिल हों तो अच्छा होगा। जैसे absolute coordinates को relative coordinates में बदलना, या हर path की lines और curves को अलग-अलग edit करना—ये features मुझे दूसरे editors में नहीं मिले
    एक feature जो बहुत बढ़िया होगा लेकिन काम बहुत ज्यादा हो सकता है या अलग project बन सकता है, वह है animation

    • “SVG Path Editor” नाम के कई projects हैं, लेकिन उनमें से यह मेरे देखे हुए में सबसे ज्यादा विकसित और उपयोगी है

  • अच्छा दिखता है। आलोचना के लिए नहीं कह रहा, लेकिन मैंने हमेशा सोचा है कि editor में SVG खुद abstraction का गलत स्तर है। हमें SVG editor नहीं, बल्कि vector drawing program चाहिए
    बेशक optimized SVG में render करना चाहिए, लेकिन paths, clip paths जैसे SVG concepts के इर्द-गिर्द UI/UX बनाना end users के लिए friendly नहीं है। Inkscape में मुझे हमेशा यही चीज खटकती रही है
    मेरे हिसाब से सच में powerful feature यह होगा कि Blender के modifiers (array, mirror आदि) जैसी चीजें vector editor में डालकर non-destructive editing संभव की जाए

    • असल में यही इस tool की दिशा है। एक internal object model है, लेकिन फिलहाल SVG से internal model की mapping लगभग 1:1 के करीब है
      पहला exception clip path है, जिसे Hyvector में एक ऐसे path की तरह treat किया जाता है जिसमें stroke और fill होते हैं, और उसके path के बाहर clipped content होता है। SVG में clip path संभालना काफी झंझट भरा और intuitive नहीं है
      अगर development जारी रख पाया, तो path corner rounding, non-destructive boolean operations, variable stroke width, multiple fills, distortion जैसे features आगे आएंगे
      हालांकि export format SVG ही रखना चाहता हूं। यह web के लिए सच में अच्छा है और CSS से style किया जा सकता है। इसलिए effects को वास्तविक SVG के रूप में export हो पाना चाहिए, और कुछ editors की तरह SVG export करते समय fake bitmap को SVG में डालने वाला तरीका avoid करना चाहता हूं। उदाहरण के लिए, conic gradient तब तक नहीं होगा जब तक SVG कभी उसे support न करे
    • Inkscape का LPE बिल्कुल यही है। यह non-destructive path modifier है। Graphite.rs editor कुछ मायनों में non-destructive effects पर और ज्यादा focus करता है

  • मैंने इस icon को edit करके arrow को circle के center में रखना चाहा, लेकिन mask ठीक से पहचाना नहीं गया, सिर्फ काला circle दिखा
    http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
    height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">

    • ऊपर लिखे अनुसार masks और filters अभी support नहीं हैं
      इस icon के लिए mask की बजाय clip path ज्यादा उपयुक्त हो सकता है। अगर वही shape वाला icon बनाना है, तो mask के अंदर के elements लेकर Hyvector में paste करके काम कर सकते हैं

  • बहुत अच्छा। मुझे web-based editors पसंद हैं
    Imported SVG में सभी objects और groups सही preview के साथ साफ दिखाई देते हैं, यह बात पसंद आई
    दो features missing हैं या मुझे नहीं मिले। जानना चाहता हूं कि line को shape में convert करने का तरीका है या नहीं, और क्या SVG code को सीधे हाथ से real time में edit किया जा सकता है। आम users के लिए यह बहुत niche हो सकता है, लेकिन fill जैसे कुछ काम visual tools की तुलना में code से edit करना कहीं आसान होता है
    यह भी जानना चाहूंगा कि इसे open source करने की संभावना है या नहीं

  • UX सच में बहुत पसंद आया। Wacom support वाले Android tablet पर भी बहुत usable है
    Spline editing का तरीका—यानी individual handles adjust करने के बजाय line के किसी भी point को drag करके move कर पाना—आपने खुद बनाया है या कहीं और से लिया है, पता नहीं, लेकिन मुझे बहुत पसंद आया
    बस left tree में touch scroll काम नहीं करता दिखा, बाकी सब बहुत smooth है। Keyboard shortcuts भी implement किए हैं या नहीं, यह जानना चाहूंगा

    • Curve drag करना हैरानी की बात है कि implement करना आसान है। लगता है implementation idea किसी बहुत पुराने Google forum discussion से मिला था
      Drag करते समय Shift दबाने पर handle direction बनाए रखना भी काम करता है
      Left tree को सभी devices पर सही करना मुश्किल है। Click, touch से click, drag-and-drop, swipe scroll, touch scroll वगैरह support करने होते हैं, और साथ ही उसे सैकड़ों elements वाली list जैसा behave करना होता है। iOS पर swipe scroll और थोड़ी stuttering जैसी issues अभी हैं, लेकिन list में डाल रखा है
      Keyboard shortcuts non-mobile devices पर implement हैं। Menu bar में menu खोलने पर menu items के दाईं तरफ shortcuts दिखते हैं

  • मैं समझ नहीं पाया कि इसे कैसे इस्तेमाल करना है। मैंने एक line segment बनाया, लेकिन उसे move या resize करने का तरीका नहीं मिला, हालांकि drag handles दिख रहे थे
    Rectangle या circle जैसी दूसरी shapes बनाने का तरीका भी समझ नहीं आया। दिख रहे लगभग सभी buttons को अलग-अलग क्रम में करीब बीस बार दबाया, लेकिन ज्यादातर कुछ नहीं हुआ

    • Shape tool main toolbar में text tool और image tool के बीच है। पहले दो shape options rectangle और circle हैं
    • ऐसी apps में tools इस्तेमाल करने के बारे में काफी hints देना, और बाद में उन्हें बंद करने देना, मददगार होता है

  • शानदार। उम्मीद है यह project सफल होगा
    First impression के लिहाज से कुछ feedback दूं तो, शुरू करते समय तुरंत खेलने के लिए खाली untitled document खोल देना, और initial selected tool के रूप में Bezier pencil जैसा कोई मजेदार tool select कर देना कैसा रहेगा
    मैं इतना motivated था कि इधर-उधर क्लिक करके यह पता लगा लिया कि कोई document open नहीं है, फिर नया document बनाया और tool बदलकर खेलना शुरू किया, लेकिन कई users ऐसा नहीं करेंगे। खासकर कोई document open न होना सबसे बड़ी बाधा लगता है
    छोटी बात लग सकती है, लेकिन default canvas थोड़ा बड़ा हो तो अच्छा होगा। जैसे 512 या 500 square। नया tool जांचते समय realistic तौर पर लोग सिर्फ पहले 10–20 seconds देते हैं, अगर उस दौरान उन्हें पकड़ नहीं पाए तो वे बस चले जाएंगे और कई users खो जाएंगे
    बहुत अच्छा दिखता है, share करने के लिए धन्यवाद

    • सहमत हूं। दिखने में शानदार है, लेकिन जब मैंने तुरंत pencil दबाकर doodle करने की कोशिश की तो कुछ नहीं हुआ, जिससे निराशा हुई
      नया document बनाकर pencil आजमाने पर भी कुछ नहीं हुआ। आखिरकार मैं समझ ही नहीं पाया कि इसे इस्तेमाल कैसे करना है
      Bezier tool से कुछ nodes add कर पाया, लेकिन किसी भी tool से उन्हें manipulate नहीं कर सका। क्या Chrome/Windows पर dragging पूरी तरह broken हो सकता है?

  • अच्छा है, और इसमें काफी potential दिखता है। एक छोटा feedback: floating toolbar को ऊपर रखना ध्यान भटकाता है और actual drawing area खा जाता है
    इसे normal toolbar की तरह रखना या canvas के नीचे रखना बेहतर होगा। या फिर इसे movable या collapsible बनाया जा सकता है

    • Toolbar को पहले ही कई बार redesign और move किया गया है। Window बहुत narrow होने पर वह वैसे भी collapse हो जाता है, इसलिए collapse button जोड़ना काफी आसान होना चाहिए