SVG Fundamentals for Icons

Scalable Vector Graphics (SVG) is the preferred format for icons on the modern web. Understanding SVG fundamentals helps you create, optimize, and implement icons effectively. This guide covers the essential concepts every designer and developer should know.

What is SVG?

SVG is an XML-based markup language for describing two-dimensional vector graphics. Unlike raster formats (PNG, JPEG), SVGs are resolution-independent and can scale to any size without quality loss. This makes them ideal for icons that need to display clearly across different screen densities and sizes.

For the complete specification and documentation, refer to the W3C SVG specification.

Basic SVG Structure

An SVG document has a specific structure. Here's a minimal icon example:

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 24 24" 
     width="24" 
     height="24">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

Key elements:

• xmlns – The SVG namespace declaration (required for standalone files)
• viewBox – Defines the coordinate system (min-x, min-y, width, height)
• width/height – The default rendering size
• path – Vector shape defined by path commands

The viewBox Attribute

The viewBox is crucial for icon scalability. It establishes a coordinate system independent of the actual display size. A viewBox of "0 0 24 24" means:

• The coordinate system starts at (0, 0)
• The visible area is 24 units wide and 24 units tall
• The icon can be scaled to any size while maintaining aspect ratio

Common viewBox sizes for icons: 16×16, 20×20, 24×24, 32×32. Choose based on your design grid and target use cases.

Path Commands

The path element's d attribute contains drawing commands. Key commands include:

• M (moveto) – Move to a point without drawing
• L (lineto) – Draw a straight line to a point
• H (horizontal lineto) – Draw a horizontal line
• V (vertical lineto) – Draw a vertical line
• C (curveto) – Draw a cubic Bézier curve
• S (smooth curveto) – Draw a smooth cubic Bézier curve
• Q (quadratic curveto) – Draw a quadratic Bézier curve
• A (arc) – Draw an elliptical arc
• Z (closepath) – Close the current path

Uppercase commands use absolute coordinates; lowercase use relative coordinates from the current position.

Basic Shapes

SVG includes primitive shapes that are often more readable than paths:

• rect – Rectangles and squares
• circle – Circles defined by center and radius
• ellipse – Ellipses with horizontal and vertical radii
• line – Straight lines between two points
• polyline – Connected series of straight lines
• polygon – Closed shapes with straight sides

While paths can represent any shape, using semantic shapes improves readability and can make styling easier.

Styling SVG Icons

SVG elements can be styled with CSS, either inline, in a style block, or from external stylesheets. Key properties for icons:

• fill – Interior color of shapes
• stroke – Outline color
• stroke-width – Thickness of strokes
• stroke-linecap – Shape of stroke endpoints (butt, round, square)
• stroke-linejoin – Shape of stroke corners (miter, round, bevel)
• opacity – Transparency level

Using currentColor

Setting fill="currentColor" makes the icon inherit the text color from its parent element. This is incredibly useful for icons that should match surrounding text:

<svg fill="currentColor" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

Inline vs External SVG

SVGs can be included in HTML several ways:

• Inline SVG – Embedded directly in HTML. Allows CSS styling and JavaScript interaction.
• img tag – <img src="icon.svg">. Simple but can't style with CSS.
• CSS background – As background-image. Good for decorative use.
• object/embed – Less common, allows some interactivity.

For icons that need to match text color or have interactive states, inline SVG is usually the best choice.

SVG Sprites

SVG sprites combine multiple icons into one file, reducing HTTP requests. Icons are defined as symbols and referenced with the use element:

<!-- Define sprite (hidden) -->
<svg style="display: none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <path d="..."/>
  </symbol>
</svg>

<!-- Use icons -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-settings"/></svg>

Accessibility Considerations

Make SVG icons accessible to all users:

• Add role="img" for semantic meaning
• Include aria-label or aria-labelledby for descriptive text
• Use aria-hidden="true" for purely decorative icons alongside text labels
• Include a <title> element for tooltip text

Browser Support

SVG has excellent browser support across all modern browsers. Basic SVG features work in Internet Explorer 9+ and all versions of Chrome, Firefox, Safari, and Edge. Some advanced features like CSS transforms and filters may have minor differences.