What Is a .SVG File?

Scalable Vector Graphics (.svg)

What is an SVG file?

An SVG (Scalable Vector Graphics) file is a vector image format that uses XML markup to define two-dimensional graphics. Unlike raster images (like JPEG or PNG), SVG images are composed of mathematical descriptions of shapes, paths, and colors, making them infinitely scalable without loss of quality. SVG files can include interactive elements and animations.

Because an SVG is XML, it is also a text file. You can open the same .svg in a browser to see the picture and in a text editor to see the code that draws it, and you can edit either way.

Technical Specifications

• File Extensions: .svg, .svgz (gzip-compressed SVG)
• MIME Type: image/svg+xml
• Category: Image
• Encoding: XML text, UTF-8
• Specification: SVG 1.1 (W3C Recommendation, 2011); SVG 2 (W3C Candidate Recommendation)
• Standards body: World Wide Web Consortium (W3C)

Recognising an SVG file

SVG has no binary magic number. A file is identified by its XML structure: an optional <?xml ... ?> prologue, then an <svg> root element in the http://www.w3.org/2000/svg namespace:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <circle cx="12" cy="12" r="10" fill="#2a3344"/>
</svg>

An .svgz file is different: it begins with the gzip signature 1F 8B and must be decompressed before the XML is visible. Browsers handle this transparently when the server sends the right headers.

More Information

SVG was developed by the World Wide Web Consortium (W3C) and became a W3C Recommendation in 2001. The format was created to provide a vector graphics format for the web that could scale to any size while maintaining crisp, sharp edges. SVG has become increasingly popular with the rise of responsive web design and high-resolution displays.

SVG images are perfect for logos, icons, simple illustrations, and graphics that need to look sharp at any size. They can be styled with CSS, manipulated with JavaScript, and animated using various techniques. Modern web browsers have excellent SVG support, making it a reliable choice for web graphics.

SVG Format

SVG is based on XML and uses a hierarchical structure to define vector graphics:

Basic Elements

• <svg>: Root container element
• <rect>: Rectangles and squares
• <circle>: Circles
• <ellipse>: Elliptical shapes
• <line>: Straight lines
• <path>: Complex shapes using path data
• <polygon>: Multi-sided shapes
• <text>: Text elements

Advanced Features

• Gradients: Linear and radial color gradients
• Patterns: Repeating patterns for fills
• Filters: Visual effects like blur, shadows, lighting
• Clipping paths: Mask portions of elements
• Groups: Organize and transform multiple elements
• Definitions: Reusable elements and styles

Styling Options

• Inline styles: Style attributes on elements
• CSS styling: External or embedded stylesheets
• Presentation attributes: SVG-specific styling attributes
• CSS animations: Animate properties using CSS
• SMIL animations: SVG's built-in animation system

The viewBox

The single most important attribute for scaling. viewBox="0 0 24 24" declares the drawing's own coordinate system; width and height (or CSS) then decide how large it renders. An SVG with a viewBox and no fixed size scales to fit whatever box it is placed in, which is the behaviour responsive layouts want. An SVG with fixed width and height and no viewBox does not scale at all.

How to Open an SVG File

To view it

• Any browser: drag the file into Chrome, Firefox, Edge or Safari. This is the most faithful renderer available, since the browsers are the reference implementations.
• Windows: Photos and Paint open SVG in recent versions of Windows 11; File Explorer shows thumbnails. For older versions, a browser is the reliable choice.
• macOS: Preview and Quick Look (press Space in Finder) render SVG.
• Linux: Eye of GNOME, gThumb and most image viewers support SVG through librsvg.
• iPhone and Android: the built-in Files app previews SVG; a browser opens it as a page.

To edit it visually

• Inkscape: free, open source, and SVG is its native format, so nothing is lost on save.
• Adobe Illustrator: full import and export; use Export As, SVG rather than Save As for web-ready output.
• Figma and Sketch: import SVG as editable vectors and export it back.
• Affinity Designer: a one-time-purchase alternative to Illustrator with strong SVG support.
• Boxy SVG and SVG-Edit: browser-based editors that need no install.

To edit it as code

Any text editor, since it is XML. VS Code's SVG Preview extension shows the result beside the markup. Hand-editing is practical for icons and simple shapes, and it is the only way to fix things visual editors hide, such as a missing viewBox or an unwanted embedded font.

How to Convert an SVG File

To PNG, JPEG or WebP (rasterising)

Because SVG is resolution-independent, you choose the output size at conversion time:

# Inkscape, any OS
inkscape icon.svg --export-type=png --export-width=512 --export-filename=icon.png

# librsvg
rsvg-convert -w 512 icon.svg -o icon.png

# ImageMagick (uses librsvg or Inkscape underneath when available)
magick -density 300 -background none icon.svg icon.png

In a browser, open the SVG and take a screenshot, or use any online converter for a one-off.

To PDF

inkscape drawing.svg --export-type=pdf or rsvg-convert -f pdf drawing.svg -o drawing.pdf. Browsers also print SVG to PDF with Print, Save as PDF.

From PNG or JPEG to SVG (tracing)

A raster image has no shapes to recover, so conversion means tracing: software guesses outlines from the pixels. Inkscape's Path, Trace Bitmap and the potrace command do this well for logos and line art and poorly for photographs. There is no lossless way to turn a photo into a vector.

Compressing

gzip -k icon.svg produces icon.svg.gz; rename to .svgz for tools that expect it. For the web, serving .svg with HTTP compression achieves the same result without touching the file. SVGO (npx svgo icon.svg) strips editor metadata and redundant precision from the markup itself, often halving file size.

Using SVG on the Web

<!-- As an image: simplest, but CSS cannot reach inside it -->
<img src="logo.svg" alt="Company logo" width="120" height="40">

<!-- Inline: styleable and scriptable, becomes part of the page's DOM -->
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path d="M12 2 2 22h20z" fill="currentColor"/>
</svg>

<!-- As a CSS background -->
<div style="background-image: url('pattern.svg')"></div>

Use fill="currentColor" on inline icons so they inherit the surrounding text colour, and give decorative inline SVGs aria-hidden="true" while meaningful ones get a <title> element.

Security Notes

An SVG can contain <script> elements and event handlers, and it can reference external resources. Browsers run that script when the SVG is opened directly or inlined into a page, though not when it is loaded through an <img> tag. This makes user-uploaded SVGs a known cross-site-scripting vector. If you accept SVG uploads, sanitise them (DOMPurify handles SVG) or serve them only through <img>, and treat an SVG attachment from an unknown source the way you would an HTML file.

Advantages of SVG

• Scalability: Perfect quality at any size
• Small file sizes: Efficient for simple graphics
• Searchable text: Text content is indexable
• Accessibility: Can include alt text and descriptions
• Interactive: Supports hover effects and click events
• Animatable: CSS and JavaScript animations
• Styling: Can be styled with CSS
• Responsive: Adapts to different screen sizes

Limitations

• Poor fit for photographs: continuous-tone images need raster formats.
• Rendering differences: filters, fonts and some SVG 2 features vary between browsers and desktop apps.
• Complexity cost: a highly detailed vector with thousands of paths can be larger and slower than a PNG of the same picture.
• Font dependency: text renders in whatever font the viewer has unless converted to outlines or embedded.

Common Use Cases

SVG is ideal for:

• Website icons: Crisp icons for user interfaces
• Logos: Scalable brand graphics
• Simple illustrations: Line art and basic graphics
• Data visualizations: Charts and graphs
• Print graphics: High-quality printed materials
• Mobile apps: Retina-ready graphics
• Interactive graphics: Hover effects and animations

Related Formats

• PNG: the usual raster export target, with transparency.
• WEBP: smaller raster output for the web.
• AI: Adobe Illustrator's native format, which is PDF-based and often the source an SVG was exported from.
• XML: the markup language SVG is written in.
• EMF and WMF: Windows' own vector formats, common in Office documents.