Visualizador SVG gratuito

Sobre o SVG

SVG (Scalable Vector Graphics) é um formato XML para gráficos vetoriais. Diferentemente dos formatos matriciais (PNG, JPG), as imagens SVG se adaptam perfeitamente a qualquer tamanho sem perda de qualidade. São leves, acessíveis e amplamente suportadas pelos navegadores modernos.

Perguntas frequentes

O que é SVG ?

SVG (Scalable Vector Graphics) é um formato de gráficos 2D que usa curvas e caminhos matemáticos em vez de pixels. Isso torna os arquivos SVG independentes de resolução, permanecem nítidos em qualquer tamanho, de pequenos ícones a outdoors.

Qual a diferença entre SVG e PNG ?

O PNG é matricial (baseado em pixels) e tem tamanho fixo, ampliá-lo causa desfoque. O SVG é vetorial (baseado em matemática) e amplia ao infinito sem perda. O SVG é ideal para logotipos, ícones e ilustrações. O PNG é mais adequado a fotos e imagens complexas.

Posso editar o código SVG diretamente ?

Sim, o SVG é texto XML, então você pode editá-lo em qualquer editor de texto. Você pode alterar cores, tamanhos, posições e mais modificando os atributos. Use este visualizador para colar seu código e ver as mudanças instantaneamente.

SVG won the format war, twice

Before SVG existed, two competing vector formats were submitted to the W3C in early 1998. PGML (Precision Graphics Markup Language), submitted on 10 April 1998 by Adobe, IBM, Netscape and Sun, was rooted in the Adobe PostScript imaging model. VML (Vector Markup Language), submitted on 13 May 1998 by Microsoft, Macromedia, Hewlett-Packard, Autodesk and Visio, used a syntax close to what Microsoft was already shipping in Office 2000 and Internet Explorer 5. The W3C didn't pick a winner. Instead it formed an SVG Working Group chaired by Chris Lilley to design a single standard that would supersede both. The first public Working Draft of SVG appeared on 11 February 1999.

SVG 1.0 was published as a W3C Recommendation on 4 September 2001, with editor Jon Ferraiolo (Adobe) and contributors from Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark and Xerox, one of the broadest vendor coalitions of any W3C spec. SVG 1.1 followed on 14 January 2003 and remains the de-facto baseline of the modern web; its Second Edition (16 August 2011) folded in errata. SVG 1.1 split the spec into modules and defined three profiles (Full, Basic, Tiny). VML continued to ship in IE 5 through 9 and was used internally by Microsoft Office, but was deprecated in IE 9 (March 2011) in favour of native SVG and was effectively dead by IE 11. SVG 2 has been a W3C Working Draft since 2016 with no Recommendation date in sight; browsers ship features piecemeal as interop demand arises.

What makes SVG genuinely different

• It's just XML. An entire icon can be one line: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>. Because SVG is text it can be diffed and version-controlled (Git treats it like source code), generated server-side, indexed by search engines (text inside <text> is crawlable), compressed efficiently (gzip and brotli love repeated XML tokens, typical 60–80% reduction), and edited in any text editor without specialised software.
• Resolution independence. Because SVG paths are defined as mathematical curves and coordinates, not pixel grids, an SVG renders identically at any zoom level and any device pixel density. There's no "@2x" or "@3x" Retina asset to manage. A single 2 KB icon scales from 16×16 favicon to 400×400 hero illustration with zero quality loss.
• Tiny file size for line art. A typical 24×24 single-colour icon is ~200–500 bytes as SVG vs 1–3 KB as transparent PNG. A flat company logo is 1–5 KB as SVG vs 15–50 KB as PNG. An icon set of 1,000 symbols is ~50 KB as a single SVG sprite vs 2–5 MB of multi-DPI PNG sprites.
• Inline in HTML and styleable with CSS. Once SVG is inline, every element is part of the DOM. CSS can address it: .icon-stroke { stroke: currentColor; stroke-width: 2; }. The single property currentColor is what makes modern icon systems work, an icon inherits the surrounding text colour automatically.
• Animatable three different ways. CSS animation/transition (the favoured modern approach), SMIL declarative XML inside the SVG (<animate>, <animateTransform>, <animateMotion>), or JavaScript via the SVG DOM. SMIL still works in Chrome, Firefox and Safari today after Chrome reversed its 2015 deprecation plan.
• Programmatically manipulable. document.querySelector('#chart-bar-3').setAttribute('height', newValue). This is the foundation of D3.js, Vega, Plotly, Highcharts, ApexCharts and the rest of the data-visualisation ecosystem.
• Accessible by default. <title> surfaces as a tooltip on hover. <desc> is exposed to screen readers. ARIA attributes (role="img", aria-label, aria-labelledby, aria-describedby) work normally. Compared to a <canvas> element (a black box to assistive technology), SVG is fully accessible.

Browser support has been universal since 2011

Native SVG arrived in Firefox 1.5 (November 2005), Opera 9 (June 2006), Safari 3.0 (June 2007), Chrome 1.0 (September 2008), and finally Internet Explorer 9 (March 2011): which was the inflection point. Before IE 9, sites had to ship VML conversion shims or the Adobe SVG Viewer plugin to support IE 6–8. iOS Safari had partial SVG from launch and full support from iOS 5 (October 2011); Android got there with Honeycomb 3.0 (February 2011) and ChromeWebView replaced the AOSP browser around Android 4.4 (2013). The practical lower bound for SVG-as-image (<img src="x.svg">) is roughly late 2011. By 2026, no realistic web project needs to support browsers without full SVG.

SVG is not just an image format, it's an executable document type

This is the single most important thing to understand about SVG security. A malicious SVG can include <script> blocks, event handlers (onload, onclick, onmouseover), or <a xlink:href="javascript:..."> links. When such an SVG is loaded in an active context (via <object>, <iframe>, browser navigation to a .svg URL, or via innerHTML insertion) the browser executes the script. Sites that allow uploaded SVGs to be embedded this way can be XSS'd by uploaders.

The <img> tag is the safe path. When SVG is loaded via <img src="x.svg"> or as a CSS background-image, browsers run the SVG in a scripts-disabled, no-external-fetch sandboxed mode. Scripts inside don't execute, external fetches are blocked, and the SVG can't interact with the parent page. CSS inside the SVG renders, but everything that could have side effects is disabled. This is the recommended way to use SVG today.

For server-side defence, OWASP recommends sanitising uploaded SVGs with DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) or Bleach (Python), stripping <script>, <foreignObject> and all on* handlers, and rejecting xlink:href values that begin with javascript: or data:. Setting a strict Content-Security-Policy on the page that displays user SVG and serving downloaded SVGs with Content-Disposition: attachment are belt-and-braces additions. This viewer is purely client-side and the SVG never leaves your device, but if you're embedding user-supplied SVG on a public site, sanitise it.

SVG vs PNG vs JPG vs WebP vs AVIF, when to use which

• Logo, icon, illustration, diagram, chart, infographic with text: SVG. Scales to any size, tiny file, recolourable via CSS, text remains text (selectable, translatable, indexable).
• Photograph: JPG (or AVIF/WebP for modern stacks). Vector encoding of photos would be enormous.
• Screenshot: PNG (or WebP). Lossless raster preserves pixel-perfect UI.
• Animated UI sticker: SVG (CSS or SMIL). Smaller and crisper than GIF, smoother than video for short loops.

WebP (Google, 2010) and AVIF (AOMedia, 2019) are modern raster formats that compete with PNG and JPG, not with SVG, they are not vector. SVG's failure mode is photographs and continuous-tone images: representing every pixel as a vector primitive bloats the file far beyond a JPEG. For the icon and logo cases, SVG remains unmatched.

Optimising your SVG with SVGO

A typical SVG exported from Adobe Illustrator, Sketch, Figma or Inkscape carries enormous overhead, editor-specific metadata (<sodipodi:namedview>, <inkscape:groupmode>), default layer names and group hierarchies, excessive precision in path coordinates (d="M 12.000023 18.999991 ..."), inline style attributes that could be CSS classes, comment blocks identifying the editor.

SVGO (SVG Optimizer), originally written by Kir Belevich in 2012, is the industry tool. It's a Node.js command-line tool with about 50 plugins handling individual optimisations: removeComments, removeMetadata, removeEditorsNSData, convertColors (turning rgb(255,0,0) into #f00), convertPathData (collapsing path commands and dropping redundant precision), mergePaths, cleanupNumericValues (rounding to a configurable precision, default 3 decimals). Typical compression is 30–70% smaller files for hand-authored SVGs from design tools, occasionally hitting 80% on Inkscape exports because of the heavy editor metadata. SVGOMG (svgomg.net) is the web frontend for SVGO by Jake Archibald (Google) and the most-used GUI version.

The icon library landscape

SVG icon libraries dominate the modern web stack. The big sets you'll encounter are Heroicons (Tailwind Labs, ~280 icons, MIT), Lucide (a fork of Feather, ~1,400 icons), Bootstrap Icons (~2,000), Material Symbols (Google, ~3,000 across multiple weights), Font Awesome 6 (~30,000 free + Pro), Phosphor Icons (~9,000 across six weights), and Tabler Icons (~5,200). The aggregator Iconify hosts over 200,000 open-source icons from 150+ icon sets behind a single API; a developer can write <iconify-icon icon="mdi:home"></iconify-icon> and the framework fetches just that icon's SVG on demand. The shift from icon-fonts (Font Awesome 4 / Glyphicons era) to SVG icons happened roughly 2017–2019, driven by accessibility, recolourability and elimination of FOUT (flash of unstyled text where the icon font hadn't loaded).

More questions

What's the difference between viewBox and width/height?

viewBox="0 0 100 100" defines the SVG's internal user-coordinate system, its "natural" canvas is 100×100 units, regardless of the rendered pixel size. width and height set the rendered display size. With both present, the SVG scales the viewBox to fit the rendered box. preserveAspectRatio (default xMidYMid meet) controls how the scaling handles aspect-ratio mismatches: meet preserves ratio and centres, none stretches, slice crops to fill. Setting only viewBox and letting CSS control width and height is the modern best practice for icon systems.

Why do my SVG icons look blurry on screens?

Almost always one of three causes: (1) the SVG is being rendered into a fixed pixel size that doesn't match the viewBox aspect ratio, so the browser stretches it; (2) the SVG was exported from a design tool with sub-pixel coordinates ("M 12.5 7.5 L ..."), and the browser's anti-aliasing is doing its best with non-integer edges; or (3) preserveAspectRatio="none" was set, which lets the SVG stretch arbitrarily. Fix by ensuring the rendered container matches the viewBox ratio, snapping coordinates to integers in your design tool's export options, and avoiding preserveAspectRatio="none" unless you specifically want stretching.

Can I use SVG as a favicon?

Yes. <link rel="icon" type="image/svg+xml" href="icon.svg"> is supported in Chrome 80+, Firefox 41+ and Safari 14+. A common pattern is to ship one SVG favicon for modern browsers and an ICO fallback (<link rel="icon" sizes="any" href="favicon.ico">) for older clients. SVG favicons can also use prefers-color-scheme media queries inside the SVG to switch between light- and dark-theme variants automatically.

Is the path d attribute really a mini-language?

Yes, and learning the dozen or so commands is the closest thing to learning to read SVG by hand. The commands are: M/m (move to, absolute/relative), L/l (line to), H/h (horizontal line), V/v (vertical line), C/c (cubic Bezier with two control points), S/s (smooth cubic, reflects previous control point), Q/q (quadratic Bezier), T/t (smooth quadratic), A/a (elliptical arc, the most complex), and Z/z (close path). A typical icon d like M5 12h14M12 5l7 7-7 7 is "move to (5,12), horizontal line 14 units, move to (12,5), line 7-right 7-down, line 7-left 7-down", i.e. a right-pointing arrow.

Ferramentas relacionadas