SVG path syntax and properties
How the SVG path element works: the commands in the d attribute, absolute vs. relative coordinates, the properties that style a path, and what this means for logo and favicon files.
Contents
An SVG path is the <path> element. Its shape comes from one attribute, d, which holds a string of single-letter commands followed by numbers. Each command moves a virtual pen, draws a line, curve or arc, or closes the shape. Separate properties such as fill and stroke control how the path looks. Most vector logos and SVG favicons are built mainly from paths, because design tools usually export shapes and outlined lettering this way.
What the path element is
SVG has simple shape elements such as rect, circle, ellipse, line, polyline and polygon. The path element is the general-purpose one. It can describe any of those shapes, plus arbitrary curves, in a single element. A path can also hold several subpaths, which is how a single element draws a letter with a hole in it or a mark made of separate pieces. Its coordinates are interpreted in the coordinate system set by the parent svg element's viewBox. That is why the same path data can render sharply at favicon size or poster size.
<svg viewBox="0 0 32 32">
<path d="M4 4 H28 V28 H4 Z" fill="#1a73e8"/>
</svg>The example draws a filled square inside a 32-by-32 coordinate space. A standalone .svg file also needs the SVG namespace declaration on the root element. It is omitted here for brevity.
The path commands
The path syntax defines ten commands. Each one exists in an uppercase and a lowercase form.
| Command | Name | Parameters | What it does |
| M / m | moveto | x y | Starts a new subpath at a point without drawing |
| L / l | lineto | x y | Draws a straight line to a point |
| H / h | horizontal lineto | x | Draws a horizontal line |
| V / v | vertical lineto | y | Draws a vertical line |
| C / c | cubic Bézier curve | x1 y1 x2 y2 x y | Draws a curve using two control points |
| S / s | smooth cubic Bézier | x2 y2 x y | Continues a cubic curve; the first control point mirrors the previous one |
| Q / q | quadratic Bézier curve | x1 y1 x y | Draws a curve using one control point |
| T / t | smooth quadratic Bézier | x y | Continues a quadratic curve with a mirrored control point |
| A / a | elliptical arc | rx ry rotation large-arc-flag sweep-flag x y | Draws a section of an ellipse to a point |
| Z / z | closepath | none | Draws a straight line back to the subpath's start and closes it |
Absolute and relative coordinates
Uppercase commands use absolute coordinates, measured from the origin of the coordinate system. Lowercase commands use relative coordinates, measured from the current pen position. The two paths below draw the same square. Relative data is often shorter and easier to move as a block. Absolute data is easier to read when you need to locate a specific point.
<!-- absolute -->
<path d="M4 4 L28 4 L28 28 L4 28 Z"/>
<!-- relative -->
<path d="M4 4 l24 0 l0 24 l-24 0 z"/>Reading a path string
Path data is compact, and exported or optimized files often look unreadable at first. A few grammar rules explain most of what you will see.
- Commas and spaces between numbers are optional wherever the numbers can still be told apart.
- A minus sign can act as a separator, so 10-5 is read as 10 and -5.
- A second decimal point starts a new number, so .5.5 is read as 0.5 and 0.5.
- A command letter can be dropped when the same command repeats. Extra coordinate pairs after a moveto are treated as linetos of the same case.
- Arc flags are single characters, 0 or 1, so optimizers sometimes run them together with the following numbers.
<!-- readable -->
<path d="M 10 20 L 30 20 L 30 -5 Z"/>
<!-- minified, same shape -->
<path d="M10 20H30V-5z"/>Properties that style a path
Geometry lives in d. Appearance comes from properties, which you can write as presentation attributes on the element or set through CSS. When both are present, CSS rules override presentation attributes.
- fill: the interior paint. It can be a color, a gradient or pattern reference, or none.
- fill-rule: decides which areas count as inside when subpaths overlap. The values are nonzero, the default, and evenodd.
- fill-opacity, stroke-opacity and opacity: set transparency for the fill, the stroke, or the whole element.
- stroke: the outline paint.
- stroke-width: the outline thickness, in user units.
- stroke-linecap: the shape of open line ends. The values are butt, round and square.
- stroke-linejoin and stroke-miterlimit: control how corners are joined and when sharp miters are cut off.
- stroke-dasharray and stroke-dashoffset: create dashed outlines and are often used for line-drawing animations.
- transform: moves, scales, rotates or skews the path.
- vector-effect: the value non-scaling-stroke keeps stroke width constant when the path is scaled.
- pathLength: tells the renderer to treat the path as a stated total length when it calculates dashes.
fill-rule matters a great deal for logos. Letters such as O, A and B, and marks with cut-outs, rely on an inner subpath creating a hole. With evenodd, any enclosed overlap becomes a hole. With nonzero, the inner subpath must be drawn in the opposite direction to the outer one. If artwork shows filled-in counters after export or editing, check path direction and fill-rule first.
What this means for favicon artwork
An SVG favicon scales from its viewBox, so the path data stays sharp at any size. Fine detail does not automatically stay legible, though. Thin strokes and small gaps can disappear at the smallest display sizes. Strokes also depend on stroke properties being rendered as intended. Converting strokes to filled outlines in the design tool turns them into plain filled paths, which makes rendering more predictable. Simplifying paths, by removing redundant nodes and rounding excessive decimal precision, makes the file smaller and easier to edit. Browser support for SVG favicons, and for features such as CSS media queries inside them, has varied. Check current support for the browsers you target, and keep raster favicon fallbacks. No browser-support data was supplied for this article.
Vector paths versus embedded raster images
A .svg extension does not guarantee editable vector paths. An SVG file can wrap a bitmap inside an image element, often as an encoded data string. That bitmap looks like a logo but cannot be scaled or reshaped like path artwork. Open the file in a text editor or a vector tool and look for path or shape elements rather than an image element. Lettering is another case. If the file uses text elements, the result depends on the viewer having the right font. If the text has been converted to paths, the letterforms are fixed geometry. The same check applies when a preview thumbnail looks clean. The preview may be a raster rendering, and the file behind it is what actually matters.
Editable paths are a technical property, not a license. Being able to download a logo, or open and modify its paths, does not grant permission to alter the artwork, reuse its fonts or use the trademark. Those rights depend on the owner's terms and any applicable font licenses.
Gaps in this overview
This article covers the general path syntax and styling model defined by the SVG specification. No evidence about a specific logo, tool, file or browser was supplied. Tool-specific export behavior, optimizer settings and current browser support are therefore not covered here. For exact parsing rules or edge cases, consult the current SVG specification.