Struct Svg 

pub struct Svg;

The <svg> element - embeds SVG (Scalable Vector Graphics) content.

Purpose

The <svg> element is a container for SVG graphics. SVG is an XML-based vector image format for defining two-dimensional graphics with support for interactivity and animation. SVG images scale without loss of quality and can be styled with CSS and manipulated with JavaScript.

Content Categories

• Flow Content
• Phrasing Content
• Embedded Content
• Palpable Content

Permitted Content Model

• SVG elements (follows SVG specification, not HTML)

Common Use Cases

• Scalable icons and logos
• Data visualizations and charts
• Interactive graphics and diagrams
• Animated illustrations
• Responsive vector artwork

Key Attributes

• width: Width of the SVG viewport
• height: Height of the SVG viewport
• viewBox: Define coordinate system and aspect ratio
• preserveAspectRatio: How to scale the viewBox
• xmlns: XML namespace (usually "http://www.w3.org/2000/svg")
• Plus all SVG-specific attributes

Example

<!-- Simple SVG circle -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<!-- SVG with viewBox for responsive scaling -->
<svg viewBox="0 0 200 200" width="100%" height="auto">
  <rect x="10" y="10" width="180" height="180" fill="lightblue" />
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

<!-- Inline SVG icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
  <polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>

<!-- SVG with accessibility -->
<svg role="img" aria-labelledby="logo-title" width="200" height="100">
  <title id="logo-title">Company Logo</title>
  <rect x="0" y="0" width="200" height="100" fill="#333"/>
  <text x="100" y="55" text-anchor="middle" fill="white">LOGO</text>
</svg>

Accessibility

• Use <title> element inside SVG for accessible names
• Add role="img" for decorative or meaningful graphics
• Use aria-labelledby to reference title elements
• Provide <desc> for longer descriptions
• Use aria-hidden="true" for purely decorative SVGs
• Ensure sufficient color contrast

WHATWG Specification

• 4.8.16 SVG

Trait Implementations

impl HtmlElement for Svg

const TAG: &'static str = "svg"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl EmbeddedContent for Svg

impl FlowContent for Svg

impl PalpableContent for Svg

impl PhrasingContent for Svg