Smooth an SVG Path: What It Means and How to Do It for Logos and Favicons

The short answer

Smoothing an SVG path means replacing abrupt corners, jittery segments or excess nodes with fewer, continuous curves. In SVG markup, this usually means converting straight line commands (L, H, V) into Bézier curve commands (C, S, Q, T). Neighboring curve segments are then arranged to share a tangent direction where they meet. You can do this by hand in a vector editor, with a simplify or smooth function, or with a script that calculates control points from a list of points. For a favicon, the aim is a clean outline with as few nodes as possible, so that it stays legible when rendered on a very small pixel grid.

What is actually being smoothed

An SVG path is defined by the d attribute, a sequence of drawing commands. M moves the pen. L, H and V draw straight lines. C and S draw cubic Bézier curves. Q and T draw quadratic Bézier curves. A draws elliptical arcs, and Z closes the shape. A path looks rough when it is built from many short straight segments, as often happens with auto-traced artwork. It also looks rough when adjacent curves meet at a visible kink because their control handles do not line up.

Two separate problems tend to be grouped under smoothing, and they need different fixes:

• Too many nodes: the outline follows the shape but wobbles, because it was traced or drawn with far more points than the shape needs. The fix is simplification, which removes points while staying within a tolerance of the original outline.
• Kinks between segments: the node count is reasonable, but curves meet at visible angles. The fix is making joins tangent-continuous, so the incoming and outgoing control handles lie on one straight line through the node.

Check that you have real vector paths first

A file ending in .svg does not guarantee editable vector outlines. An SVG can wrap a raster image inside an image element, often as embedded base64 data. In that case there is no path to smooth, only pixels. Some files mix both, for example a traced outline over an embedded bitmap. A thumbnail or preview of an SVG is itself a raster rendering and tells you little about the structure underneath. Before smoothing, open the file in a text editor or a vector editor's outline view. Confirm that the shapes you care about are path, polygon or other shape elements, not an embedded image.

If the artwork is a third-party logo, permission to download it is not the same as permission to modify it. Brand guidelines and trademark rights often restrict any change to a mark's geometry, and fonts used in a logo carry their own licenses. Smoothing a client's or your own mark is routine. Reshaping someone else's logo for use as a favicon requires their authorization.

Ways to smooth a path

Approach | What it does | Best suited to

Manual node editing in a vector editor | You delete unnecessary nodes, convert corner nodes to smooth nodes and align handles | Logo marks and favicon glyphs where every curve matters

Simplify or smooth commands in editors such as Illustrator or Inkscape | The editor reduces node count and refits curves, usually with an adjustable strength or threshold | Cleaning up auto-traced or hand-drawn outlines before manual refinement

Point-to-curve conversion in code | A script turns an ordered list of points into cubic Bézier segments that pass through those points | Generated shapes, data-driven icons, or batch processing

Simplification algorithms such as Ramer–Douglas–Peucker | Removes points that deviate less than a set tolerance from the line between their neighbors | Reducing point count before converting the remaining points to curves

Automatic simplification trades accuracy for smoothness. A strong setting can round off corners that should stay sharp, such as the point of a letterform or the tip of a leaf. It can also shift the overall silhouette. Treat automatic results as a starting point. Compare them against the original outline, and restore intentional corners by hand.

Smoothing in the markup itself

The S command is the simplest way to get a smooth join directly in SVG code. It reuses the previous cubic segment's second control point, reflected through the current point, as its own first control point. This gives a tangent-continuous join automatically. In the example below, the first path has a sharp corner at its midpoint. The second path uses C followed by S, so the curve flows through the same midpoint without a kink.

<!-- Angular: two straight segments meet at a corner -->
<path d="M10 50 L50 20 L90 50" fill="none" stroke="black"/>

<!-- Smooth: S reflects the control point (40,20) through (50,50),
     so the second segment starts with control point (60,80) -->
<path d="M10 50 C10 20, 40 20, 50 50 S90 80, 90 50" fill="none" stroke="black"/>

For a series of points, a common technique is to treat the points as a Catmull–Rom spline and convert each span to a cubic Bézier. For the span from point P1 to point P2, with P0 before it and P3 after it, the control points are P1 + (P2 − P0) / 6 and P2 − (P3 − P1) / 6. The resulting curve passes through every original point with continuous tangents.

function pointsToSmoothPath(points) {
  if (points.length < 2) return "";
  let d = `M${points[0].x} ${points[0].y}`;
  for (let i = 0; i < points.length - 1; i++) {
    const p0 = points[i - 1] || points[i];
    const p1 = points[i];
    const p2 = points[i + 1];
    const p3 = points[i + 2] || p2;
    const c1x = p1.x + (p2.x - p0.x) / 6;
    const c1y = p1.y + (p2.y - p0.y) / 6;
    const c2x = p2.x - (p3.x - p1.x) / 6;
    const c2y = p2.y - (p3.y - p1.y) / 6;
    d += ` C${c1x} ${c1y}, ${c2x} ${c2y}, ${p2.x} ${p2.y}`;
  }
  return d;
}

This function produces an open path and repeats the end points at the start and end of the list. For a closed shape, wrap the indices around the point list instead, then finish with Z. If the source points are dense or noisy, simplify them first. Otherwise the curve will faithfully reproduce the noise.

Why it matters for favicons specifically

Favicons are displayed at very small sizes, such as 16×16 and 32×32 pixels in browser tabs. At those sizes, a subtle wobble in a curve is usually invisible. What does show is clutter: thin details, tight curves and crowded nodes that blur into an indistinct shape once rasterized. Smoothing for a favicon is therefore less about polish and more about reduction. Use fewer nodes, simpler curves and a bold silhouette that holds together on a coarse pixel grid. An SVG favicon can also be rendered larger in some contexts, such as pinned tabs or bookmarks. A clean path keeps it free of visible artifacts when that happens.

Optimization tools that compress path data often round coordinates to fewer decimal places. On a small viewBox, aggressive rounding can visibly distort curves that were just smoothed. After running an optimizer, check the result at the actual display sizes. Lower the precision setting only as far as the shape survives intact.

Scope of this overview

This article explains general SVG path behavior and widely used smoothing techniques. It does not test or compare specific editor versions, plugin settings or optimizer defaults. Option names and default strengths vary between tools and releases, so check the current documentation of the software you use for exact controls.