SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) is an open-standard, XML-based vector graphics format established by the World Wide Web Consortium (W3C) in 1999. Unlike raster bitmap formats (PNG, JPEG, WebP) that store an array of individual colored pixels, SVG defines visual geometries mathematically using coordinates, paths, polygons, lines, curves, and text elements. As a result, SVG graphics scale infinitely to any resolution—from crisp retina smartphone displays to billboard displays—without pixelation or file size increases.

Minify, optimize, and strip redundant metadata from your vector assets using our client-side SVG Optimizer tool.

---

Technical Specifications at a Glance

Specification	Details
Standard Body	World Wide Web Consortium (W3C)
Current Standard	W3C SVG 2 / SVG 1.1 Second Edition
MIME Media Type	image/svg+xml
Standard File Extension	.svg, .svgz (gzip-compressed SVG)
Underlying Grammar	Strict XML
Styling & Scripting	Supports inline and external CSS and JavaScript
DOM Integration	Direct inclusion in HTML5 DOM as <svg> element

---

Anatomy of an SVG Document

Because SVG is human-readable XML, developers can inspect, edit, and animate vector tags directly:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 100 100" 
  width="100" 
  height="100"
  role="img"
  aria-label="DevFlow Logo"
>
  <!-- Background Circle -->
  <circle cx="50" cy="50" r="45" fill="#0284c7" />
  
  <!-- Smooth Vector Path with Bézier Curve -->
  <path 
    d="M 30 50 Q 50 20 70 50 T 90 50" 
    stroke="#ffffff" 
    stroke-width="5" 
    fill="none" 
    stroke-linecap="round" 
  />
</svg>

Core SVG Primitives

Element	Description	Common Attributes
<rect>	Draws rectangles and rounded squares.	x, y, width, height, rx, ry
<circle>	Draws circles from a center coordinate.	cx, cy, r
<ellipse>	Draws an ellipse with horizontal and vertical radii.	cx, cy, rx, ry
<line>	Draws a straight line between two points.	x1, y1, x2, y2
<path>	The most versatile element; defines arbitrary curves and shapes.	d (Path command string: M, L, C, Z)
<text>	Renders searchable, accessible text glyphs.	x, y, font-family, font-size

---

SVG vs Raster Formats (PNG & WebP)

Dimension	SVG (Vector)	PNG / WebP (Raster)
Scaling Behavior	Perfectly crisp at infinite magnification	Blurry / pixelated when magnified beyond native dimensions
Best For	Icons, logos, geometric illustrations, charts	Photographs, detailed artwork, complex textures
File Size Scaling	Depends on path/node complexity (not dimensions)	Proportional to pixel width × height
Interactivity	Scriptable with JavaScript; styleable via CSS	Static image pixels (no inner DOM nodes)
Accessibility	Screen-reader accessible via <title> and <desc>	Requires external alt attribute on <img> tag

---

Security Considerations: SVG as an Attack Vector

Because SVG supports embedded <script> tags and foreign objects, displaying untrusted, user-uploaded SVG files directly on your domain creates a severe Cross-Site Scripting (XSS) vulnerability:

<!-- DANGEROUS: Executes arbitrary code when viewed standalone in browser -->
<svg xmlns="http://www.w3.org/2000/svg">
  <script>alert(document.cookie);</script>
</svg>

Defense-in-Depth Strategies:

• Sanitize on Upload: Use tools like DOMPurify to strip <script>, onload, javascript:, and external entity tags.
• Serve via <img> tags: When an SVG is rendered via <img src="user.svg">, modern browsers automatically sandbox the image and disable JavaScript execution.
• Strict Content Security Policy (CSP): Ensure headers prevent script execution via Content Security Policy (CSP).

---

Frequently Asked Questions

What does the viewBox attribute do in SVG?

The viewBox="min-x min-y width height" attribute defines the internal coordinate system and aspect ratio of an SVG canvas. It allows the vector graphic to automatically stretch, shrink, and scale to fit any container dimensions while preserving visual proportions.

Why do exported SVGs from Figma or Illustrator have huge file sizes?

Design software exports SVGs with bloated metadata, redundant editor namespaces (xmlns:sketch, xmlns:inkscape), invisible layer groups, and overly precise floating-point decimal coordinates. Running files through an SVG Optimizer routinely shrinks file size by 50% to 80% with zero visual quality loss.

Can SVGs be converted into favicons for web apps?

Yes. Modern browsers natively support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">, allowing light and dark mode favicon switching using CSS @media (prefers-color-scheme: dark). You can also generate multi-size ICO/PNG icons with our Favicon Generator.