SVG Viewer - SVG फ़ाइल देखने, संपादित करने और ऑप्टिमाइज़ करने का टूल

 (svgviewer.dev)
4 पॉइंट द्वारा GN⁺ 2024-04-28 | 1 टिप्पणियां | WhatsApp पर शेयर करें

SVG इमेज फ़ाइल विश्लेषण

  • 400px चौड़ाई और 400px ऊँचाई वाली SVG इमेज फ़ाइल
  • बुनियादी संरचना:
    • सबसे बाहरी हिस्से में width="124", height="124" वाला आयत है
    • rx="24" एट्रिब्यूट से कोनों को गोल किया गया है
    • fill="#F97316" एट्रिब्यूट से इसे नारंगी बैकग्राउंड रंग से भरा गया है
  • मुख्य आकृतियाँ:
    • <path> टैग से सफेद बहुभुज जैसी आकृति बनाई गई है
      • d एट्रिब्यूट में path coordinates की जानकारी है
      • fill="white" से इसे सफेद रंग से भरा गया है
    • <circle> टैग से काला वृत्त बनाया गया है
      • cx="63.2109" cy="37.5391" r="18.1641" से उसकी स्थिति और आकार तय किया गया है
      • fill="black" से इसे काले रंग से भरा गया है
    • <rect> टैग से अर्ध-पारदर्शी आयत 45 डिग्री घुमाकर बनाया गया है
      • opacity="0.4" से पारदर्शिता सेट की गई है
      • fill="#FDBA74" से इसे हल्के नारंगी रंग से भरा गया है
      • transform="rotate(-45 81.1328 80.7198)" से rotation transform लागू किया गया है
  • फ़ाइल आकार ऑप्टिमाइज़ेशन:
    • मूल 578 bytes से घटकर 493 bytes, यानी 15% कमी

GN⁺ की राय

  • SVG एक vector graphics format है, इसलिए zoom in/out करने पर भी बिना टूटे साफ़ रहता है। वहीं JPEG, PNG जैसी bitmap images की तुलना में अगर जटिलता बढ़े तो फ़ाइल आकार बड़ा हो सकता है।
  • फ़ाइल साइज छोटा होने से वेब पर loading speed तेज़ लगती है। लेकिन अगर चित्र जटिल हो, तो PNG उल्टा ज़्यादा फायदेमंद हो सकता है.
  • rx, circle, rotate जैसी विभिन्न सुविधाओं का उपयोग करके सादगी के भीतर भी गहराई का एहसास दिखाना प्रभावशाली है.
  • नारंगी बैकग्राउंड पर सफेद और काले रंग का उपयोग करके color contrast दिया गया है, जिससे readability बढ़ती है.
  • लगता है कि इसे icon, logo आदि जैसे उपयोगों के लिए बनाया गया है। हल्के नारंगी रंग की आकृति का अर्थ या उपयोग क्या है, यह जानने की उत्सुकता है.

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

1 टिप्पणियां

 
GN⁺ 2024-04-28
Hacker News राय
  • SVG optimization टूल SVGOMG को एक और उपयोगी web-based SVG टूल के रूप में पेश किया गया है
  • Vancouver स्थित छोटी कंपनी Checker Software ने इस टूल समेत कई software tools विकसित किए हैं
  • UI समझने में आसान है, और यह बदलावों पर स्पष्ट feedback देता है, इसलिए SVG इस्तेमाल करते समय आने वाली छोटी समस्याओं को हल करने में उपयोगी लगता है
    • उदाहरण के लिए, लोडिंग के समय SVG का इच्छित आकार से पलभर के लिए बड़ा होकर फिर छोटा हो जाना जैसी समस्या
  • canvas के zoom फीचर में एक मज़ेदार bug(?) है, जिसमें zoom अनंत तक चला जाता है
  • SVG एक बहुत शक्तिशाली टूल है; हाल ही में Safari और iOS में filter: drop-shadow का उपयोग करने वाली parallax transparent images की rendering समस्या को SVG filters और feGaussianBlur की मदद से हल करने का एक उदाहरण भी सामने आया है
  • SVG के लिए और अधिक तथा बेहतर टूल्स की ज़रूरत वाले माहौल में, इस टूल के आगमन का स्वागत किया जा रहा है
  • text से SVG बनाते समय यह editor generated content को parse नहीं कर पाया, लेकिन CodeBeautify का SVG viewer ठीक से काम कर गया, ऐसी राय भी है
  • ऐसी छोटी tools को Hacker News (HN) की भावना के बहुत अनुरूप माना गया है