SVG ट्यूटोरियल

 (svg-tutorial.com)
6 पॉइंट द्वारा GN⁺ 2023-12-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें

SVG ट्यूटोरियल सारांश

  • यह Hunor Márton Borbély द्वारा बनाया गया SVG ट्यूटोरियल है, जिसमें बुनियादी आकृतियों से शुरुआत करके जटिल animations तक SVG images को code करना step-by-step सीखा जा सकता है.
  • इसमें basic shapes बनाना, Christmas tree, gingerbread cookie doll, house बनाना जैसे कई विषय शामिल हैं, और clip path, gradients, Bézier curves, text को path के along draw करना जैसी SVG की विभिन्न सुविधाओं का परिचय दिया गया है.
  • इसके अलावा, JavaScript का उपयोग करके clock बनाना, SVG elements में interaction जोड़ना, JavaScript से SVG diagrams generate करना जैसी SVG को दूसरी technologies के साथ combine करने की विधियाँ भी शामिल हैं.

GN⁺ की राय

  • यह ट्यूटोरियल शुरुआती software engineers के लिए SVG images को code करने की बुनियाद से लेकर advanced techniques तक व्यवस्थित रूप से सीखने के लिए एक अच्छा संसाधन है.
  • खास तौर पर, real time दिखाने वाली clock बनाना या SVG elements में interaction जोड़ना जैसे practical examples शामिल हैं, इसलिए यह learners के लिए बहुत उपयोगी और दिलचस्प अनुभव प्रदान करता है.
  • जो लोग SVG सीखना चाहते हैं, उनके लिए यह ट्यूटोरियल graphic web design की समझ को व्यापक बनाने और web pages में मौलिक visual elements जोड़ने की क्षमता को बेहतर करने वाला एक आकर्षक learning resource हो सकता है.

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

1 टिप्पणियां

 
GN⁺ 2023-12-08
Hacker News राय
  • SVG और React का संयोजन कम आंका गया है। आप React की सभी सुविधाओं और abstraction का उपयोग कर सकते हैं, और DOM की जगह मनचाहे graphics render कर सकते हैं। इसे graph और chart rendering में इस्तेमाल किया है, और कुछ स्थितियों में यह Canvas से बेहतर साबित होता है। उदाहरण के लिए, जब साधारण interaction चाहिए लेकिन pixel-level manipulation जैसे जटिल graphics की ज़रूरत न हो, तब यह उपयोगी है.
  • SVG एक लचीला format है, और इससे जुड़े tutorial के ज़रिए इसे सीखने में समय लगाना सार्थक है। React component के साथ SVG का उपयोग करने पर ऐसे शानदार UI बनाए जा सकते हैं जो सिर्फ HTML से करना मुश्किल होता है.
  • React में बनाया गया interactive "Circle of Fifths" component एक music theory side project में इस्तेमाल किया। वह component उपयोग के लिए उपलब्ध है, और SVG से Circle of Fifths बनाने की प्रक्रिया पर लिखी गई blog post मददगार है.
  • SVG के <clip-path> उपयोग उदाहरण में बड़े circle को दो बार define करना अक्षम है। आकार बदलते समय दोनों जगह बदलाव करना पड़ता है, इसलिए अगर defs पहले से इस्तेमाल हो रहा है, तो circle को एक बार define करके दोबारा उपयोग करना बेहतर है.
  • SVG और React के साथ inline SVG coding मज़ेदार है, और <foreignObject> tag का उपयोग करने पर HTML के भीतर SVG का लाभ लिया जा सकता है, जो उन कामों में उपयोगी है जिनमें HTML बेहतर है, जैसे links, images, basic flexbox styling आदि.
  • कुछ साल पहले interface पर काम करते समय SVG का उपयोग किया था, और दो color scheme के लिए सिर्फ SVG file के भीतर color code खोजकर बदल देने से designer हैरान रह गया था.
  • tutorial पर मिले सकारात्मक feedback के लिए आभार जताया गया, और मिली हुई errors को ठीक किया गया। अभी भी fine-tuning चल रही है, और उदाहरण के लिए यह जानना चाहा गया कि Twitter पर thumbnail preview क्यों काम नहीं कर रहा.
  • SVG "tag" शब्द को लेकर एक छोटी-सी शिकायत है। जब HTML पहली बार शुरू किया था, तब सब कुछ "tag" कहा जाता था, लेकिन XHTML आने के बाद इसे "element" कहना शुरू किया। अब भी मन में इसे "tag" ही मानते हैं, लेकिन अब "element" कहते हैं.
  • curve और clipping के उदाहरण विशेष रूप से पसंद आए। path को प्राथमिकता देते हैं, क्योंकि उससे लगभग सब कुछ किया जा सकता है और यह दूसरे तरीकों की तुलना में कम verbose है। drawing में अच्छे नहीं हैं और images पसंद नहीं, इसलिए performance और सुविधा के लिए पूरा side project SVG से बनाया। इस tutorial से पता चला कि refactor करने के लिए बहुत कुछ है.
  • text और image को साथ उपयोग करने वाला उदाहरण देखना चाहते हैं। अभी इसी समस्या से जूझ रहे हैं, और alignment एक कठिन मुद्दा है। Inkscape का उपयोग करने का अनुभव है, लेकिन जो चाहिए उसे बनाने के लिए XML लिखने वाली दिशा में हैं.
  • यह जानना चाहते हैं कि SVG को सीधे code करना सामान्य practice है, या आम तौर पर Figma जैसे tool में drawing बनाकर SVG file generate की जाती है.