GIF जैसा महसूस होने वाला SVG

 (koaning.io)
33 पॉइंट द्वारा GN⁺ 2025-07-09 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • चलती हुई SVG इमेजें high resolution बनाए रखते हुए भी बहुत छोटी file size रखती हैं (49KB)
  • यह पारंपरिक GIF जैसी visual effect देती हैं, लेकिन वास्तव में SVG animation फीचर का उपयोग करती हैं
  • इन्हें Github README.md फ़ाइल में भी सीधे इस्तेमाल किया जा सकता है
  • asciinema और svg-term-cli टूल्स की मदद से terminal session रिकॉर्ड करके उसे SVG animation में बदला जा सकता है
  • SVG के animation elements(<animate>, <animateTransform>, <animateMotion>) का उपयोग किया जाता है

चलती हुई SVGs की विशेषताएँ

  • SVG से बनी चलती हुई इमेजें पारंपरिक GIF जैसी दिखती हैं, लेकिन वास्तव में SVG की vector-based animation क्षमता का उपयोग करती हैं
  • इस तरीके में file size बहुत छोटी होती है, और बिना quality loss के resize तथा zoom in/out किया जा सकता है
  • Github के README.md जैसी जगहों पर भी इन्हें सीधे इस्तेमाल किया जा सकता है, जो इसका बड़ा फ़ायदा है
  • उदाहरण के तौर पर, 49KB size की high-resolution चलती हुई parrot SVG का परिचय दिया गया है

बनाने का तरीका

  • asciinema के ज़रिए terminal session रिकॉर्ड किया जाता है
  • रिकॉर्ड की गई asciinema फ़ाइल को svg-term-cli टूल से convert करके SVG animation फ़ाइल बनाई जाती है
  • बनी हुई SVG फ़ाइल को README.md में आसानी से जोड़ा जा सकता है
  • लेखक bespoken सहित कई projects में इस तरीके का सक्रिय रूप से उपयोग कर रहे हैं

SVG animation कैसे काम करती है

  • SVG spec में पहले से ही animation features built-in हैं
    • <animate>: अलग-अलग attributes को समय के साथ animate करता है
    • <animateTransform>: rotation, scaling, movement जैसे transform animations लागू कर सकता है
    • <animateMotion>: object को किसी path के along move कराता है
  • svg-term-cli SVG की इन्हीं built-in animation capabilities का उपयोग करके काम करता है

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

1 टिप्पणियां

 
GN⁺ 2025-07-09
Hacker News की राय

  • सिर्फ SVG से भी बेहद विविध और प्रभावशाली काम किए जा सकते हैं, यह बात काफ़ी चकित करती है। Wikipedia पर मिले उदाहरणों में Missile Command clone animation, London Tube map, rolling shutter animation खास तौर पर ध्यान खींचते हैं

    • SVG की शुरुआत मूल रूप से Shockwave/Flash Player के एक open competitor और PDA ऐप फ़ॉर्मैट के रूप में हुई थी। इसमें networking support जोड़ने पर भी वास्तव में कभी विचार किया गया था

    • London Tube map इसलिए बेहद प्रभावशाली है क्योंकि इसमें wheelchair users जैसे transport-disadvantaged लोगों के लिए 'step-free stations' का संकेत है। पहले missile example को देखते ही warheads पर क्लिक करने का प्रोग्रामिंग तरीका दिमाग में आ गया, और दुनिया बचा लेने जैसा एहसास हुआ

    • यह बात उत्सुक करती है कि पहला Missile Command लिंक Safari में ठीक से काम नहीं करता। बटन क्लिक तो होते हैं, लेकिन warheads पर क्लिक का कोई response नहीं मिलता। Firefox में तो crosshair cursor भी दिखता है, पर Safari में ही कुछ गड़बड़ लगती है

    • Tube map में checkbox functionality बहुत शानदार हिस्सा है। इससे SVG skills और निखारने की प्रेरणा मिली। बुकमार्क कर लिया

    • सिर्फ article title देखकर लगा था कि यह README file hash को visually दिखाने वाला कोई tool होगा, लेकिन ऐसी visualization सुविधा TOS, EULA में चुपके से बदलाव होने पर users को उन्हें आसानी से पकड़ने में मदद कर सकती है

  • README में animated SVG embed करके, उस SVG को दिन में एक बार मौसम और सप्ताह के दिन की जानकारी से update करने वाला काम बनाने का अनुभव साझा किया गया। संदर्भ। असल में यह कुछ साल पहले jury duty के दौरान बनाया गया प्रोजेक्ट था

  • अगर target Github README है, तो वीडियो को सीधे embed करना भी संभव है। उदाहरण के तौर पर git-recent README का लिंक दिया गया। हालांकि, अगर सिर्फ terminal capture दिखाना है, तो OP का SVG तरीका शायद ज़्यादा समझदारी भरा विकल्प हो सकता है

    • वीडियो इस्तेमाल करने का फ़ायदा यह है कि उसमें play/pause/slider UI मिलता है। कुछ platforms GIF में भी JavaScript से control UI जोड़ते हैं, लेकिन browser में यह native support नहीं है, जो एक सीमा है। इसलिए कई बार वीडियो बेहतर लगते हैं। RevealJS के लिए SVG animation बनाते समय ज़रूरत के हिसाब से CSS/JS से manipulate किया जाता है

    • अगर video file जोड़ी जाए, तो Github पर सीधे README edit करके upload की गई file का githubusercontent पर store होना repository size के लिहाज़ से भी बेहतर विकल्प है

    • SVG, वीडियो से अलग, user के light/dark setting के हिसाब से colors को respond कर सकता है। यह responsive sizing भी support करता है, जो वीडियो नहीं कर पाता। संबंधित demo भी साझा किया गया। हालांकि यह feature Firefox/Chrome में ठीक चलता है, लेकिन Safari में इसे लागू करना अब भी मुश्किल है, इस पर अफ़सोस जताया गया

    • Paul का नाम लंबे समय बाद आया, और उनके पुराने Echo Nest, Rdio API काम के लिए प्यार जताया गया

    • मेरी राय में, terminal capture के लिए SVG तरीका control features की कमी के कारण बहुत practical नहीं है। software demo के लिए 5 सेकंड के छोटे motion explainer में यह ठीक हो सकता है, लेकिन कई मामलों में वीडियो बेहतर हो सकता है

  • animation से सीधे text copy कर पाना, भले पहली नज़र में intuitive न लगे, लेकिन शायद यही इसकी सबसे cool विशेषता है

    • अगर animation mouse hover पर pause हो सके, तो इसकी दिलचस्पी और बढ़ जाएगी। लेकिन अगर terminal scroll हो रहा हो, तो copy/paste functionality की उपयोगिता कम हो जाना एक चुनौतीपूर्ण पहलू है

  • चेतावनी के तौर पर कहा गया कि कुछ SVG files ऐसे bugs पैदा कर सकती हैं जो page को freeze कर दें। इसलिए third-party SVG links embed करने से बचना चाहिए। Google Chrome और Firefox, दोनों पक्षों की तरफ़ से इस bug को fix करने की कोई योजना नहीं है। test के लिए खतरनाक SVG example भी जोड़ा गया है, लेकिन उस पर क्लिक करने से browser crash हो सकता है

    • page या browser freeze होना security issue से ज़्यादा, कई built-in functions के दुरुपयोग से भी होने वाली सामान्य समस्या हो सकती है। उदाहरण के लिए, blur filter chain बहुत लंबी हो तो rendering overload के कारण Chrome खुद freeze हो सकता है। अगर असर tab के बाहर तक जाए तो वह ज़्यादा गंभीर बात होगी, लेकिन मूल रूप से इसे UI usability issue माना जा रहा है

    • यह सवाल उठा कि SVG से जुड़ी ऐसी vulnerabilities, जैसे XXE attacks, क्या Github README जैसी restricted environment में भी संभव हैं। अगर हैं, तो उन्हें कैसे रोका जाता होगा, यह जिज्ञासा है

  • "SVG अपने स्वभाव से ही animated है" यह बात बेहद ताज़गीभरी लगी और इससे कई नए ideas सूझे। क्या इसमें infinite loop support है, यह पूछा गया

    • <animate> tag के repeatCount या repeatDur attribute को indefinite पर सेट करने से infinite loop संभव है। चूँकि repeat individual attributes पर लागू होता है, इसलिए image के अलग-अलग elements अलग-अलग cycle पर चल सकते हैं

    • SVG animation की आधिकारिक docs में देखे जा सकने वाले example code भी साझा किए गए

    • SVG में attribute-based animation के अलावा embedded Ecmascript(Javascript) भी डाला जा सकता है, इसलिए ज़रूरत पड़ने पर script के ज़रिए लगभग कोई भी functionality जोड़ी जा सकती है। W3C script docs संदर्भ के लिए दी गईं

    • SVG animation sample code और examples भी साझा किए गए। इनमें से कुछ page refresh करने पर देखे जा सकते हैं

  • कभी ऐसा browser standard होने का सपना है जिसमें WASM, JVM, CLR जैसे किसी भी execution engine को plug किया जा सके, और output SVG (text/binary) हो। डेवलपर्स execution model और view combination को स्वतंत्रता से चुन सकें, और DOM से बंधे न रहें — ऐसी भविष्य की क्रांति की उम्मीद जताई गई

    • AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, Flutter for Web(CanvasKit) जैसे apps पहले से ही कुछ हद तक इसी दिशा में हैं, जहाँ वे DOM को bypass करते हैं या दूसरा rendering engine चुनते हैं। यानी अब सिर्फ DOM ही अनिवार्य नहीं रह गया है

    • पहले Flash, Java, Silverlight, ActiveX जैसे third-party runtimes वेब पर हावी थे, लेकिन अब common language/platform environment अपने आप में बड़ा फ़ायदा है। यह भी ज़ोर देकर कहा गया कि आज के security threat environment में पुराने ज़माने की ऐसी अतिरिक्त तकनीकों के टिके रहना मुश्किल है

    • DOM(HTML) की ताकत यह है कि वह विविध display environments के लिए responsive design के साथ बना है। SVG में इस तरह की flexibility अपेक्षाकृत कम है

  • यह शायद बहुत अजीब लगे, लेकिन SVG architecture diagram को animate करके ऐसा वीडियो बनाना चाहूँगा जिसमें nodes dramatic animation के साथ दिखें, जैसे battle animation की तरह zoom, freeze-frame, चमकती lines वगैरह

  • इस तरह की TIL style post नए tools का प्रत्यक्ष अनुभव साझा करती है और Github Markdown की सीमाओं को पार करने के तरीके भी बताती है, इसलिए creativity को काफ़ी प्रेरित करती है। SVG result(उदाहरण) देखकर inline SVG के भीतर inline SVG का nested structure पहली बार देखा, जो काफ़ी ताज़ा अनुभव लगा और उसके लिए आभार जताया गया

    • सिद्धांततः ऐसा quine SVG भी बनाया जा सकता है जो editor में अपना खुद का source code टाइप करते हुए खुद को animate करे

  • यह सचमुच शानदार विचार है, और README में terminaltexteffects में लागू effects के साथ इसका मिलान कैसे बैठता है, यह टेस्ट करके देखना चाहूँगा। SVG के बारे में बहुत गहरा ज्ञान नहीं है, लेकिन अगर इसमें वास्तविक text store किया जाता है, तो file size बड़ा हो सकता है, यह समझ है। फिर भी मज़े के लिए इसे आज़माने का मन है