svg

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 <picture> for responsive raster images with multiple sources
• 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.

Color Variants

Control SVG fill color with utility classes.

currentColor Pattern

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

Animations

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

Respecting Motion Preferences

Animations should respect prefers-reduced-motion.

Responsive SVG

Full-width SVG for illustrations and diagrams.

Live Examples

Inline icons, button icons, and icon grids demonstrating real-world SVG usage patterns.

Accessibility

Decorative Icons

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

Informative Icons

Icons that convey meaning need accessible names.

Interactive Icons

Wrap icons in buttons or links with proper labels.

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

• <icon-wc> - VB's icon component wraps SVG with sprite support and consistent sizing
• <img> - For raster images (photographs, screenshots) or external SVG files via <img src="icon.svg">
• <picture> - For responsive raster images with multiple sources and art direction
• <canvas> - For dynamic pixel-based graphics
• <figure> - Wrap SVG diagrams with captions

CSS Reference

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