मुफ़्त SVG व्यूअर

SVG के बारे में

SVG (Scalable Vector Graphics) वेक्टर ग्राफ़िक्स के लिए XML प्रारूप है। रैस्टर प्रारूपों (PNG, JPG) के विपरीत, छवियाँ गणितीय समीकरणों का उपयोग करती हैं।

अक्सर पूछे जाने वाले प्रश्न

SVG क्या है?

SVG (Scalable Vector Graphics) 2D ग्राफ़िक्स प्रारूप है जो पिक्सेल के बजाय गणितीय वक्र और पथ का उपयोग करता है।

SVG और PNG में क्या अंतर है?

PNG रैस्टर (पिक्सेल-आधारित) है और निश्चित आकार का है, इसे बड़ा करने पर धुंधला हो जाता है। SVG वेक्टर (गणितीय-आधारित) है और किसी भी आकार पर स्पष्ट रहता है।

क्या मैं SVG कोड सीधे संपादित कर सकता हूँ?

हाँ, SVG XML टेक्स्ट है, इसलिए आप इसे किसी भी टेक्स्ट संपादक में संपादित कर सकते हैं। आप रंग, आकार, स्थिति आदि बदल सकते हैं।

SVG ने format war जीती, दो बार

SVG के exist होने से पहले, early 1998 में W3C को दो competing vector formats submit किए गए थे। PGML (Precision Graphics Markup Language), Adobe, IBM, Netscape और Sun द्वारा 10 April 1998 को submit किया गया, Adobe PostScript imaging model पर आधारित था। VML (Vector Markup Language), Microsoft, Macromedia, Hewlett-Packard, Autodesk और Visio द्वारा 13 May 1998 को submit किया गया, एक ऐसे syntax का उपयोग करता था जो Microsoft पहले से Office 2000 और Internet Explorer 5 में ship कर रहा था। W3C ने कोई winner नहीं चुना। इसके बजाय उसने एक SVG Working Group बनाई जिसकी chair Chris Lilley ने की, एक single standard design करने के लिए जो दोनों को supersede करे। SVG का पहला public Working Draft 11 February 1999 को appear हुआ।

SVG 1.0 4 September 2001 को W3C Recommendation के रूप में publish हुआ, editor Jon Ferraiolo (Adobe) और Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark और Xerox के contributors के साथ, किसी भी W3C spec के सबसे broad vendor coalitions में से एक। SVG 1.1 14 January 2003 को follow हुआ और modern web का de-facto baseline बना रहता है; इसके Second Edition (16 August 2011) ने errata fold किए। SVG 1.1 ने spec को modules में split किया और तीन profiles (Full, Basic, Tiny) define किए। VML IE 5 से 9 में ship होता रहा और Microsoft Office द्वारा internally उपयोग किया गया, लेकिन IE 9 (March 2011) में native SVG के favour में deprecated हुआ और IE 11 तक effectively dead था। SVG 2 2016 से W3C Working Draft रहा है, कोई Recommendation date नज़र में नहीं; browsers interop demand बढ़ने पर piecemeal features ship करते हैं।

SVG को genuinely अलग क्या बनाता है

• यह बस XML है। एक पूरा icon एक line हो सकता है: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>। क्योंकि SVG text है इसे diff और version-controlled किया जा सकता है (Git इसे source code की तरह treat करता है), server-side generate किया जा सकता है, search engines द्वारा index किया जा सकता है (<text> के अंदर text crawlable है), efficiently compressed किया जा सकता है (gzip और brotli repeated XML tokens को पसंद करते हैं, typical 60-80% reduction), और बिना specialised software के किसी भी text editor में edit किया जा सकता है।
• Resolution independence। क्योंकि SVG paths mathematical curves और coordinates के रूप में defined हैं, pixel grids के रूप में नहीं, एक SVG किसी भी zoom level और किसी भी device pixel density पर identically render होता है। Manage करने के लिए कोई «@2x» या «@3x» Retina asset नहीं है। 16×16 favicon से 400×400 hero illustration तक एक single 2 KB icon zero quality loss के साथ scale करता है।
• Line art के लिए tiny file size। एक typical 24×24 single-colour icon SVG के रूप में ~200-500 bytes है बनाम transparent PNG के रूप में 1-3 KB। एक flat company logo SVG के रूप में 1-5 KB है बनाम PNG के रूप में 15-50 KB। 1,000 symbols का एक icon set एक single SVG sprite के रूप में ~50 KB है बनाम multi-DPI PNG sprites के रूप में 2-5 MB।
• HTML में inline और CSS से styleable। एक बार SVG inline होने पर, हर element DOM का हिस्सा होता है। CSS इसे address कर सकता है: .icon-stroke { stroke: currentColor; stroke-width: 2; }। Single property currentColor ही modern icon systems को काम करवाती है, एक icon automatically surrounding text colour inherit करता है।
• तीन अलग-अलग तरीकों से Animatable। CSS animation/transition (पसंदीदा modern approach), SVG के अंदर SMIL declarative XML (<animate>, <animateTransform>, <animateMotion>), या SVG DOM के माध्यम से JavaScript। SMIL आज भी Chrome, Firefox और Safari में काम करता है, Chrome ने अपनी 2015 deprecation plan वापस ले ली।
• Programmatically manipulable। document.querySelector('#chart-bar-3').setAttribute('height', newValue)। यह D3.js, Vega, Plotly, Highcharts, ApexCharts और बाकी data-visualisation ecosystem की foundation है।
• Default रूप से Accessible। <title> hover पर tooltip के रूप में surface होता है। <desc> screen readers को exposed होता है। ARIA attributes (role="img", aria-label, aria-labelledby, aria-describedby) normally काम करते हैं। एक <canvas> element (assistive technology के लिए एक black box) की तुलना में, SVG fully accessible है।

Browser support 2011 से universal रहा है

Native SVG Firefox 1.5 (November 2005), Opera 9 (June 2006), Safari 3.0 (June 2007), Chrome 1.0 (September 2008), और अंत में Internet Explorer 9 (March 2011) में आया: जो inflection point था। IE 9 से पहले, sites को IE 6-8 support करने के लिए VML conversion shims या Adobe SVG Viewer plugin ship करना पड़ता था। iOS Safari को launch से partial SVG था और iOS 5 (October 2011) से full support; Android Honeycomb 3.0 (February 2011) के साथ वहां पहुंचा और ChromeWebView ने Android 4.4 (2013) के आसपास AOSP browser की जगह ली। SVG-as-image (<img src="x.svg">) के लिए practical lower bound roughly late 2011 है। 2026 तक, किसी realistic web project को full SVG के बिना browsers support करने की ज़रूरत नहीं है।

SVG सिर्फ एक image format नहीं है, यह एक executable document type है

यह SVG security के बारे में समझने वाली सबसे important बात है। एक malicious SVG <script> blocks, event handlers (onload, onclick, onmouseover), या <a xlink:href="javascript:..."> links include कर सकता है। जब ऐसा SVG एक active context में load होता है (<object>, <iframe>, .svg URL पर browser navigation, या innerHTML insertion के माध्यम से) तो browser script execute करता है। Sites जो uploaded SVGs को इस तरह embed होने देती हैं उन्हें uploaders XSS कर सकते हैं।

<img> tag safe path है। जब SVG <img src="x.svg"> के माध्यम से या CSS background-image के रूप में load होता है, तो browsers SVG को scripts-disabled, no-external-fetch sandboxed mode में run करते हैं। अंदर के scripts execute नहीं होते, external fetches blocked होती हैं, और SVG parent page के साथ interact नहीं कर सकता। SVG के अंदर CSS render होता है, लेकिन जो कुछ भी side effects हो सकता था वह सब disabled है। यह आज SVG उपयोग करने का recommended तरीका है।

Server-side defence के लिए, OWASP uploaded SVGs को DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) या Bleach (Python) से sanitise करने, <script>, <foreignObject> और सभी on* handlers strip करने, और xlink:href values जो javascript: या data: से शुरू हों reject करने की recommend करता है। User SVG display करने वाले page पर strict Content-Security-Policy set करना और downloaded SVGs को Content-Disposition: attachment के साथ serve करना belt-and-braces additions हैं। यह viewer purely client-side है और SVG कभी आपके device को नहीं छोड़ता, लेकिन यदि आप public site पर user-supplied SVG embed कर रहे हैं, तो उसे sanitise करें।

SVG बनाम PNG बनाम JPG बनाम WebP बनाम AVIF, किसे कब उपयोग करें

• Logo, icon, illustration, diagram, chart, text के साथ infographic: SVG। किसी भी size तक scale होता है, tiny file, CSS से recolourable, text, text ही रहता है (selectable, translatable, indexable)।
• Photograph: JPG (या modern stacks के लिए AVIF/WebP)। Photos का vector encoding enormous होगा।
• Screenshot: PNG (या WebP)। Lossless raster pixel-perfect UI preserve करता है।
• Animated UI sticker: SVG (CSS या SMIL)। GIF से smaller और crisper, short loops के लिए video से smoother।

WebP (Google, 2010) और AVIF (AOMedia, 2019) modern raster formats हैं जो PNG और JPG से compete करते हैं, SVG से नहीं, वे vector नहीं हैं। SVG का failure mode photographs और continuous-tone images हैं: हर pixel को एक vector primitive के रूप में represent करने पर file JPEG से कहीं अधिक bloat हो जाती है। Icon और logo cases के लिए, SVG unmatched रहता है।

SVGO से अपना SVG optimise करें

Adobe Illustrator, Sketch, Figma या Inkscape से export किया गया एक typical SVG enormous overhead लेकर चलता है, editor-specific metadata (<sodipodi:namedview>, <inkscape:groupmode>), default layer names और group hierarchies, path coordinates में excessive precision (d="M 12.000023 18.999991 ..."), inline style attributes जो CSS classes हो सकते हैं, editor identify करने वाले comment blocks।

SVGO (SVG Optimizer), originally 2012 में Kir Belevich द्वारा लिखा गया, industry tool है। यह लगभग 50 plugins के साथ एक Node.js command-line tool है जो individual optimisations handle करते हैं: removeComments, removeMetadata, removeEditorsNSData, convertColors (rgb(255,0,0) को #f00 में बदलना), convertPathData (path commands collapse करना और redundant precision drop करना), mergePaths, cleanupNumericValues (configurable precision पर rounding, default 3 decimals)। Typical compression design tools से hand-authored SVGs के लिए 30-70% smaller files है, Inkscape exports पर occasionally 80% तक, heavy editor metadata के कारण। SVGOMG (svgomg.net) Jake Archibald (Google) द्वारा SVGO के लिए web frontend है और सबसे ज़्यादा उपयोग किया जाने वाला GUI version है।

Icon library landscape

SVG icon libraries modern web stack पर dominate करती हैं। आप जिन big sets को encounter करेंगे वे हैं Heroicons (Tailwind Labs, ~280 icons, MIT), Lucide (Feather का एक fork, ~1,400 icons), Bootstrap Icons (~2,000), Material Symbols (Google, multiple weights में ~3,000), Font Awesome 6 (~30,000 free + Pro), Phosphor Icons (six weights में ~9,000), और Tabler Icons (~5,200)। Aggregator Iconify एक single API के पीछे 150+ icon sets से 200,000 से अधिक open-source icons host करता है; एक developer <iconify-icon icon="mdi:home"></iconify-icon> लिख सकता है और framework on demand केवल उस icon का SVG fetch करता है। Icon-fonts (Font Awesome 4 / Glyphicons era) से SVG icons पर shift roughly 2017-2019 हुई, accessibility, recolourability और FOUT (flash of unstyled text जहां icon font load नहीं हुआ था) के elimination से driven।

और प्रश्न

viewBox और width/height के बीच क्या अंतर है?

viewBox="0 0 100 100" SVG का internal user-coordinate system define करता है, इसका «natural» canvas rendered pixel size की परवाह किए बिना 100×100 units है। width और height rendered display size set करते हैं। दोनों present होने पर, SVG rendered box fit करने के लिए viewBox scale करता है। preserveAspectRatio (default xMidYMid meet) नियंत्रित करता है कि scaling aspect-ratio mismatches को कैसे handle करती है: meet ratio preserve करता है और centre करता है, none stretch करता है, slice fill के लिए crop करता है। केवल viewBox set करना और CSS को width और height control करने देना icon systems के लिए modern best practice है।

मेरे SVG icons screens पर blurry क्यों दिखते हैं?

लगभग हमेशा तीन में से एक कारण होता है: (1) SVG एक fixed pixel size में render हो रहा है जो viewBox aspect ratio से match नहीं करती, इसलिए browser इसे stretch करता है; (2) SVG एक design tool से sub-pixel coordinates («M 12.5 7.5 L ...») के साथ export किया गया था, और browser का anti-aliasing non-integer edges के साथ अपना best कर रहा है; या (3) preserveAspectRatio="none" set किया गया था, जो SVG को arbitrarily stretch होने देता है। Fix: rendered container को viewBox ratio से match करके, अपने design tool के export options में coordinates को integers पर snap करके, और जब तक specifically stretching न चाहिए preserveAspectRatio="none" से बचकर।

क्या मैं SVG को favicon के रूप में उपयोग कर सकता हूं?

हां। <link rel="icon" type="image/svg+xml" href="icon.svg"> Chrome 80+, Firefox 41+ और Safari 14+ में supported है। एक common pattern है modern browsers के लिए एक SVG favicon और older clients के लिए एक ICO fallback (<link rel="icon" sizes="any" href="favicon.ico">) ship करना। SVG favicons light- और dark-theme variants के बीच automatically switch करने के लिए SVG के अंदर prefers-color-scheme media queries भी उपयोग कर सकते हैं।

क्या path d attribute वास्तव में एक mini-language है?

हां, और दर्जन भर commands सीखना SVG को hand से पढ़ना सीखने के सबसे करीब है। Commands हैं: M/m (move to, absolute/relative), L/l (line to), H/h (horizontal line), V/v (vertical line), C/c (cubic Bezier, दो control points के साथ), S/s (smooth cubic, previous control point reflect करता है), Q/q (quadratic Bezier), T/t (smooth quadratic), A/a (elliptical arc, सबसे complex), और Z/z (close path)। d जैसा एक typical icon M5 12h14M12 5l7 7-7 7 है जो «move to (5,12), horizontal line 14 units, move to (12,5), line 7-right 7-down, line 7-left 7-down» है, अर्थात् एक right-pointing arrow।

संबंधित टूल