Scalable Vector Graphics
Convert SVG vector graphics to PNG, JPG, or WebP directly in your browser — no upload, no server, no quality loss. FileDex rasterizes your SVG locally, preserving every path and gradient at your chosen resolution.
Your files never leave your device
Common questions
Can I use SVG files on my website instead of PNG or JPG?
Yes, and you should for icons, logos, and illustrations. SVG files are resolution-independent, typically smaller than equivalent PNGs, and can be styled with CSS. Use PNG or JPG only for photographic content that SVG cannot represent as vector paths.
Why does my SVG look different in different browsers?
Browser SVG renderers differ in their handling of CSS properties, SMIL animations, and filter effects. Chrome and Firefox have the most complete SVG 2 support. Safari lags on certain filter primitives and foreignObject rendering. Test in all target browsers during development.
Is it safe to allow users to upload SVG files?
SVG files can contain embedded JavaScript and external entity references, making them a significant XSS and XXE risk. Never serve user-uploaded SVGs from your application's origin without sanitization. Use a library like DOMPurify to strip script tags, event handlers, and external references before rendering.
How do I make an SVG file smaller?
Run the file through SVGO (svgo input.svg -o output.svg), which strips editor metadata, empty groups, and redundant attributes. Typical savings are 30-60%. For further reduction, simplify paths in Inkscape by reducing node counts on complex curves.
Can SVG files be animated?
SVG supports three animation methods: CSS animations and transitions (most widely supported), SMIL declarative animation (deprecated in Chrome but restored, supported in Firefox and Safari), and JavaScript-driven animation via libraries like GSAP or Snap.svg. CSS animation is the recommended approach for broad compatibility.
What makes .SVG special
Vector graphics live in plain text — and that single fact reshapes how SVG behaves compared to every raster image format. An SVG file is a well-formed XML document where every shape, path, gradient, and text node is described with human-readable tags. Browsers parse it the same way they parse HTML: into a DOM tree that CSS can style and JavaScript can manipulate at runtime. No decode step, no pixel grid, no resolution dependency.
Continue reading — full technical deep dive
XML architecture and the rendering model
The root <svg> element declares a viewBox that defines an abstract coordinate system. All child elements — <path>, <rect>, <circle>, <text>, <g> — position themselves within that coordinate space. The renderer rasterizes to whatever pixel density the display demands. A 2 KB icon on a 4K monitor and a 320px phone screen produces identical sharpness because geometry scales mathematically, not by interpolation.
Path data uses a compact grammar: M (move), L (line), C (cubic Bézier), A (arc), Z (close). A complex illustration might contain thousands of path commands, but the file still compresses well under gzip because XML is repetitive text. Most web servers deliver SVG with Content-Encoding: gzip, cutting transfer size 60–80%.
SEO and accessibility advantage
SVG text remains indexable by search engines because the format stores characters as Unicode text nodes in XML — making it the only image format that contributes directly to a page's text content for SEO. A PNG chart with axis labels is opaque to crawlers. The same chart in SVG exposes every label as searchable, selectable text. Screen readers can traverse <title> and <desc> elements too, giving SVG an accessibility path that no bitmap format offers natively.
Performance characteristics
Simple icons (logo, UI glyph) typically weigh 300 bytes to 5 KB — far smaller than equivalent PNGs at retina resolution. But complexity matters. An SVG exported from Adobe Illustrator with 15,000 path nodes can reach 800 KB uncompressed and stall the browser's layout engine. Chrome's Skia renderer and Firefox's WebRender both rasterize SVG on the CPU by default; GPU compositing applies only after rasterization. A page embedding 40+ complex SVGs may see paint times spike above 16 ms per frame, breaking 60 fps scrolling.
| Scenario | SVG size (gzipped) | Equivalent PNG @2× |
|---|---|---|
| Simple logo | 0.4 KB | 8 KB |
| Icon set (24 icons, sprite) | 6 KB | 52 KB |
| Detailed map illustration | 120 KB | 340 KB |
| Photo-traced artwork | 900 KB+ | 180 KB |
The last row reveals the crossover: once an image is photographic or heavily detailed, raster wins on file size because SVG must describe every edge mathematically.
When to use SVG vs alternatives
SVG excels for logos, icons, diagrams, charts, and simple illustrations — anything with flat color, clean edges, and text. Use PNG or WebP for photographs, screenshots, or textures. Use CSS or Canvas API for procedurally generated graphics that don't need DOM interactivity. If animation is the goal, SVG with SMIL or CSS keyframes handles simple motion; for frame-heavy sequences, Lottie (which wraps bodymovin JSON, not SVG directly) or video is more efficient.
Limitations
SVG has no native support for pixel-level filters like Gaussian blur at arbitrary radii without performance cost — <feGaussianBlur> works but triggers expensive repaints. Font rendering depends on the client having the typeface installed or the SVG embedding the font, which inflates file size. Cross-origin SVG loaded via <img> cannot be scripted, only styled. And older email clients strip SVG entirely, making it unusable for HTML email graphics.
.SVG compared to alternatives
| Formats | Criteria | Winner |
|---|---|---|
| .SVG vs .PNG | Scalability SVG renders at any resolution without pixelation. PNG is fixed at its encoded pixel dimensions — scaling up produces blurry results. | SVG wins |
| .SVG vs .PNG | File size for simple graphics A simple icon as SVG is typically 1-5 KB of XML. The same icon as PNG at 512x512 can be 20-50 KB. SVG size scales with path complexity, not resolution. | SVG wins |
| .SVG vs .PNG | Photographic content SVG cannot efficiently represent photographic imagery — it would require embedding a raster bitmap anyway. PNG handles photographic content with lossless pixel encoding. | PNG wins |
| .SVG vs .CANVAS/WEBGL | DOM accessibility SVG elements live in the DOM and are accessible to screen readers, CSS selectors, and JavaScript event handlers. Canvas renders to an opaque pixel buffer with no element-level access. | SVG wins |
Convert .SVG to...
Technical reference
- MIME Type
image/svg+xml- Developer
- World Wide Web Consortium (W3C)
- Year Introduced
- 2001
- Open Standard
- Yes — View specification
Binary Structure
SVG is a plain-text XML format, not a binary format. Files begin with an optional XML declaration (<?xml version="1.0" encoding="UTF-8"?>) followed by the root <svg> element with namespace declaration xmlns="http://www.w3.org/2000/svg". The document tree contains vector primitives (<path>, <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>), text (<text>, <tspan>), grouping (<g>), definitions (<defs> for gradients, filters, clip paths), and styling (inline style attributes or embedded <style> blocks). Because SVG is text, there are no fixed byte offsets or magic bytes — file identification relies on XML parsing or detecting the <svg root tag.
Attack Vectors
- Embedded <script> tags — SVG supports inline JavaScript that executes when opened in a browser, enabling XSS attacks if user-uploaded SVGs are served from the same origin
- External entity injection (XXE) — SVG's XML foundation allows DOCTYPE declarations with external entity references that can read local files or trigger SSRF on server-side renderers
- CSS injection via <style> blocks — embedded CSS can exfiltrate data using background-image URLs or @import rules pointing to attacker-controlled servers
- Billion laughs attack — recursive XML entity expansion can exhaust parser memory, causing denial of service on server-side SVG processing
Mitigation: FileDex processes SVG files entirely in the browser using sandboxed rendering. No SVG content is executed server-side. Uploaded SVGs are rasterized to bitmap output, stripping all script and style elements during conversion.