SVG Icon XML Structure

SVG icons are XML documents that scale to any size without pixelation, can be styled with CSS, animated with CSS or JavaScript, and made accessible with ARIA attributes. Understanding SVG's XML structure is useful for customizing icon libraries, debugging rendering issues, optimizing file sizes, and building accessible icon components. This example shows a settings gear icon with the full set of production-appropriate attributes. The svg element declares the XML namespace (xmlns), the viewBox defining the internal coordinate system, explicit width and height for default sizing, stroke-based rendering with currentColor, and accessibility attributes. Each of these attributes has a specific purpose. viewBox="0 0 24 24" defines the coordinate system for the SVG's internal drawing space: min-x=0, min-y=0, width=24, height=24. All the path coordinates in this icon are defined in this 24×24 unit space. When you set width="48" height="48" on the SVG element, the browser scales the 24×24 coordinate space to fit the 48×48 display space — perfect vector scaling with no blurriness. stroke="currentColor" is the key to CSS-controllable icon color. The CSS currentColor keyword inherits the computed color value from the element's parent. This means an icon inside a <button style="color: #3b82f6"> automatically renders in that blue color without any additional icon-specific CSS. Setting a new text color in a parent element automatically changes all icons inside it. This makes icon coloring trivial for hover states, dark mode, and interactive elements. fill="none" combined with stroke-width="2" implements a stroke-only (outline) style rather than a filled style. Most modern icon libraries (Heroicons, Feather, Lucide) use this style because it looks sharper at small sizes and scales well across different UI densities. accessibility attributes: aria-hidden="true" tells screen readers to skip the SVG when it's purely decorative (used next to visible text that already describes the action). focusable="false" prevents IE/Edge from making the SVG focusable. role="img" combined with a title element makes the SVG accessible as an image when it's used without accompanying text label — screen readers read the title ("Settings") when the user focuses or encounters the icon. Performance optimization: for icon-heavy UIs, use an SVG sprite (a hidden SVG with multiple symbols) and reference icons with <use href="#icon-settings">. This loads all icons in one HTTP request and allows browsers to cache the sprite efficiently. Alternatively, inline SVG in components eliminates the need for separate files and avoids HTTP requests. Tips: use SVGO to optimize SVG files before committing — it typically reduces file size by 40-80% by removing unnecessary precision in coordinates, merging paths, and stripping metadata. Most icon libraries ship pre-optimized SVGs, but custom icons exported from Figma or Illustrator often contain significant bloat.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2"
     aria-hidden="true" focusable="false" role="img">
  <title>Settings</title>
  <circle cx="12" cy="12" r="3"/>
  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>