बस SVG ही पर्याप्त है

 (jon.recoil.org)
2 पॉइंट द्वारा GN⁺ 2025-12-13 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • SVG एक सरल XML-आधारित वेक्टर ग्राफ़िक्स फ़ॉर्मैट है, जो लगभग सभी प्लेटफ़ॉर्म पर सपोर्ट होता है और इसमें स्क्रिप्ट को embed करके इंटरैक्टिव विज़ुअलाइज़ेशन लागू किया जा सकता है
  • पहले माइसेलियम नेटवर्क रिसर्च के लिए बनाया गया SVG विज़ुअलाइज़ेशन टूल, 20 साल बाद भी आज के मॉडर्न ब्राउज़र में पूरी तरह काम करता है, जिससे फॉर्मैट की टिकाऊपन साबित होती है
  • सिर्फ एक स्व-निर्भर (self-sufficient) SVG फ़ाइल से डेटा लोडिंग, प्रोसेसिंग, विज़ुअलाइज़ेशन और इंटरैक्शन को क्लाइंट-साइड पर ही किया जा सकता है
  • Anil के ‘चार P’ (Permanence, Provenance, Permission, Placement) से जोड़ने पर SVG की स्थिरता, संस्करण नियंत्रण के साथ संगतता, अनुमति अलगाव और स्थानिक अभिव्यक्ति क्षमता पर जोर मिलता है
  • मॉडर्न ब्राउज़र की गणन क्षमता में वृद्धि से पूरे डेटा एनालिटिक्स पाइपलाइन को SVG के अंदर लागू करने की संभावना खुली है, जो रिसर्च शेयरिंग और पुनरुत्पादनशीलता बढ़ाने के लिए अहम है

SVG की क्षमता और वैज्ञानिक प्रकाशन का आदर्श

  • SVG एक simple XML फ़ॉर्मैट वाला वेक्टर ग्राफ़िक है, जो सभी डिवाइस पर साफ़-सुथरे रूप में दिखता है और इसमें स्क्रिप्ट को embed करके इंटरैक्टिव कंटेंट बनाया जा सकता है
    • अधिकतर उपयोगकर्ता शायद उस शक्तिशाली फीचर को पहचान नहीं पाते, लेकिन इसे और अधिक सक्रिय रूप से इस्तेमाल किया जा सकता है
  • वैज्ञानिक शोध-पत्र को डेटा एक्सप्लोरेशन और प्रयोगों की पुनरुत्पादकता का समर्थन देने वाला पूरी तरह इंटरैक्टिव वातावरण प्रदान करना चाहिए
    • कुछ प्रयोग लागत और समय की वजह से तुरंत दोबारा नहीं किए जा सकते, लेकिन कम्प्यूटर साइंस के शोध-पत्रों में यह व्यवहारिक रूप से संभव है

20 साल पुराने SVG विज़ुअलाइज़ेशन टूल का पुनः खोजा जाना

  • केम्ब्रिज के बॉटनी विभाग में पोस्टडॉक रिसर्च के दौरान, माइसेलियम नेटवर्क की सायनेर्जी (synergy) स्टडी के लिए एक SVG-आधारित विज़ुअलाइज़ेशन टूल बनाया गया था
    • इसे वास्तविक पेट्री डिश में बढ़े हुए माइसेलियम नेटवर्क डेटा को explore करने के लिए डिज़ाइन किया गया था
  • हाल ही में उसी SVG को फिर से रन करने पर पाया गया कि Firefox 1.5 या Adobe SVG प्लगइन की मांग करने वाला कोड आज के मॉडर्न ब्राउज़रों में भी बिना किसी बदलाव के काम करता है
    • यह SVG फ़ॉर्मैट की दीर्घकालिक संगतता और स्थिरता का उदाहरण है

पूर्ण स्वनिर्भर SVG की संरचना

  • सिर्फ एक SVG फ़ाइल के सहारे डेटा लोडिंग, प्रोसेसिंग, विज़ुअलाइज़ेशन और इंटरैक्शन का काम हो सकता है
    • डेटा बाहर के versioned repository से लाया जा सकता है या सीधे फ़ाइल के अंदर embed किया जा सकता है
    • सभी गणनाएँ क्लाइंट-साइड ब्राउज़र में चलती हैं, और server-side logic की ज़रूरत नहीं
    • एक static web server से आसानी से deploy और share किया जा सकता है

Anil के ‘चार P’ से लिंक

  • Permanence (दीर्घायुता) : SVG को DOI दिया जा सकता है, जैसे शोध-पत्र या डेटासेट को दिया जाता है, और 20 साल पहले बनाई गई फ़ाइल का अभी भी काम करना इसे साबित करता है
  • Provenance (स्रोत-ट्रेसिंग) : SVG text-based होने के कारण Git जैसे version control systems के साथ compatible है, और जब बाहरी डेटा उपयोग होता है तब भी वही ट्रैकिंग रणनीति लागू की जा सकती है
  • Permission (अधिकार प्रबंधन) : डेटा और प्रोसेसिंग लॉजिक अलग-अलग होते हैं, इसलिए सामान्य डेटा पर लागू वही permission model इस्तेमाल किया जा सकता है
  • Placement (स्थानिक अभिव्यक्ति) : SVG में स्वाभाविक रूप से स्थानिक अभिव्यक्ति निहित होती है, और उदाहरण के लिए विश्व मानचित्र (world map) की विज़ुअलाइज़ेशन बनाना आसान है

ब्राउज़र गणन-क्षमता में वृद्धि और नई संभावनाएँ

  • 20 साल पहले बना SVG केवल एक सरल विज़ुअलाइज़ेशन टूल था, लेकिन आधुनिक ब्राउज़रों की गणन क्षमता में सुधार से अब पूरा डेटा विश्लेषण पाइपलाइन SVG के अंदर लागू की जा सकती है
    • इतनी हल्की गणना कि नोटबुक का fan भी शायद नहीं घूमे

रिसर्च शेयरिंग इकोसिस्टम में SVG

  • Jupyter notebooks, Marimo botebooks, slipshow/x-ocaml combo, Forester, personal notebook projects आदि के साथ
    • SVG शोध परिणामों को आसानी से शेयर और recombine करने में मदद करने वाले टूल के रूप में जुड़ता है
  • ये सभी टूल्स सहयोग और पुनरुत्पादन-योग्य शोध वातावरण बनाने के लिए चल रहे लगातार प्रयासों का हिस्सा हैं

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

1 टिप्पणियां

 
GN⁺ 2025-12-13
Hacker News की राय
  • मुख्य विषय visualization की बात है, लेकिन मैंने पहले dance choreography software बनाया था
    मैंने पूरा UI SVG में render किया था, और यह उम्मीद से कहीं बेहतर चला
    प्रोजेक्ट का नाम StageKeep है, इसे पहले React Three Fiber में बनाया था और बाद में SVG में refactor किया
    मुझे Signed Distance Function की अवधारणा से प्रेरणा मिली, और input लेकर SVG output देने वाले atomic functions का विचार पसंद आया
    • एक समय था जब SVG को Flash के विकल्प के रूप में काफी ध्यान मिला था
      SVG + CSS + JavaScript से Flash में होने वाली लगभग हर चीज़ बनाई जा सकती थी, लेकिन Flash जैसे अच्छे authoring tools नहीं थे
      आखिरकार Flash गायब हो गया, और उसकी जगह पूरी तरह लेने वाला कुछ नहीं आया
    • साइट के नीचे “Start free tiral” लिखा है, शायद “trial” की typo होगी :)
    • एक stage director के तौर पर मैं choreography के साथ काम करता हूँ, और अगर ऐसे टूल से stage blocking पहले से plan की जा सके तो यह सच में शानदार होगा
    • यह सच में शानदार प्रोजेक्ट है। क्या इसमें AI से वीडियो से choreography अपने-आप निकालने की सुविधा भी संभव हो सकती है?
      उदाहरण के लिए, Project21 या Avantgardey के वीडियो से choreography analyze करके import करने जैसा
    • क्या आप खुद भी dance करते हैं, यह जानने की जिज्ञासा है
  • मैंने SVG की कमियों को कुछ इस तरह समेटा है
    • text wrapping नहीं है
    • font glyph embed नहीं किए जा सकते — अगर user के पास वह font न हो तो पढ़ना संभव नहीं
    • browser के हिसाब से supported versions और features अलग-अलग हैं
    • इसमें JS या external resources शामिल हो सकते हैं, इसलिए secure sandboxed environment में देखना मुश्किल होता है
      एक उपाय यह है कि Inkscape के लिए source SVG रखा जाए, और text को curves में बदलकर distribution SVG का अलग version रखा जाए
    • और भी कई समस्याएँ हैं
      browser के हिसाब से rendering अलग होती है, इसलिए consistent result पाना मुश्किल है, और complex SVG में memory leak या rendering slowdown गंभीर हो सकते हैं
      Inkscape के अलावा Linux पर ढंग का editor लगभग नहीं है
      फिर भी विकल्प न होने की वजह से अब भी SVG इस्तेमाल करता हूँ, लेकिन जितना हो सके इसे simple रखने की कोशिश करता हूँ
    • <foreignObject> से HTML embed करने पर text wrapping संभव हो जाता है
      SVG 2 में inline-size property से इसका समाधान आने वाला है
      font embedding के लिए <font> element या data URI के रूप में WOFF शामिल करने का तरीका पहले से मौजूद है
      लेकिन text baseline या scaling control जैसी चीज़ें अब भी अपूर्ण specification का हिस्सा हैं
      संबंधित दस्तावेज़: SVG2 InlineSizeProperty, SVG11 Fonts
    • Safari में <style> के अंदर @font-face से base64-encoded fonts embed किए जा सकते हैं
      लेकिन इससे file size बढ़ जाता है, इसलिए इसकी सिफारिश नहीं है
    • text को curves में बदलने पर select न कर पाने की समस्या आ जाती है
      Safari में <text> element से selection संभव है, इसलिए किसी भी तरफ पूरी तरह सही समाधान नहीं है
  • मुझे वह vision पसंद है जिसमें scientific papers को interactive environment के साथ दिया जाए, ताकि पाठक खुद data को manipulate कर सकें और experiments reproduce कर सकें
    NVIDIA का Illustrated Evo2 blog भी प्रभावशाली लगा
    • इससे मेरे साथियों का CloudSpecs paper याद आता है
      सभी figures वेबसाइट से जुड़े हैं, और DuckDB + WebR + ggplot की मदद से browser में reproduce किए जा सकते हैं
      उदाहरण: Figure 1 demo
    • browser में experiments फिर से चलाना शायद सिर्फ modeling-based research में संभव होगा
      लेकिन data को अलग-अलग नज़रियों से explore करने देना एक दिलचस्प विचार है
    • SVG की जगह इस्तेमाल करने के लिए कोई खास format नहीं है
      PDF में interactive features सीमित हैं, और Word या PDF दोनों ही multimedia embedding में कमजोर हैं
    • अगर कम से कम GIF या video insert किए जा सकें, तो भी यह काफ़ी मूल्यवान होगा
    • SVG में complex rendering में समय लगता है, इसलिए यह interactivity के लिए बहुत उपयुक्त नहीं है
      अगर सिर्फ vector graphics चाहिए हों, तो PostScript भी एक विकल्प हो सकता है
  • 2 साल पहले “Spurious Correlations” प्रोजेक्ट को renew करते समय मैंने Python से अपना SVG chart generator बनाया था
    मौजूदा JS/PHP chart tools (pCharts, HighCharts आदि) पसंद नहीं आए, इसलिए खुद बनाया, और यह उम्मीद से बेहतर चला
    सिर्फ गणित से साफ-सुथरा SVG बनाया जा सकता था, और infinite scalability तो बोनस थी
    • अगर आप JS chart framework ढूँढ रहे हैं, तो Observable Plot की सिफारिश करूँगा
      इसे D3 के creator ने बनाया है, यह concise है और API usability बेहतरीन है
      इसमें animation नहीं है, लेकिन papers के लिए charts बनाने में यह पर्याप्त है
    • अफ़सोस है कि Postscript ज़्यादा व्यापक रूप से इस्तेमाल नहीं हो पाया
      किसी दूसरी timeline में शायद HTML या SVG की जगह Postscript standard बन गया होता
    • आपकी साइट की वजह से मैंने statistics class के पहले दिन इसे spurious correlation के example के रूप में इस्तेमाल किया
    • मेरा मानना है कि industry को “खुद बनाओगे तो बर्बाद हो जाओगे” वाले डर से बाहर आना चाहिए
  • Distill का पहला paper Augmented RNNs बहुत प्रभावशाली था
    यह SVG के ऊपर D3.js से minimal interaction जोड़ने का उदाहरण था, और Shan Carter की शैली पहली बार देखकर मुझे उनकी टीम में शामिल होने की इच्छा हुई थी
  • 15 साल पहले मैंने एक barbecue controller बनाया था, जिसमें 4 temperature sensors और PID control algorithm इस्तेमाल किया था
    built-in HTTP server के ज़रिए SVG-based web UI में temperature graphs और dials दिखाए जाते थे, और यह JS के साथ अच्छी तरह काम करता था
    • सच में शानदार प्रोजेक्ट है। क्या आपने इसका काम करते हुए कोई वीडियो रिकॉर्ड किया था?
  • लेखक के रूप में, इस बार लेख edit करते समय मैं जिस बात पर ज़ोर देना चाहता हूँ, वह है कि 20 साल पुराना SVG आज भी काम करता है
    उस समय लिखा गया मेरा बाकी ज़्यादातर code ठीक करना पड़ता है, लेकिन SVG वैसा ही है
    • शुरुआती दिनों में browser के बीच SVG compatibility कम थी, इसलिए इसका इस्तेमाल कठिन था,
      लेकिन अब 20 साल पुराना SVG भी ज़्यादातर browsers में बिना समस्या के चल जाता है
  • मुझे SVG पसंद है, लेकिन speed की समस्या अब भी है
    QR code या complex map की तरह अगर DOM elements 100 से ज़्यादा हो जाएँ तो यह धीमा पड़ जाता है, और animation भी canvas या Lottie से धीमा है
    • मैंने एक बार chessboard SVG के अंदर chess engine embed करके उसे अपने-आप चाल चलने लायक बनाया था
      project link
      एक दोस्त की art installation में दर्जनों chess SVG एक साथ project किए थे, और browser कितनी देर टिकता है इसकी सीमा काफ़ी कम निकली
    • मैंने भी SVG+JS से map viewer बनाकर game में इस्तेमाल किया था, लेकिन object density बढ़ते ही यह बहुत धीमा हो गया, इसलिए अंत में canvas पर जाना पड़ा
      हालाँकि उस प्रक्रिया में SVG की कुछ features खो गईं
  • क्या 3D के लिए SVG जैसा कोई lightweight format है?
    CAD models को visualize करते समय मैं पूरा .step file export किए बिना सिर्फ partial changes लागू करने का तरीका ढूँढ रहा हूँ
  • पहले Shapeoko v2 CNC assembly instructions बनाते समय मैंने SVG इस्तेमाल किया था, ताकि user किसी part पर click करे तो diagram में वही part highlight हो जाए
    example link
    इसे Inkscape में बनाया गया था, और यह browser में सीधे काम करता था
    • यह सच में शानदार implementation है