SVG ट्यूटोरियल

 (svg-tutorial.com)
6 पॉइंट द्वारा GN⁺ 2023-12-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • यह HTML के भीतर इमेज को सीधे कोड से बनाने के लिए SVG सीखने की सामग्री है, जिसमें बेसिक शेप्स से लेकर इंटरैक्शन तक चरणबद्ध तरीके से सीखा जा सकता है
  • सीखने की रूपरेखा viewBox, polygon, polyline जैसे बुनियादी एलिमेंट्स से शुरू होकर path, Bézier curves, arc तक फैलती है
  • transformation भाग में rotation, translation, reuse, scale और सामान्य transforms शामिल हैं, और CSS भाग में animation, hover और path-based animation के साथ CSS inline SVG तक जोड़ा गया है
  • उन्नत विषयों में text, clip-path, gradients शामिल हैं, और JavaScript से वास्तविक समय दिखाने वाली घड़ी, इंटरैक्शन, data-driven diagram, multi-component decomposition का अभ्यास कराया गया है
  • line, circle, rect, polyline, polygon, text तथा quadratic/cubic Bézier curve और arc के लिए editor links भी दिए गए हैं, ताकि हर एलिमेंट पर तुरंत प्रयोग किया जा सके

ट्यूटोरियल संरचना

अभ्यास के लिए SVG elements और path segments

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

1 टिप्पणियां

 
GN⁺ 2023-12-08
Hacker News की राय

  • SVG + React का कॉम्बिनेशन काफ़ी अंडररेटेड है। React की abstraction और ताकत को वैसे ही इस्तेमाल करते हुए DOM की जगह मनचाही graphics render की जा सकती हैं, और graph या chart rendering जैसे कुछ उपयोगों में यह Canvas से कहीं बेहतर लगता है।
    अगर pixel-level manipulation जैसी graphically complex चीज़ों की ज़रूरत न हो और बस थोड़ी-सी interaction चाहिए, तो यह खास तौर पर अच्छा है। Canvas में hover effect बनाना झंझट भरा होता है क्योंकि आपको खुद हिसाब लगाना पड़ता है कि mouse किस element के ऊपर है, जबकि SVG में onmouseover जैसी built-in सुविधा इस्तेमाल की जा सकती है

    • सही बात। SVG में click listener जोड़ा जा सकता है और CSS से उसे सामान्य HTML की तरह style किया जा सकता है—यह कभी-कभी जादू जैसा लगता है, और React / JSX इसे इस्तेमाल करना आसान बना देते हैं
    • क्या इस विषय पर कोई अच्छा introductory resource है? React में भी मैं लगभग शुरुआती स्तर पर हूँ, लेकिन लगता है इसमें काफ़ी मज़े से गहराई में जा सकता हूँ।
      दिशा या प्रेरणा देने वाले कुछ working examples मिल जाएँ तो अच्छा होगा
    • मैंने client-side के लिए Preact.js और SVG इस्तेमाल करके image segmentation + tagging component बनाया था, और वह काफ़ी अच्छा निकला। इस तरह के application के लिए इसे recommend करूँगा
    • हाँ। HTML Canvas कई मामलों में performance के लिहाज़ से कहीं बेहतर हो सकता है, लेकिन जब तक आप अगला Figma नहीं बना रहे, SVG के साथ काम करना कहीं ज़्यादा सुविधाजनक है
    • मैं GlowForge से काटे जाने वाले pattern को React & SVG में कोड कर रहा हूँ और यह बहुत बढ़िया काम कर रहा है

  • कुल मिलाकर बेहतरीन resource है और examples वाकई बहुत साफ़ हैं। लेकिन clip-path वाले हिस्से में सुझाया गया code बड़े circle को दो बार describe करता है, इसलिए circle का size बदलना हो तो दो जगह edit करना पड़ेगा।
    चूँकि इसमें पहले से defs इस्तेमाल हो रहा है, इसलिए मेरा मानना है कि उसी definition को reuse करने वाले रूप में लिखना बेहतर होगा

    • दूसरे element की भी ज़रूरत नहीं है, बस circle को सामान्य रूप से render करके clipPath के अंदर reference किया जा सकता है।
      व्यक्तिगत रूप से मैं <g> wrapper भी हटाना चाहूँगा। मैंने कभी नहीं समझा कि ऐसी संरचना क्यों recommend की जाती है, और बहुत ही दुर्लभ मामलों को छोड़ दें जहाँ आप <defs> के अंदर न होने पर भी render होने वाला element रखना चाहते हों, इससे कुछ खास हासिल नहीं होता। उदाहरण जैसे defs/circle वाले मामले में आम तौर पर <symbol> इस्तेमाल करना ज़्यादा सही है
    • यह सही बात है और अच्छा सुझाव है। इससे जुड़ा एक note जोड़ सकता हूँ

  • वाकई शानदार। SVG एक साफ़-सुथरा और flexible format है, और यह मेरे चल रहे side project से सीधे जुड़ा हुआ है, इसलिए मैं समय निकालकर इस tutorial को follow करने वाला हूँ।
    दूसरों की तरह SVG-आधारित React components बनाना मुझे भी काफ़ी मज़ेदार लगा। React और JSX interaction जोड़ना आसान बनाते हैं, और SVG ऐसा UI संभव बनाता है जिसे सिर्फ HTML से आसानी से नहीं बनाया जा सकता।
    मैंने music theory side project के लिए interactive Circle of Fifths render करने वाला एक React component public किया था। अभी बहुत काम बाकी है, लेकिन यह usable state में है: https://github.com/epiccoleman/react-circle-of-fifths
    SVG से Circle of Fifths बनाने की प्रक्रिया पर मैंने एक लेख भी लिखा था, और मुझे उसमें complex elements draw करने की प्रक्रिया को follow करने वाला बीच का explanation section खास तौर पर पसंद है: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    अभी मैं इसी तरह fretboard diagram generator बना रहा हूँ, और पुराने लेख को reference material की तरह फिर से देख पाना उपयोगी लग रहा है। काम को लिखकर रखने का एक बड़ा फ़ायदा यह है कि आप समस्या को कैसे हल किया था, उसे “replay” कर सकते हैं

  • यह resource मुझे पसंद आया। React में मैंने कुछ inline SVG बनाकर उनमें interaction जोड़ी है, और उनके साथ खेलना सच में बहुत मज़ेदार है।
    खास तौर पर <foreignObject> tag उपयोगी है। SVG के अंदर सामान्य HTML डाला जा सकता है, इसलिए link, image, basic flexbox styling जैसी चीज़ें—जो HTML बेहतर करता है—उन्हें SVG art project के भीतर handle किया जा सकता है।
    लेखक के लिए एक जोड़: साइट के कुछ links काम नहीं कर रहे हैं। पेज के नीचे bio.link और Day 11 “How to Draw Quadratic Bézier Curves with SVG” में interactive Bézier curve demo का link डाउन है

    • interactive demo link ठीक कर दिया है। शायद वह साइट Vue से बनी है, इसलिए deep links हमेशा ठीक से काम नहीं करते।
      bio.link की तरफ़ मुझे कोई समस्या नहीं दिख रही, जानना चाहूँगा कि आपको कौन-सी error दिख रही है
    • https://svg-tutorial.com/svg/transform पेज के नीचे “next example” link भी /svg/path पर जा रहा है, इसलिए 404 आ रहा है, और सही link शायद /svg/use होना चाहिए
    • कुछ न कुछ हमेशा टूटा रहता है। मैं देखता हूँ।
      foreignObject के बारे में मुझे भी नहीं पता था, यह सच में अच्छा है

  • कुछ साल पहले interface पर काम करते समय graphics के कुछ हिस्सों में SVG इस्तेमाल कर रहा था। दो color schemes थीं, लेकिन एक graphic सिर्फ एक scheme में था, इसलिए मैं दूसरे रंग का hex code लेने के लिए hallway पार करके गया।
    designer ने SVG file खोली और सारे colors ढूँढकर बदल दिए, और इस तरह दूसरा रंग बना दिया—यह देखकर मैं काफ़ी हैरान रह गया

    • यह तो मैंने कभी सोचा ही नहीं था। ऐसा बढ़िया tip है जो कभी न कभी बहुत समय बचा सकती है
    • दिलचस्प है, लेकिन “दूसरे रंग का hex code लेने के लिए hallway पार करके गया” वाले हिस्से को क्या थोड़ा और समझा सकते हैं?

  • बेहतरीन। खासकर curves और clipping के examples पसंद आए, जिनसे मैं अब भी जूझता हूँ।
    व्यक्तिगत रूप से मैं path को पसंद करता हूँ, क्योंकि उससे लगभग सब कुछ किया जा सकता है और यह दूसरे तरीकों से कम verbose होता है।
    मैं इसे लंबे समय से सीख रहा हूँ, लेकिन अब भी लगता है कि बहुत कुछ सीखना बाकी है। मैं drawing में बहुत कमज़ोर हूँ और images भी ज़्यादा पसंद नहीं करता, इसलिए convenience और performance की वजह से मैंने पूरा side project SVG में बना दिया।
    आज का resource देखकर लग रहा है कि मुझे काफ़ी refactoring करनी पड़ेगी: https://eddiots.com/1

    • यह जानकर खुशी हुई कि यह मददगार रहा। comic भी बढ़िया है

  • अच्छी प्रतिक्रिया के लिए धन्यवाद, और आपने जो कुछ गलतियाँ ढूँढीं उन्हें मैंने ठीक कर दिया है। अगर अब भी कुछ काम नहीं कर रहा हो तो बताइए। अभी थोड़ा final polishing चल रहा है
    उदाहरण के लिए, क्या किसी को पता है कि Twitter पर thumbnail preview क्यों काम नहीं कर रहा? नीचे के pages पर यह ठीक से काम करता है

  • बहुत बढ़िया। अभी मैं जिस समस्या से जूझ रहा हूँ वह text + image है, इसलिए इससे जुड़े एक-दो examples अच्छे रहेंगे
    alignment सच में सिरदर्द है। मैंने Inkscape भी आज़माया, लेकिन जो चाहिए उसे बनाने के लिए बात काफ़ी हद तक “XML को सीधे लिखने” तक पहुँच जाती है

    • text को path के साथ चलाने वाले examples के अलावा मैंने ज़्यादा प्रयोग नहीं किए
      text-anchor के बारे में जानता हूँ: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      और यहाँ किसी ने सुझाया कि foreignObject tag उपयोगी हो सकता है: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • text सच में झंझट वाला है। मैंने svgwrite से tables generate करने के लिए जल्दी में Python code बनाया था, और text को मनचाही जगह रखना किसी नरक से कम नहीं था
      आख़िर में कई values को जैसे-तैसे adjust किया और “इतना काफ़ी है” पर छोड़ दिया। non-trivial text layout examples की ज़रूरत वाले अनुरोध से मैं सहमत हूँ
      [0] GitHub link प्रोफ़ाइल में है
    • Inkscape का alignment feature मेरे लिए काफ़ी अच्छा काम करता है। जब और ज़्यादा precision चाहिए होती है, तो ctrl+shift+x दबाकर coordinates सीधे दर्ज करता हूँ
      Inkscape का XML editor मेरे environment में काफ़ी बार crash हो जाता है, लेकिन अगर हर edit पर save करना याद रहे तो यह उपयोगी है

  • आम तौर on लोग यह कैसे करते हैं? क्या लोग SVG को सीधे code करते हैं, या Figma जैसी किसी चीज़ में बनाकर SVG file generate करते हैं?

    • मेरी training graphic designer के रूप में हुई थी, इसलिए आम तौर पर मैं Inkscape में सीधे बनाता था या किसी दूसरे program से import करता था
      http://shapeoko.github.io/Docs/ की file size को reasonable स्तर तक लाने में काफ़ी काम लगा
      बाद में मैंने ऐसा mechanism भी बनाया कि image पर click करने से वह नई window में खुल जाए: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      और parts list में किसी part name पर click करने से diagram में वही part highlight हो जाता था
    • design वाले लोग Illustrator, Sketch, Inkscape जैसे preferred editors इस्तेमाल करेंगे। coders भी ऐसे software में थोड़ा-बहुत tweak कर सकते हैं, लेकिन अगर interactivity हो तो आम तौर पर SVG को सीधे edit किया जाता है
      complex shapes या curves को कभी-कभी visualise करने के लिए online editor में डालता हूँ, और यह tool अच्छा है: https://yqnn.github.io/svg-path-editor/
    • ज़्यादा complex graphics के लिए designer tools अभी भी बेहतर रहेंगे। लेकिन simple graphics सीधे code भी किए जा सकते हैं
      अगर arrow या hamburger menu icon चाहिए, तो सीधे code में जाना आसान है। कभी-कभी कागज़ और pen से शुरू करके coordinates मिलाते हुए तब तक adjust करता हूँ जब तक वह काफ़ी अच्छा न लगे
    • Adobe जैसी कंपनियों के नए transformer-based vector models आने से SVG generation पहले से कहीं आसान हो जाएगी: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • जिन projects पर मैंने काम किया, उनमें Inkscape से files बनाईं या edit कीं और फिर उन्हें सामान्य images की तरह link किया
      कभी-कभी किसी खास static page के लिए unique graphics चाहिए होती थीं, इसलिए उन्हें page के अंदर embed भी किया, लेकिन ऐसे मामलों में graphics बहुत complex नहीं थीं

  • हाल में मैंने जो चीज़ें समझीं, उनमें एक यह थी कि React application के अंदर SVG tags को JSX tags की तरह inline रखा जा सकता है
    यह ठीक-ठीक first-class support है या Webpack इसे संभालता है, यह नहीं जानता, लेकिन कुछ मामलों में logic वाले SVG components बनाना बहुत अच्छा लगता है। अब SVG की shape, color, कुछ sections को छोड़ना आदि React-based logic से बदला जा सकता है

    • simple SVG हो या बहुत variations चाहिए हों, तब यह अच्छा है
      लेकिन अगर SVG code को inline डालते हैं, तो browser image को cache नहीं कर सकता। अगर SVG बड़ा हो या variations कम हों, तो हर image variation के लिए अलग endpoint रखना बेहतर हो सकता है
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • सही। HTML5 के बाद से SVG को inline रखा जा सकता है, और Webpack जैसी किसी चीज़ की ज़रूरत नहीं है। यह बस काम करता है
      इस tutorial के examples में से एक भी React में generate किया गया data-driven diagram है। दोनों को मिलाकर काफ़ी बढ़िया चीज़ें की जा सकती हैं