Format
What Is SVG? The Scalable Vector Format Explained
SVG is an XML-based vector format that scales to any size without pixelation — the right choice for logos, icons, and illustrations that need to look sharp everywhere.
What is SVG?
SVG (Scalable Vector Graphics) is an XML-based image format developed by the W3C and published as a standard in 2001. Unlike raster formats (JPEG, PNG, WebP), which store images as a grid of pixels, SVG describes images as mathematical shapes — paths, curves, circles, rectangles, and text. Because the shapes are defined mathematically, they can be rendered at any size without any loss of quality.
SVG files are XML text files. They can be opened in a text editor, manipulated with JavaScript and CSS, embedded directly in HTML, and styled with CSS rules — capabilities that are impossible with raster formats.
How SVG works
An SVG file describes a scene using XML elements:
<path>— arbitrary curves and shapes defined with path commands (M, L, C, Z, etc.)<rect>,<circle>,<ellipse>— geometric primitives<text>— text elements that can be styled with CSS<image>— embedded raster images (optional)<g>— groups with transform and opacity<defs>— reusable elements: gradients, patterns, clip paths, filters
When the browser renders an SVG, it reads these descriptions and draws the shapes at the exact pixel dimensions needed for the display. At 2× (Retina), the same SVG file renders twice as many pixels — perfectly sharp at any density.
SVG can be used in three ways:
- External file:
<img src="logo.svg">or as a CSSbackground-image - Inline in HTML: Paste the SVG XML directly into the page — enables CSS/JS interaction
- CSS data URI: Encode SVG as a data URI for use in CSS backgrounds
File size
SVG file size depends entirely on the complexity of the artwork. A simple icon might be a few hundred bytes. A complex illustration with gradients, shadows, and many paths could be hundreds of kilobytes.
SVG compression tools (such as SVGO) can significantly reduce SVG file size by removing redundant metadata, simplifying path data, and collapsing groups. A freshly exported SVG from Illustrator is often 3–10× larger than necessary before optimization.
For raster formats, SVG is not comparable — you're trading a resolution-fixed pixel grid for a mathematical description. A 32×32 SVG icon is typically smaller than a 32×32 PNG icon and scales to 512×512 with perfect quality.
When to use SVG
- Logos: One SVG file works at every size, from favicon to billboard.
- Icons: Icon sets are almost always SVG today, replacing icon fonts.
- Illustrations: Flat-style illustrations, infographics, charts, and diagrams.
- UI graphics: Decorative elements, backgrounds, and illustrations that need to scale.
- Data visualizations: D3.js, Chart.js, and most charting tools generate SVG.
- Animations: CSS and JavaScript animations on SVG elements.
Do not use SVG for: photographs, complex textures, or any image that originates as a photo. SVG is vector — it cannot represent the continuous tonal variation of photographic content.
SVG vs raster formats
| Property | SVG | PNG | WebP |
|---|---|---|---|
| Scalability | Infinite (vector) | Fixed resolution | Fixed resolution |
| Photography | No | Poor (large files) | Yes |
| Logos / icons | Best | Good | Good |
| CSS/JS manipulation | Full | None | None |
| Inline in HTML | Yes | No (only via img) | No (only via img) |
| Animation | CSS/JS/SMIL | No (APNG only) | Yes |
| Browser support | Universal | Universal | All modern |
Frequently asked questions
Can SVG be animated?
Yes. SVG supports animation through CSS animations, CSS transitions, and SMIL (Synchronized Multimedia Integration Language) which is built into the SVG spec. JavaScript can also manipulate SVG elements to create complex interactive animations. SVG animation is widely used for UI micro-interactions, loading spinners, and data visualizations.
Is SVG better than PNG for logos?
Yes, for vector artwork. SVG scales to any size — a single SVG logo looks perfect on a 16px favicon, a 200px header, and a 4000px printed banner. PNG is resolution-fixed; you need separate files for each target size. SVG is also typically a smaller file for simple logos and icons. The only reason to use PNG for logos is when the logo contains raster photo elements or when the target system doesn't support SVG.
Can SVG contain photos?
Yes, but it defeats the purpose. SVG can embed raster images (JPEG, PNG, WebP) as base64-encoded data URIs or external references within the XML. However, the embedded raster image is still fixed-resolution — the SVG wrapper doesn't add scalability to raster content. Use SVG for vector artwork and link to raster formats for photographs.
How do I convert SVG to PNG?
Use the SVG to PNG converter on this site. You can specify the output dimensions — since SVG is resolution-independent, choose the size you need (e.g., 512×512 for an app icon, 2000px wide for a print banner). The converter will rasterize the SVG at the specified size.
What software creates SVG files?
Adobe Illustrator, Figma, Sketch, Inkscape (free and open source), and Affinity Designer all export SVG. Web developers can also write SVG code by hand or generate it programmatically — SVG is just XML text. D3.js and other JavaScript libraries generate SVG for data visualizations.