SVG (.svg)

---
name: svg
description: "Master SVG file format: analyze its XML structure, rendering model, and interactivity to build scalable web graphics."
metadata:
  tags: "svg, vector-graphics, web-development, xml-markup, css-and-styling, svg-animations, web-icons"
  source: "https://skilldb.dev/skills/file-formats-skills/svg"
  pack: "file-formats-skills"
  category: "Technology & Engineering"
---

# SVG (.svg)

## When to use this skill
Use when the user says things like:
- "Explain SVG file format and XML structure"
- "Show me how to use SVG in web pages"
- "Teach SVG animations and interactivity"
- "How to optimize SVG assets"
- "Create scalable icons with SVG"


You are a file format specialist with deep knowledge of the SVG image format, its XML structure, rendering model, and use in web development and design systems.

## Overview

SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics. It was developed by the W3C (World Wide Web Consortium), with the first specification (SVG 1.0) published in 2001. SVG 1.1 (2003, revised 2011) is the most widely implemented version. Unlike raster formats, SVG describes shapes mathematically using paths, curves, lines, and text, meaning images scale infinitely without pixelation. SVG can be styled with CSS, manipulated with JavaScript, and embedded directly in HTML. It is the standard format for icons, logos, illustrations, data visualizations, and any graphic that must render crisply at multiple sizes.

## Technical Specifications

- **File extension(s):** `.svg`, `.svgz` (gzip-compressed SVG)
- **MIME type:** `image/svg+xml`
- **Compression type:** None (plain text XML). SVGZ applies gzip compression, typically reducing size 50-80%.
- **Color depth:** Unlimited (colors defined as CSS values: hex, RGB, HSL, named colors). Supports opacity and gradients.
- **Max dimensions:** No inherent pixel limit (vector graphics are resolution-independent). The viewBox attribute defines the coordinate system.
- **Transparency:** Full alpha transparency via the `opacity` property, `fill-opacity`, `stroke-opacity`, and RGBA/HSLA colors
- **Metadata support:** Dublin Core metadata, custom data attributes, embedded RDF
- **Text:** Native text rendering with font support (system fonts, web fonts, or embedded fonts)
- **Animation:** SMIL animation (built-in), CSS animations/transitions, JavaScript animation via DOM manipulation
- **Interactivity:** Full DOM events (click, hover, drag), scriptable with JavaScript
- **Filters:** Gaussian blur, drop shadow, color manipulation, displacement maps, and compositing via SVG filter primitives

## How to Work With It

### Opening & Viewing

- **Web browsers:** All modern browsers render SVG natively (inline in HTML, as `<img>` src, or as CSS background)
- **Text editors:** SVG files are plain XML and can be read/edited in any text editor
- **Design tools:** Figma, Illustrator, Inkscape, Sketch, Affinity Designer

### Creating & Editing

- **Code directly:** SVG can be hand-written in any text editor. Simple shapes require just a few lines of XML.
- **Design tools:** Figma and Illustrator export SVG. Inkscape is a free, dedicated SVG editor.
- **Optimization:** `svgo` (SVG Optimizer) removes unnecessary metadata, comments, hidden elements, and redundant attributes. Typical savings: 20-60%.
- **Tips:** Avoid embedded raster images within SVG. Minimize path precision (2 decimal places is usually sufficient). Use `<symbol>` and `<use>` for repeated elements. Prefer CSS classes over inline styles for reusable icons.
- **Accessibility:** Add `<title>` and `<desc>` elements, use `role="img"` and `aria-labelledby` when embedding in HTML.

### Converting To/From

- **SVG to PNG:** `magick -density 300 input.svg output.png` or use `librsvg`: `rsvg-convert -w 1024 input.svg -o output.png`
- **SVG to PDF:** `rsvg-convert -f pdf input.svg -o output.pdf` or Inkscape: `inkscape input.svg --export-filename=output.pdf`
- **Raster to SVG (tracing):** `potrace` for bitmap-to-vector conversion, Illustrator's Image Trace, Inkscape's Trace Bitmap. Results depend heavily on input quality.
- **Optimize:** `svgo input.svg -o output.svg` or online at svgomg.net
- **Compress:** `gzip -9 input.svg` and rename to `.svgz`; serve with `Content-Encoding: gzip`

## Common Use Cases

- Icons and icon systems (inline SVG icons, SVG sprite sheets)
- Logos and branding (scale from favicon to billboard)
- Data visualization (D3.js, Chart.js output)
- Interactive maps and diagrams
- Illustrations and infographics
- UI components (buttons, decorations, backgrounds)
- Animation (loading spinners, micro-interactions, animated illustrations)
- Print-ready vector artwork

## Pros & Cons

**Pros:**
- Infinitely scalable without quality loss
- Small file size for simple graphics (often smaller than equivalent PNG)
- Editable as text/code; version-control friendly
- Styleable with CSS and scriptable with JavaScript
- Accessible (text is selectable, screen-readers can parse content)
- Can be inlined in HTML (no additional HTTP request)
- Animatable with CSS, SMIL, or JavaScript
- Searchable and indexable text content

**Cons:**
- Not suitable for photographs or complex raster imagery
- Rendering performance degrades with very complex paths (thousands of nodes)
- Inconsistent rendering across browsers for advanced features (filters, fonts)
- Security concerns when displaying user-supplied SVG (can contain JavaScript, external references)
- Large SVGs with many elements can impact DOM performance
- Font rendering varies by platform unless fonts are embedded or converted to paths
- Older email clients do not support SVG

## Compatibility

| Platform | Support |
|----------|---------|
| Web browsers | All modern browsers (IE9+ with limitations, full support from IE11/Edge) |
| Figma | Full export/import |
| Illustrator | Full (native vector editor) |
| Inkscape | Full (dedicated SVG editor) |
| CSS background | Supported in all modern browsers |
| img tag | Supported (no scripting/interactivity) |
| Email | Limited (Outlook and some clients do not support) |

## Practical Usage

### Inline SVG Icons in Web Projects
The preferred modern approach for icons is inline SVG, either directly or via a sprite sheet:

```html
<!-- Inline SVG icon — fully styleable with CSS -->
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

<!-- SVG sprite sheet — define once, reference many times -->
<svg style="display:none">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
  </symbol>
</svg>
<svg class="icon"><use href="#icon-search"/></svg>
```

### SVG Optimization in Build Pipelines
Integrate `svgo` into your build process to strip editor metadata and reduce file size:

```bash
# Single file
svgo input.svg -o output.svg

# Entire directory
svgo -f ./src/icons/ -o ./dist/icons/

# Custom config for preserving viewBox and specific attributes
svgo --config='{"plugins":[{"name":"preset-default","params":{"overrides":{"removeViewBox":false}}}]}' input.svg
```

### Data Visualization with D3.js
SVG is the rendering target for D3.js, the dominant data visualization library. SVG's DOM integration means each chart element is a selectable, styleable, animatable node — ideal for interactive dashboards.

### Security Considerations
When accepting user-uploaded SVGs (e.g., avatar uploads, content management), sanitize aggressively:

```javascript
// DOMPurify removes JavaScript, event handlers, and external references
import DOMPurify from 'dompurify';
const cleanSVG = DOMPurify.sanitize(rawSVG, { USE_PROFILES: { svg: true } });
```

Never render user-supplied SVG inline without sanitization — SVG can contain `<script>` tags, `onload` handlers, and external resource references.

## Anti-Patterns

**Embedding raster images inside SVG.** An SVG containing a base64-encoded PNG is just a PNG with extra overhead. If the content is photographic, use a raster format directly.

**Exporting SVG from Illustrator/Figma without optimization.** Design tools embed editor metadata, redundant transforms, and excessive decimal precision. Always run `svgo` before deployment — savings of 30-60% are typical.

**Using SVG for complex photographic effects.** SVG filters (blur, color matrix) are powerful but computationally expensive on large or complex elements. For heavy image processing, use raster formats or CSS filters on `<img>` elements.

**Forgetting the `viewBox` attribute.** Without `viewBox`, SVG does not scale responsively. Always define `viewBox` and avoid hardcoded `width`/`height` attributes when the SVG should scale with its container.

**Converting text to paths unnecessarily.** Converting text to `<path>` elements removes searchability, accessibility, and editability. Only convert to paths when the exact font rendering is critical and the SVG will be used as a static image (logos, icons).

## Related Formats

- **PDF:** Vector format for documents; more suitable for print and multi-page layouts
- **EPS:** Legacy vector format for print; being replaced by PDF and SVG
- **AI:** Adobe Illustrator native format; more features but proprietary
- **PNG:** Raster export target for SVG when fixed resolution is needed
- **Icon fonts:** Alternative for icon delivery, but SVG icons are now preferred for flexibility and accessibility
- **Canvas (HTML):** Immediate-mode 2D drawing API; better for real-time graphics, worse for static/accessible content