What does viewBox do in SVG?

viewBox defines the coordinate system and aspect ratio of the SVG. The four values are min-x, min-y, width, and height. Setting viewBox="0 0 24 24" on an icon means its internal coordinate space is 24x24 units regardless of how large you render it.

Should I use inline SVG or img src for icons?

Inline SVG is preferred for icons because it can be styled with CSS (fill, stroke, color), animated, and made accessible with ARIA attributes. The img tag is better for complex illustrations that do not need styling.

Why set stroke="currentColor"?

currentColor inherits the CSS color property from the parent element. This means the icon automatically matches the text color of its container, making it trivial to handle light and dark modes.

SVG Icon XML Structure

SVG icons are XML documents that scale perfectly at any size and can be styled with CSS. This example shows the structure of a simple icon with a viewBox, a path element, and accessibility attributes for screen readers. The XML formatter validates well-formedness and helps identify unclosed tags that render as broken icons. Inline SVG embedded directly in HTML is more accessible than img tags because ARIA attributes can be applied and the SVG can be manipulated by JavaScript and CSS.

Example

<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>

[ open in XML Formatter → ]

FAQ

What does viewBox do in SVG?: viewBox defines the coordinate system and aspect ratio of the SVG. The four values are min-x, min-y, width, and height. Setting viewBox="0 0 24 24" on an icon means its internal coordinate space is 24x24 units regardless of how large you render it.
Should I use inline SVG or img src for icons?: Inline SVG is preferred for icons because it can be styled with CSS (fill, stroke, color), animated, and made accessible with ARIA attributes. The img tag is better for complex illustrations that do not need styling.
Why set stroke="currentColor"?: currentColor inherits the CSS color property from the parent element. This means the icon automatically matches the text color of its container, making it trivial to handle light and dark modes.

Related Examples

XML Sitemap for a Website

An XML sitemap tells search engine crawlers which pages to index, how often they...

RSS 2.0 Feed XML Example

RSS feeds let readers subscribe to your blog or podcast using any feed reader wi...

Android AndroidManifest.xml Example

The AndroidManifest.xml is the central configuration file for every Android appl...