svg

The SVG element embeds scalable vector graphics with size variants, color options, and built-in animations for icons and illustrations.

Description

The <svg> element embeds Scalable Vector Graphics directly in HTML. SVG is resolution-independent, accessible, and styleable with CSS. Vanilla Breeze provides size classes, color variants, and animation utilities for inline SVG.

Unlike raster images, SVG scales to any size without quality loss, making it ideal for icons, logos, and illustrations.

When to Use

  • Icons - UI icons that need to scale and change color
  • Logos - Brand marks that must be crisp at any size
  • Illustrations - Vector artwork and diagrams
  • Charts - Accessible data visualizations
  • Animations - Animated graphics via CSS or SMIL

When to Use Other Elements

  • Use <img> for photographs and complex raster images
  • Use <canvas> for dynamic, pixel-based graphics
  • Use <icon-wc> for the icon component with sprite support

Size Variants

Predefined size classes for consistent icon sizing across your application.

.xs 0.75rem .s 1rem .m 1.5rem .l 2rem .xl 3rem .xxl 4rem
<svg class="m currentcolor" viewBox="0 0 24 24"> <!-- SVG content --> </svg>
Class Size Use Case
.xs 0.75rem (12px) Inline indicators, badges
.s 1rem (16px) Small icons in text
.m 1.5rem (24px) Default icon size, buttons
.l 2rem (32px) Featured icons, nav items
.xl 3rem (48px) Hero icons, empty states
.xxl 4rem (64px) Large illustrations

Color Variants

Control SVG fill color with utility classes.

.currentcolor .interactive .muted
<!-- Inherit text color --> <svg class="m currentcolor">...</svg> <!-- Interactive/primary color --> <svg class="m interactive">...</svg> <!-- Muted/secondary color --> <svg class="m muted">...</svg>

currentColor Pattern

Use currentColor in your SVG to inherit the CSS color property. This allows icons to match surrounding text.

<!-- SVG uses currentColor for stroke --> <svg viewBox="0 0 24 24" class="m"> <path stroke="currentColor" fill="none" d="..." /> </svg> <!-- Or use the .currentcolor class for fill --> <svg viewBox="0 0 24 24" class="m currentcolor"> <path d="..." /> </svg>

Animations

Built-in animation classes for loading indicators and attention-grabbing icons.

.spin .pulse
<!-- Spinning loader --> <svg class="m spin currentcolor" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="30 60" /> </svg> <!-- Pulsing indicator --> <svg class="m pulse currentcolor" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" fill="currentColor" /> </svg>

Respecting Motion Preferences

Animations should respect prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) { svg.spin, svg.pulse { animation: none; } }

Responsive SVG

Full-width SVG for illustrations and diagrams.

<!-- Full-width responsive SVG --> <svg class="full" viewBox="0 0 400 100" preserveAspectRatio="xMidYMid meet"> <!-- SVG content scales to container --> </svg> <!-- Responsive SVG maintaining aspect ratio --> <svg class="responsive" viewBox="0 0 800 600"> <!-- Content --> </svg>

Live Examples

Inline with Text

Task completed successfully

Warning: Check your input

Button with Icon

Icon Grid

User Settings Email Security

Accessibility

Decorative Icons

Icons that don't convey information should be hidden from assistive technology.

<svg aria-hidden="true" class="m currentcolor" viewBox="0 0 24 24"> <!-- Icon content --> </svg>

Informative Icons

Icons that convey meaning need accessible names.

<!-- Method 1: title element --> <svg role="img" class="m" viewBox="0 0 24 24"> <title>Warning</title> <path d="..." /> </svg> <!-- Method 2: aria-label --> <svg aria-label="Error" role="img" class="m" viewBox="0 0 24 24"> <path d="..." /> </svg>

Interactive Icons

Wrap icons in buttons or links with proper labels.

<!-- Button with icon --> <button type="button" aria-label="Close dialog"> <svg aria-hidden="true" class="m" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> </svg> </button> <!-- Link with icon and text --> <a href="/settings"> <svg aria-hidden="true" class="s" viewBox="0 0 24 24">...</svg> Settings </a>

Best Practices

  • Use aria-hidden="true" on decorative icons
  • Provide <title> or aria-label for meaningful icons
  • Don't rely on icons alone - pair with visible text when possible
  • Ensure sufficient color contrast
  • Test with screen readers

Related Elements

  • <icon-wc> - Icon component with sprite support
  • <img> - For external SVG files: <img src="icon.svg">
  • <canvas> - For dynamic pixel-based graphics
  • <figure> - Wrap SVG diagrams with captions

CSS Reference

Styles defined in /src/native-elements/svg/styles.css

Selector Properties
svg display: inline-block; vertical-align: middle; overflow: visible;
svg.xs inline-size: 0.75rem; block-size: 0.75rem;
svg.s inline-size: 1rem; block-size: 1rem;
svg.m inline-size: 1.5rem; block-size: 1.5rem;
svg.l inline-size: 2rem; block-size: 2rem;
svg.xl inline-size: 3rem; block-size: 3rem;
svg.xxl inline-size: 4rem; block-size: 4rem;
svg.currentcolor fill: currentColor;
svg.interactive fill: var(--color-interactive);
svg.muted fill: var(--color-text-muted);
svg.spin animation: svg-spin 1s linear infinite;
svg.pulse animation: svg-pulse 2s ease-in-out infinite;