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

• SVG Viewer एक वेब टूल है जो SVG अपलोड करने के बाद preview और code editing को एक ही स्क्रीन पर संभालने देता है
• rotation, left-right·up-down flip, size change, code cleanup जैसे बेसिक editing tasks सीधे ब्राउज़र में किए जा सकते हैं
• optimization उदाहरण में SVG आकार को 578 bytes से 493 bytes तक घटाकर -15% कम किया गया दिखाया गया है
• SVG download के साथ-साथ React, React Native, PNG, Data URI conversion paths भी दिए गए हैं
• icon list और upload·copy·download·share actions एक ही स्क्रीन पर होने से SVG जांचने से लेकर reuse तक का काम तेज़ी से आगे बढ़ता है

---

SVG एडिटिंग और ऑप्टिमाइज़ेशन

• SVG Viewer एक वेब टूल है जिससे SVG फ़ाइलों को देखा, एडिट और ऑप्टिमाइज़ किया जा सकता है
• editing screen SVG code और preview को साथ में दिखाती है, इसलिए code changes का परिणाम तुरंत देखा जा सकता है

• उपलब्ध operations

  • Rotate
  • Flip Y
  • Flip X
  • Change dimensions
  • Optimize
  • Prettify
  • Clear
  • example SVG को 400px x 400px आकार में दिखाया जाता है, और code editing area में <svg> code दिखाई देता है
  • optimization status को 578 bytes → 493 bytes, -15% के रूप में दिखाया जाता है

इंपोर्ट और एक्सपोर्ट

• file actions में Upload, Copy, Download, Share शामिल हैं
• export या conversion targets:
  • Preview
  • React
  • React Native
  • PNG
  • Data URI
• स्क्रीन पर eye-close, gps, minus, lock-line, email, battery, document, comment, home, search, wifi जैसे कई SVG icon items और Load More SVGs दिखते हैं
• feedback, terms of use, privacy policy links भी दिए गए हैं

[GN⁺]

Hacker News की रायें

• अक्सर इस्तेमाल होने वाला एक web-based SVG tool https://jakearchibald.github.io/svgomg/ है। यह एक SVG optimization tool है जिसमें settings को बहुत बारीकी से बदला जा सकता है

  • https://yqnn.github.io/svg-path-editor/ अक्सर इस्तेमाल करने लग जाता हूं। काश Inkscape भी path के अंदर काम करते समय इतना ही intuitive होता, और absolute/relative value conversion जैसे काम खास तौर पर सुविधाजनक हैं
  • अपने पसंदीदा SVG tools में एक और जोड़ना हो तो SVG cropping tool https://svgcrop.com/ है। जब SVG के आसपास बड़ा खाली margin हो या ऐसे अजीब elements हों जो center alignment को मुश्किल बनाते हों, तो यह visible elements के आधार पर crop कर देता है
  • यह tool भी अच्छा है: https://www.softr.io/tools/svg-shape-generator
  • SVG symbols का collection तैयार करते समय यह tool इस्तेमाल करता हूं: https://daveknispel.github.io/svg2use/
  • SVGOMG यहां भी उपलब्ध है: https://svgomg.net/

• उम्मीद नहीं थी कि weekend में Hacker News पर यह इतनी चर्चा में आ जाएगा। हम Vancouver, BC की एक छोटी company हैं और software tools बनाते हैं: https://www.checkersoftware.ca/
  कोई सवाल हों तो बताएं

  • जिज्ञासा है कि क्या इस webapp को आगे भी ad-based ही रखने की योजना है, या निकट भविष्य में extra features वाला paid pro version आने वाला है
  • ज्यादातर examples में लंबे number strings वाले path बहुत हैं, इसलिए तुरंत समझना मुश्किल होता है कि कौन-सा path image के किस shape से मेल खाता है।
    क्या editor में code पर cursor ले जाने पर उस path का color या outline अस्थायी रूप से बदलना, और text selection के लिए भी वैसा ही behavior बनाना संभव होगा?
  • मैं React developer नहीं हूं, इसलिए पूछ रहा हूं: SVG को React में export करने वाले feature का use case क्या है?
    React developer SVG को inline डालने के बजाय React export feature क्यों इस्तेमाल करेगा?
  • icons पर काम करते समय मैं यह tool हमेशा इस्तेमाल करता हूं

• थोड़ा इस्तेमाल करके देखा, और मेरे SVGs में आने वाली छोटी-छोटी समस्याओं को कभी ठीक करना हो तो यह बहुत उपयोगी लगता है। UI समझने में आसान है और changes पर feedback भी साफ है, इसलिए तुरंत bookmark कर लिया।
  कुछ SVGs में loading के दौरान page एक पल के लिए बहुत चौड़ा फैल जाता था, फिर बहुत थोड़ी देर बाद intended size पर settle हो जाता था। viewBox, width, height बदलकर देखा लेकिन solve नहीं हुआ; इस शुरुआती stretching effect को कम करने के लिए क्या करना चाहिए?

  • styles apply होने से पहले SVG के flash होने की समस्या explicit viewBox (viewBox) और viewport (width, height) specify करने से ठीक की जा सकती है: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
  • जिज्ञासा है कि क्या browser से भी तेज़ SVG को किसी दूसरे format में on-the-fly convert किया जा सकता है। non-expert नज़रिए से यह ऐसा लगता है जैसे bitmap को maximum size पर initialize करके SVG को उसके अंदर parse किया जा रहा हो

• वाकई अच्छा tool है। एक ही जगह बहुत सारे features इकट्ठे हैं। आमतौर पर phpStorm इस्तेमाल करता हूं; उसमें SVGOMG जैसी optimization functionality नहीं है, लेकिन code cleanup अच्छा होता है।
  अगर editing शुरू करने के लिए examples बेहतर हों तो अच्छा होगा, और सिर्फ path ही नहीं बल्कि दूसरे basic shapes भी इस्तेमाल हों तो अच्छा रहेगा। grid भी हो तो उपयोगी होगा।
  उदाहरण के लिए search icon को अच्छे से set किए गए viewBox वाले circle और line से बनाया जा सकता है। origin को circle के center पर रख दें तो x, y values की जरूरत नहीं, सिर्फ radius काफी है, और इस तरह हद से ज्यादा optimization संभव है।
  आम search icon आमतौर पर छह decimal places वाले NASA numbers के सैकड़ों values से भरे path में पिसा हुआ होता है। असल में integer से defined एक circle ही काफी है; Adobe Illustrator से export किया हुआ कबाड़ जरूरी नहीं।
  SVG एक artistic medium है और मुझे सच में बहुत पसंद है। लेकिन लगता है न artists इसे ऐसे देखते हैं, न developers। इसलिए ज्यादातर SVGs उस चीज़ की spirit को ठीक से नहीं पकड़ते जो संभव है, और यह बात सामने नहीं आती कि यह सिर्फ एक file format से ज्यादा है

• SVG सच में बहुत powerful है। पिछले हफ्ते filter drop-shadow वाली parallax transparent image Mac Safari और iOS पर बिगड़ी हुई दिख रही थी; solution था image outline को SVG बनाना और feGaussianBlur वाले SVG filter से shadow देना।
  लगता है अभी SVG से क्या संभव है, उसकी सतह भर छुई है। optimization के लिए svgomg इस्तेमाल करता आया हूं, लेकिन इस tool में काफी और useful features दिखते हैं

  • Qt/QML desktop frontend से शुरुआत की थी, फिर सोचने लगा कि कितना हिस्सा सिर्फ SVG imagemap जैसी composition से बनाया जा सकता है।
    Jupyter को data connection और SVG tools के साथ चलाकर देखना काफी आंखें खोलने वाला अनुभव था
  • व्यवहारिक और राजनीतिक रूप से शायद संभव नहीं होगा, लेकिन अगर DWG, DXF, DGN की जगह SVG आ जाए तो सच में अच्छा होगा। AEC industry के 2D drawings का ज्यादातर programs में ठीक से usable न होना समझ से बाहर है

• Inkscape इस्तेमाल करता हूं, और जहां कमी लगे वहां Xara Xtreme या Linux के लिए उसका पुराना free version इस्तेमाल करता हूं।
  लेकिन SVG को optimize करना आखिर मतलब क्या है?

  • गैर-जरूरी information हटाना। Inkscape काफी कुछ extra जोड़ देता है। उदाहरण के लिए Figma से कोई simple SVG export करके, उसे Inkscape में खोलकर save करें और फिर compare करें तो फर्क दिखेगा

• मुझे यह site सच में बहुत पसंद है और अनगिनत बार इस्तेमाल की है। अजीब SVG elements को समझने और result जल्दी check करने में बहुत उपयोगी है

• कुछ साल पहले Mac पर BoxySVG 10 डॉलर में खरीदा था; छोटा और भरोसेमंद tool था।
  https://boxy-svg.com/

  • लगता है अब यह subscription model पर चला गया है। साल में बस कुछ बार जरूरत पड़ती है, इसलिए 10 डॉलर में खरीदकर हमेशा रखना चाहता था। Monodraw को ऐसे ही एक बार खरीदकर रखा है, कभी-कभार इस्तेमाल करता हूं लेकिन अब भी संतोषजनक tool है, इसलिए अच्छा लगता है
  • Boxy को तेज़ और rough edits के लिए lightweight SVG editor के तौर पर recommend किया जा सकता है

• SVG पर काम करते समय यह मेरा सबसे पसंदीदा resource और tool है। बहुत खोजा, लेकिन इससे बेहतर कुछ नहीं मिला