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.

## Key Points

- **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
- **Web browsers:** All modern browsers render SVG natively (inline in HTML, as `<img>` src, or as CSS background)

## Quick Example

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

SVG (.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.

Core Philosophy

SVG is fundamentally different from every raster image format: it describes images using mathematics (paths, shapes, text, gradients) rather than pixels. This means an SVG scales to any resolution — from a 16-pixel favicon to a billboard — without any loss of quality. This resolution independence is SVG's defining advantage and the reason it is the correct format for logos, icons, illustrations, and any graphic that must render crisply at multiple sizes.

SVG is code. An SVG file is an XML document that can be authored by hand, generated programmatically, styled with CSS, animated with SMIL or JavaScript, and manipulated in the DOM like any HTML element. This programmability makes SVG uniquely powerful for interactive data visualizations (D3.js), animated UI elements, and dynamic graphics that respond to user interaction or application state.

SVG's power comes with responsibility. Because SVG is executable code, it can contain JavaScript, external resource references, and complex rendering instructions. Always sanitize user-uploaded SVGs to prevent XSS attacks and resource exhaustion. For static display, consider converting complex SVGs to optimized paths using SVGO, which strips metadata, simplifies paths, and reduces file size — often by 30-60%.

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:

<!-- 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:

# 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:

// 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