Skip to main content
Icon & Illustration Design·Lesson 2 of 5

SVG Fundamentals

SVG (Scalable Vector Graphics) is the standard format for icons on the web. Unlike raster formats like PNG, SVGs are resolution-independent — they look crisp on any screen, at any size. Understanding SVG structure is essential for any icon designer working with digital products.

Why SVG for Icons

There are several compelling reasons to use SVG over alternatives:

  • Scalability — SVGs render perfectly at 16px or 1600px with no quality loss
  • Small file size — A typical icon SVG is under 1KB, far smaller than equivalent PNGs at multiple resolutions
  • Styleable with CSS — You can change colors, stroke widths, and animations with code
  • Accessible — SVGs support title and description elements for screen readers

PNG icon sets require exporting at 1x, 2x, and 3x for different screen densities. With SVG, you export once and it works everywhere.

The viewBox Attribute

The viewBox attribute defines the coordinate system of your SVG. For a 24x24 icon, it looks like this:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <!-- icon paths here -->
</svg>

The four numbers represent min-x, min-y, width, and height. This tells the browser that your drawing space is 24 units wide and 24 units tall, starting at the origin. The actual rendered size is controlled by CSS or width/height attributes — the viewBox just defines the internal coordinate system.

Practical tip: Always include the viewBox. Without it, your SVG will not scale properly when resized with CSS.

Path Data

Most icons are defined using the <path> element with a d attribute containing drawing commands:

  • M (moveto) — Move the pen to a point without drawing
  • L (lineto) — Draw a straight line to a point
  • C (curveto) — Draw a cubic Bezier curve
  • Z (closepath) — Close the current shape

For example, a simple checkmark might look like:

<path d="M5 12l5 5L20 7" stroke="currentColor" stroke-width="2" fill="none"/>

You rarely write path data by hand. Design tools like Figma and Illustrator generate it for you. However, understanding the basics helps you debug issues and make small manual tweaks.

Stroke and Fill Attributes

SVG elements accept two key visual attributes:

  • fill — The color inside a shape. Set to "none" for outline-only icons.
  • stroke — The color of the outline. Combined with stroke-width to control thickness.

Additional stroke properties you should know:

  • stroke-linecap — How line ends look: butt, round, or square. Round is most common for icons.
  • stroke-linejoin — How corners connect: miter, round, or bevel. Round creates softer corners.

Using currentColor as your fill or stroke value lets the icon inherit its color from the parent element's CSS color property, making it easy to theme.

Optimizing SVGs

Design tools export SVGs with unnecessary metadata, comments, and redundant attributes. Optimization reduces file size and simplifies the markup.

Use SVGO (SVG Optimizer), either as a command-line tool or through web interfaces like SVGOMG. Key optimizations include:

  • Removing editor metadata and comments
  • Collapsing unnecessary group elements
  • Rounding path data to fewer decimal places
  • Removing default attribute values

A well-optimized icon SVG should be clean enough to read and paste directly into your HTML or component code.

Key Takeaways

  • SVG is the best format for web icons due to scalability, size, and styleability
  • The viewBox defines your coordinate system — always include it
  • Use currentColor for easy theming with CSS
  • Optimize exported SVGs with SVGO before using them in production