Scalable Vector Graphics
Convert SVG vector graphics to PNG, JPG, or WebP directly in your browser — no upload, no server. FileDex rasterizes your SVG locally using the Canvas API, preserving every path, gradient, and transparency layer at your chosen resolution.
Common questions
How do I convert SVG to PNG?
Drop your SVG file onto the FileDex converter and select PNG as the output format. The conversion renders your vector graphic to a bitmap at your chosen resolution entirely in your browser — no file is uploaded to any server, and transparency is preserved by default.
Can I edit SVG in a text editor?
Yes. SVG files are plain XML text documents. Open any SVG in VS Code, Notepad, vim, or any text editor to view and modify shapes, colors, dimensions, and text content directly. A circle element looks like `<circle cx="50" cy="50" r="40" fill="blue"/>` — entirely human-readable and editable without specialized software.
What is the difference between SVG and PNG?
SVG stores graphics as mathematical descriptions of shapes that scale to any size without quality loss. PNG stores a fixed grid of pixels that blurs when enlarged. Use SVG for logos, icons, and illustrations; use PNG for screenshots, photos, and complex raster artwork.
Is it safe to upload SVG files to my website?
SVG files can contain embedded JavaScript and external entity references, making them a significant cross-site scripting risk. Never serve user-uploaded SVGs from your main domain without sanitization. Use a library like DOMPurify to strip scripts, or transform to PNG on upload.
How do I reduce SVG file size?
Optimizing SVG reduces file size by removing unnecessary metadata, empty groups, unused definitions, and redundant attributes that graphic editors insert automatically. The standard optimization workflow typically achieves 30 to 60 percent size reduction without any visible quality change. For additional savings, simplify complex paths by reducing anchor point counts in a vector editor.
Why does my SVG look different in different browsers?
Browser SVG renderers differ in their handling of SMIL animations, filter effects, and certain CSS properties. Chrome and Firefox have the most complete SVG 2 support. Test interactive SVGs across target browsers and prefer CSS animations over SMIL for broadest compatibility.
Can SVG files contain animations?
SVG supports three animation approaches that serve different use cases. CSS animations and transitions offer the widest browser compatibility and work well for hover effects and simple motion. Declarative markup elements handle path-following and complex transforms without scripting. JavaScript animation libraries provide timeline control and interactive sequences for rich motion graphics.
How do I make SVG responsive on a web page?
Remove fixed width and height attributes from the root SVG element and keep only the viewBox attribute. The SVG then scales fluidly to fill its CSS container. Apply max-width and height auto in CSS for proportional responsive behavior across all screen sizes.
What makes .SVG special
Underneath every SVG file is a well-formed XML document where shapes, text, and visual effects are expressed as tagged elements with attributes — the same structural grammar that powers HTML, RSS, and XHTML. This XML foundation is what makes SVG fundamentally different from every raster image format: it is simultaneously an image and a document, readable by humans and machines alike.
Continue reading — full technical deep dive
The viewBox Coordinate System
The root <svg> element declares a viewBox attribute that establishes an abstract coordinate plane. A viewBox of "0 0 100 100" creates a 100-by-100 unit canvas regardless of the element's pixel dimensions on screen. The browser maps this abstract space to whatever physical size the CSS or HTML assigns, performing the scaling mathematically. This is why SVG images remain sharp at any zoom level — there are no pixels to interpolate, only coordinates to recalculate.
The viewBox also controls aspect ratio behavior through the preserveAspectRatio attribute. The default value, "xMidYMid meet", centers the graphic and scales uniformly to fit the container. Designers can override this to crop, stretch, or align the content — a level of layout control that no raster format offers.
Path Data and the d Attribute
The <path> element is the workhorse of SVG. Its d attribute accepts a compact grammar of drawing commands: M (moveto), L (lineto), H (horizontal line), V (vertical line), C (cubic Bezier curve), S (smooth cubic), Q (quadratic Bezier), A (elliptical arc), and Z (close path). A single path can describe an entire icon, a complex illustration outline, or a letterform.
This compactness is why SVG icons are so small. A 24x24 icon exported from Figma might contain a single <path> with 80-120 characters of d data — the entire file weighs under 500 bytes. Compare that to a PNG of the same icon at 2x resolution: 4-12 KB depending on complexity. Multiply across a design system with 400 icons, and SVG saves hundreds of kilobytes.
CSS Styling Inside SVG
SVG elements accept CSS properties through three mechanisms: inline style attributes, embedded <style> blocks, and external stylesheets. Presentation attributes like fill, stroke, opacity, and font-size can be set as XML attributes or CSS properties, with CSS taking precedence when both exist.
This CSS integration enables theming. A single SVG icon can change color based on its parent's CSS class — dark mode toggles, hover states, and brand color customization all work without duplicating the graphic. CSS custom properties (variables) penetrate into inline SVG, so a design system can define --icon-color once and have every SVG icon inherit it.
Animation: SMIL and CSS
SVG supports declarative animation through SMIL (Synchronized Multimedia Integration Language) elements: <animate>, <animateTransform>, <animateMotion>, and <set>. These elements define keyframe animations directly in the markup without JavaScript. Chrome deprecated SMIL in 2015 but reversed the decision after community pushback — SMIL remains functional in all major browsers as of 2025.
CSS animations and transitions also work on SVG elements. Properties like transform, opacity, stroke-dashoffset, and fill can be animated with standard @keyframes rules. The stroke-dashoffset technique is particularly popular for line-drawing effects: by animating the dash offset of a stroked path from its total length to zero, the path appears to draw itself on screen.
Accessibility: title, desc, and ARIA
SVG is the only image format with built-in accessibility markup. The <title> element provides a short accessible name (equivalent to alt text), while <desc> offers a longer description. Screen readers like NVDA and VoiceOver read these elements when the SVG is focused. Adding role="img" and aria-labelledby on the root <svg> ensures consistent behavior across assistive technologies.
For complex SVGs like charts or diagrams, ARIA attributes can be applied to individual elements — a bar in a chart can carry aria-label="Revenue: $4.2M" so that screen reader users get the same data as sighted users. No raster format can provide this level of semantic granularity.
SVGO: The Standard Optimizer
SVG files exported from design tools carry significant overhead: editor metadata, empty <defs> blocks, redundant namespace declarations, unused IDs, default attribute values, and excessive decimal precision in path coordinates. SVGO (SVG Optimizer), a Node.js tool with over 5,000 GitHub stars, strips this overhead systematically.
A typical Illustrator export runs 30-60% larger than necessary. SVGO's default plugin set removes comments, metadata, empty groups, hidden elements, and editor-specific attributes while rounding path coordinates to a configurable precision (3 decimal places by default). The visual difference is imperceptible; the size difference is dramatic. For production web deployment, running SVGO is as standard as minifying JavaScript.
The Font Awesome Inflection Point
Font Awesome version 5, released in late 2017, replaced its icon font delivery with inline SVG. This was not an isolated decision — GitHub had already made the same switch, citing accessibility, performance, and rendering quality. The shift validated SVG as the industry-standard icon format and exposed the limitations of icon fonts: no multicolor support, subpixel rendering artifacts, font-loading FOUT (flash of unstyled text), and poor screen reader behavior.
SVG icons solved all four problems. Each icon loads independently (no full font download), supports multiple colors and gradients, renders at exact pixel boundaries without subpixel hinting, and can carry <title> and aria-label for accessibility. The Font Awesome migration accelerated adoption across the web industry.
Responsive SVG and Embedding Methods
SVG can be embedded in HTML five ways, each with different capabilities. Inline <svg> in HTML gives full CSS and JavaScript access. The <img> tag treats SVG as a static image — no scripting, no external stylesheet access, but cacheable. CSS background-image behaves like <img>. The <object> tag allows scripting within the SVG's own context. And data URIs embed the SVG directly in CSS or HTML attributes.
For responsive behavior, omitting the width and height attributes from the root <svg> and relying solely on viewBox makes the graphic scale to fill its container. Combined with CSS max-width: 100% and height: auto, this produces fluid SVG that adapts to any layout without media queries.
SVG Sprites for Icon Systems
SVG sprites consolidate multiple icons into a single file using <symbol> elements inside a hidden <svg> block. Each symbol has a unique ID and its own viewBox. Icons are referenced anywhere in the page with <svg>``<use href="#icon-id"/>``</svg>. The browser renders the referenced symbol at the point of use.
This pattern reduces HTTP requests (one file instead of dozens), enables CSS styling of individual icons, and keeps the DOM clean. Build tools like svg-sprite and svgstore automate sprite generation from individual SVG files during the build step.
.SVG compared to alternatives
| Formats | Criteria | Winner |
|---|---|---|
| .SVG vs .PNG | Scalability SVG renders at any resolution without pixelation because shapes are defined mathematically. PNG is locked to its encoded pixel grid — scaling up produces blurry interpolation artifacts. | SVG wins |
| .SVG vs .PNG | File size for icons and logos A typical 24px icon as SVG weighs 300-500 bytes of XML. The same icon as PNG at 2x resolution (48x48) is 4-12 KB. SVG size depends on path complexity, not output resolution. | SVG wins |
| .SVG vs .EPS | Web compatibility SVG renders natively in every modern browser and integrates with CSS and JavaScript. EPS requires conversion to display on the web — browsers cannot render PostScript. | 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 with no binary structure. Files begin with an optional XML declaration (<?xml version="1.0" encoding="UTF-8"?>) followed by the root `<svg>` element declaring the namespace xmlns="http://www.w3.org/2000/svg". The document tree contains definition blocks (`<defs>` for gradients, filters, clip paths, symbols), graphic primitives (`<path>`, `<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<polyline>`, `<polygon>`), text nodes (`<text>`, `<tspan>`), grouping containers (`<g>`), and optional embedded stylesheets (`<style>`). Path elements use a compact d attribute grammar (M, L, C, Q, A, Z commands) to describe arbitrary Bezier curves. Because SVG is text-based, there are no fixed byte offsets or binary magic bytes — file identification relies on detecting the <svg root tag or parsing the XML namespace declaration.
Attack Vectors
- Embedded JavaScript execution
- foreignObject exploitation
- XXE injection (XML External Entity)
Mitigation: FileDex processes SVG files entirely in the browser using the Canvas API for rasterization. No SVG content is uploaded to any server. The conversion pipeline renders SVG to a bitmap, inherently stripping all script tags, event handlers, and external entity references from the output.
- Specification Scalable Vector Graphics (SVG) 2 — W3C Candidate Recommendation
- Specification Scalable Vector Graphics (SVG) 1.1 (Second Edition) — W3C Recommendation
- Registry Scalable Vector Graphics — Library of Congress Format Description (fdd000020)
- Registry image/svg+xml — IANA Media Types
- Documentation SVGO — SVG Optimizer (GitHub repository)
- History Scalable Vector Graphics — Wikipedia