The Definitive Desktop & Mobile SVG Reference: Built for front-end engineers, design system authors, and UI developers who need immediate, copy-ready SVG syntax without wading through obsolete W3C specs. Features interactive real-time search, 1-click clipboard copying, and live vector sandboxing.
- Instant Filter: Search 49+ categorized snippets across primitives, path commands, CSS styling, React JSX, and WCAG rules.
- Live Sandbox Studio: Test stroke weights, viewBoxes, and currentColor adaptations in real-time.
- Battle-Tested Reference Tables: Primitives matrix, path commands, presentation attributes vs modern CSS, and React 19 SSR patterns.
Draws rectangle with rounded corner curvature rx/ry.
<rect x="2" y="2" width="20" height="20" rx="4" />
Perfect vector circle centered at (cx, cy) with radius r.
<circle cx="12" cy="12" r="10" />
Stretched circular shape with independent rx horizontal and ry vertical radii.
<ellipse cx="12" cy="12" rx="10" ry="6" />
Straight line drawn from starting (x1, y1) to terminal (x2, y2).
<line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" stroke-width="2" />
Series of connected straight line segments without auto-closing contour.
<polyline points="4,14 10,20 20,4" fill="none" stroke="currentColor" stroke-width="2" />
Closed polygonal shape connecting ordered coordinate pairs with automatic closing segment.
<polygon points="12,2 15,8 22,9 17,14 18,21 12,17 6,21 7,14 2,9 9,8" />
Renders accessible, indexable vector text aligned to baseline coordinate.
<text x="12" y="16" text-anchor="middle" font-size="12" fill="currentColor">SVG</text>
Sub-line positioning element for multi-line typography within a parent <text>.
<tspan x="12" dy="1.4em">Sub-heading</tspan>
Move pen, draw straight lines, and close contour back to origin with join caps.
d="M 2 2 L 22 12 L 2 22 Z"
Single-coordinate horizontal and vertical line drawing commands to save bytes.
d="M 2 4 H 22 V 20 H 2 Z"
Full cubic curve with two control points chained into smooth reflected S shorthand.
d="M 0 50 C 20 0, 40 0, 60 50 S 100 100, 120 50"
Lightweight single control point parabola chained with smooth reflected T shorthand.
d="M 10 80 Q 52.5 10, 95 80 T 180 80"
7 parameters: rx ry x-axis-rotation large-arc-flag sweep-flag x y.
A 12 12 0 0 1 24 12
Commands offset from current pen position rather than absolute origin (0,0).
d="m 10 10 l 20 0 0 20 -20 0 z"
Inverts fill status for overlapping sub-paths, creating clean cutouts regardless of winding.
fill-rule="evenodd"
Omits redundant command characters and spaces before minus signs for minimum payload.
d="M10 20L30 40H50V60Z"
Inherits computed CSS text color from parent button or hover state seamlessly.
fill="currentColor" stroke="none"
Preserves fixed 1.5px/2px stroke thickness regardless of zoom or scaling.
vector-effect: non-scaling-stroke;
Tints external SVG files using CSS background-color without inlining markup.
mask: url(/icon.svg) no-repeat center / contain;
Creates dashed borders and enables SVG stroke self-drawing animations.
stroke-dasharray="100" stroke-dashoffset="50"
Sets styling of stroke endpoints: round, square, or butt.
stroke-linecap="round"
Sets styling of shape vertices: round, bevel, or sharp miter.
stroke-linejoin="round"
Applies accurate silhouette shadow hugging complex vector contour lines.
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
Prevents click event target interception when icon is nested inside an interactive button.
pointer-events: none;
Drives SVG fills and stroke colors directly from CSS custom properties for instant dark mode.
fill: var(--icon-fill, #C1DD2D);
High-performance hardware-accelerated outline drawing animation using CSS keyframes.
@keyframes draw { to { stroke-dashoffset: 0; } }
Scales fluidly to any CSS container width while maintaining internal coordinate grid.
<svg viewBox="0 0 24 24" width="100%" height="auto">
Stretches graphic non-uniformly to completely fill container dimensions.
preserveAspectRatio="none"
Default proportional scaling (letterbox/contain) centering graphic in viewport.
preserveAspectRatio="xMidYMid meet"
Uniform cover scaling filling viewport completely while cropping overflow.
preserveAspectRatio="xMidYMid slice"
Rotates geometry around an optional explicit center point (cx, cy).
transform="rotate(45 12 12)"
Multiplies element coordinates by scaling factor along x and y axes.
transform="scale(1.5)"
Shifts geometry position by tx horizontally and ty vertically.
transform="translate(10 15)"
Hard 1-bit boundary mask clipping child graphics to a vector shape contour.
<clipPath id="c1"><circle cx="12" cy="12" r="10" /></clipPath>
Defines directional color gradient referenced via url(#id).
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
Concentric circular color interpolation with custom lighting focal point (fx, fy).
<radialGradient id="r1" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
Repeated decorative vector grid tile filling container surfaces seamlessly.
<pattern id="p1" width="20" height="20" patternUnits="userSpaceOnUse">
Generates collision-free IDs across SSR, Next.js Server Components, and client hydration.
const id = useId().replace(/:/g, '');
Type-safe React icon component forwarding props and standard SVG attributes.
export const Icon = ({ size = 24, ...props }: SVGProps<SVGSVGElement>) => (...)
Sets responsive dimensions and theme colors using standard Tailwind CSS classes.
<svg className="w-6 h-6 text-primary transition-colors" viewBox="0 0 24 24">
Efficiently instances cached SVG symbols across hundreds of component mounts.
<svg className="w-5 h-5"><use href="/icons/sprite.svg#search" /></svg>
Optimal Next.js Image component configuration for rendering static vector assets.
<Image src="/icon.svg" width={24} height={24} alt="Icon" unoptimized />
Compiler rule transforming raw .svg files directly into imported React components.
{ icon: true, typescript: true, dimensions: false }
Allows parent components to attach DOM refs directly to the underlying <svg> node.
export const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (...)
Hides visual UI icon from screen readers when paired with visible button text.
aria-hidden="true" focusable="false"
Announces semantic meaning when icon has no accompanying visible text label.
role="img" aria-labelledby="icon-title"
Accessible icon button pattern combining decorative SVG with .sr-only visually hidden label.
<button><svg aria-hidden="true" /><span class="sr-only">Close modal</span></button>
Ensures icon strokes remain visible in Windows High Contrast / Forced Colors mode.
@media (forced-colors: active) { path { stroke: ButtonText; } }
Provides comprehensive long-form descriptions for complex diagrams and data visualizations.
<desc id="chart-desc">Monthly user retention chart from January to December 2026</desc>
<!-- Code renders dynamically -->1. SVG Geometric Primitives Reference Matrix
Every built-in SVG shape primitive and its required coordinate attributes:
| Element | Required Attributes | Sizing / Positioning Syntax | Default Coordinate Behavior | Common Gotcha |
|---|---|---|---|---|
| <rect> | x, y, width, height |
<rect x="0" y="0" width="24" height="24" rx="4" /> |
Top-left corner anchored at (x,y) | Omitting width or height disables rendering entirely |
| <circle> | cx, cy, r |
<circle cx="12" cy="12" r="10" /> |
Center anchored at (cx,cy) | Setting negative radius renders nothing |
| <ellipse> | cx, cy, rx, ry |
<ellipse cx="12" cy="12" rx="10" ry="6" /> |
Center anchored at (cx,cy) | Fails if rx or ry is zero or omitted |
| <line> | x1, y1, x2, y2 |
<line x1="2" y1="2" x2="22" y2="22" /> |
Stroke connects start to end coordinates | Requires stroke and stroke-width; fill has no effect |
| <polyline> | points |
<polyline points="2,2 12,12 22,2" /> |
Open connected line segments | Default fill is black; set fill="none" for open line graphs |
| <polygon> | points |
<polygon points="12,2 22,22 2,22" /> |
Closed geometric polygon | Automatically closes last point back to the first point |
| <path> | d |
<path d="M 2 2 L 22 22" /> |
Arbitrary complex contours & curves | Sensitive to unescaped quotes when embedded in Data URIs |
2. SVG Path Commands Master Matrix
The 10 path instructions supported by all modern SVG rasterization engines:
| Command | Name | Parameters | Control Handles | Geometric Behavior | Relative Equivalent |
|---|---|---|---|---|---|
| M | MoveTo | (x, y)+ |
0 | Moves pen without drawing. Implicit subsequent pairs act as LineTo. | m dx dy |
| L | LineTo | (x, y)+ |
0 | Draws straight line from pen to coordinates. | l dx dy |
| H | Horizontal Line | x+ |
0 | Draws horizontal line; saves byte space over L. | h dx |
| V | Vertical Line | y+ |
0 | Draws vertical line; saves byte space over L. | v dy |
| C | Cubic Bézier | (x1, y1, x2, y2, x, y)+ |
2 | Full cubic curve with independent start and arrival tangent handles. | c dx1 dy1, dx2 dy2, dx dy |
| S | Smooth Cubic | (x2, y2, x, y)+ |
1 (1 reflected) | Mirrors previous curve's control point for seamless C1 continuity. | s dx2 dy2, dx dy |
| Q | Quadratic Bézier | (x1, y1, x, y)+ |
1 | Single control point curve. Faster GPU evaluation than cubic. | q dx1 dy1, dx dy |
| T | Smooth Quadratic | (x, y)+ |
0 (1 reflected) | Mirrors previous Q control handle for chained wave curves. | t dx dy |
| A | Elliptical Arc | (rx, ry, rot, laf, swf, x, y)+ |
Ellipse geometry | Draws elliptical or circular arc between two points. | a rx ry rot laf swf dx dy |
| Z | ClosePath | None | 0 | Connects current position back to initial subpath start point. | z |
3. Presentation Attributes vs. Modern CSS Properties
In SVG 2, many legacy XML presentation attributes map directly to CSS properties. Understanding CSS specificity and cascade order prevents common styling overrides:
| Presentation Attribute | Modern CSS Property | Inherited? | CSS Specificity Rule | Recommended 2026 Best Practice |
|---|---|---|---|---|
fill="..." |
fill: <color> | <url> |
Yes | External CSS overrides presentation attribute | Set fill: currentColor or CSS variables |
stroke="..." |
stroke: <color> | <url> |
Yes | External CSS overrides presentation attribute | Set stroke: currentColor on wrapper |
stroke-width="..." |
stroke-width: <length> |
Yes | External CSS overrides presentation attribute | Define default in SVG; adjust with utility classes |
stroke-linecap="..." |
stroke-linecap: round | square |
Yes | External CSS overrides presentation attribute | Standardize on round for friendly icons |
stroke-linejoin="..." |
stroke-linejoin: round | miter |
Yes | External CSS overrides presentation attribute | Use round to avoid ugly spike corners |
vector-effect="..." |
vector-effect: non-scaling-stroke |
No | CSS property supported in all modern browsers | Apply to icons that scale dynamically across viewports |
4. ViewBox & preserveAspectRatio Matrix
The viewBox="min-x min-y width height" defines the virtual camera coordinate bounds. When the aspect ratio of the SVG container does not match the viewBox aspect ratio, preserveAspectRatio dictates alignment and clipping:
| Attribute Value | Scaling Philosophy | Behavior when Container Aspect Mismatches | Common Equivalent in CSS |
|---|---|---|---|
| xMidYMid meet (Default) |
Contain | Entire graphic fits inside container; letterboxing or pillarboxing occurs | object-fit: contain |
| xMidYMid slice | Cover | Graphic scales to cover entire container; excess geometry is cropped | object-fit: cover |
| none | Stretch / Distort | Graphic stretches non-uniformly to fill exact container width & height | object-fit: fill |
| xMinYMin meet | Top-Left Align | Fits graphic and anchors to top-left corner without distortion | object-position: top left |
5. Modern React 19 & Next.js 15 SVG Architecture
Best practices for shipping icons in modern React Server Components (RSC) with zero client JavaScript overhead:
// 1. Zero-JS Server Component (Next.js 15 App Router)
export function ServerIcon({ className = "w-6 h-6" }: { className?: string }) {
return (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className={className}
aria-hidden="true"
>
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
);
}
// 2. Client Component with Dynamic useId() Gradient
"use client";
import { useId } from 'react';
export function ClientGradientIcon() {
const gradId = `g-${useId().replace(/:/g, '')}`;
return (
<svg viewBox="0 0 24 24" className="w-8 h-8">
<defs>
<linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stopColor="#C1DD2D" />
<stop offset="100%" stopColor="#06B6D4" />
</linearGradient>
</defs>
<circle cx="12" cy="12" r="10" fill={`url(#${gradId})`} />
</svg>
);
}Cheat Sheet Golden Rules for Production
- Always provide viewBox: Never omit
viewBoxunless building fixed 1:1 canvas pixels. - CurrentColor is king: Use
currentColorfor fills and strokes to avoid theme clashing. - Isolate IDs: Never ship static
idattributes in reusable React or Vue components. - Sanitize SVGO aggressively: Strip editor metadata (Illustrator, Figma) but preserve
viewBoxand required ARIA tags.
Frequently Asked Questions
What is the single most important rule for responsive SVG scaling?
The single most important rule is defining a valid viewBox attribute (e.g. viewBox="0 0 24 24") while omitting hardcoded pixel width and height attributes in the SVG markup. Then, control dimensions in CSS via width: 100%; height: auto; or explicit utility classes like w-6 h-6. The viewBox establishes the internal coordinate system and preserveAspectRatio governs proportional scaling.
How does currentColor work for SVG icons in modern design systems?
When you set fill="currentColor" or stroke="currentColor" inside an SVG element, the graphic automatically inherits the computed CSS color value of its immediate parent container. This allows icons to adapt instantaneously to button hover states, active navigation tabs, and dark mode theme transitions without writing custom SVG style rules.
What is the difference between vector-effect="non-scaling-stroke" and default stroke scaling?
By default, when an SVG scales up or down, its stroke-width scales proportionally with the viewBox geometry. Setting vector-effect="non-scaling-stroke" instructs the browser to render the stroke at a constant physical pixel width regardless of geometric transforms or viewport zoom levels, keeping icon lines crisp and uniform.
How do you make an SVG icon completely accessible to screen readers?
For decorative icons, add aria-hidden="true" and focusable="false". For standalone informative icons, add role="img", an aria-labelledby attribute referencing a nested <title id="icon-title"> tag, and provide a concise descriptive label explaining the icon's action or meaning.
What is the best way to prevent SVG ID collisions in React 19 and Next.js 15?
Use the React useId() hook to generate uniquely scoped identifiers for every <linearGradient>, <clipPath>, or <mask> element, replacing hardcoded strings with dynamic IDs (e.g., id={maskId}). This prevents multi-instance components and SSR hydration from corrupting each other's references.
Why does an external SVG loaded via <img> ignore CSS styles?
When an SVG is embedded via an <img> tag or CSS background-image, the browser executes it in an isolated, sandboxed browsing context for security reasons. External stylesheets and parent CSS cascade cannot cross this security boundary. To style internal SVG elements with CSS, you must embed the SVG inline or use CSS mask-image.