CyberAlien.devsoftware development blog

Published on 7 Sep 2025

SVG TLDR

A very short introduction to SVG icons.

XML

Unlike raster images, SVG uses an easy to understand XML format.

This makes it easy to understand and change content, embed it in HTML documents.

Shapes

SVG is represented by shapes: lines, circles, rectangles, complex paths that can contain all of that plus curves.

Shapes can be grouped, masked, reused, clipped, etc... simple XML syntax opens up almost unlimited possibilities.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24" fill="none" stroke="currentColor">
    <rect x="2" y="5" width="18" height="14" rx="2" />
    <line x1="2" y1="7" x2="11" y2="13" />
    <line x1="11" y1="13" x2="20" y2="7" />
</svg>

However, you'll rarely see those basic shapes in icons, the most common shape you'll find in SVG is <path />, which can draw any shape, but not user friendly.

Stroke and fill

Each shape can have stroke and/or fill.

Stroke means shape is outlined alone shape path, stroke sets color, stroke-width (default value is 1) sets stroke width.

Fill means shape is filled, fill sets color.

You can use special keyword currentColor to change stroke and/or fill to current text color inherited from the parent document. This can only be used when embedding SVG in HTML.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 24" fill="none">
    <rect x="4" y="4" width="16" height="16" stroke="currentColor" />
    <rect x="24" y="4" width="16" height="16" fill="orange" />
    <rect x="44" y="4" width="16" height="16" stroke="red" fill="blue" />
</svg>

By default, fill is set to black color, stroke is set to "none" ("none" value disables fill or stroke for element and its child elements).

Coordinates and viewBox

All shapes have various points on 2 dimensional canvas: X and Y.

X coordinates go from left to right, Y coordinates go from top to bottom. Coordinates can be positive and negative, there are no limits.

Coordinate space is unlimited, but icon must have width and height, so how to tell what part of canvas to render?

That's where viewBox attribute comes in. It defines left top corner, width and height of box to render.

Examples of the same rectangle with different viewBox values.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <rect x="4" y="4" width="16" height="16" fill="currentColor" />
</svg>

viewBox set to "-12 0 24 24" (left is -12):

viewBox set to "0 0 48 48":

Icon size

Attribute viewBox tells browser what part of icon to render, but not icon size.

This is where width and height attributes are used. By default, values are in pixels.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="currentColor" d="m10.6 16.2l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM3 21V3h18v18z" />
</svg>

If you change both width and height to 128, without changing viewBox, icon resizes:

You can also set them in CSS in any unit, which makes it easy to conditionally resize icon:

<svg xmlns="http://www.w3.org/2000/svg" style="width: 4em; height: 4em;" viewBox="0 0 24 24">
    <path fill="currentColor" d="m10.6 16.2l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM3 21V3h18v18z" />
</svg>

Scaling

Resizing SVGs works differently than raster images.

If you are used to working with raster images, such as JPEGs, when resizing icon you might expect icon to scale when changing aspect ratio. This is not the case with SVGs. Aspect ratio is always maintained.

By default, icon is resized to fit an entire icon in new dimensions.

This behavior can be controlled by preserveAspectRatio attribute, but that's not part of this tutorial.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="64" viewBox="0 0 24 24">
    <path fill="currentColor" d="m10.6 16.2l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM3 21V3h18v18z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" viewBox="0 0 24 24">
    <path fill="currentColor" d="m10.6 16.2l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4zM3 21V3h18v18z" />
</svg>

Rendering

You can use SVG by embedding it in HTML document or in CSS.

For more details see how to render SVG.

Animations

SVG can be animated.

There are 3 ways to animate SVGs:

A more detailed article explaining all methods will be written later.

Related articles