SVG Path Dimensions: How a Path's Size Is Actually Determined

If you are trying to find the width or height of an SVG path, there is no attribute to read. A path element does not accept width or height. Its size comes from the coordinates in its d attribute, measured in the user units of its coordinate system. On screen, that size is scaled by any transforms and by the viewBox-to-viewport mapping of the outer svg element. A visible stroke adds extent beyond the geometry. This applies to any vector logo, but it matters most for favicons, where a few user units of padding or an unexpected stroke overhang can noticeably shrink or clip the mark at small display sizes.

The short answer

• A path's intrinsic size is the bounding box of the points its d data draws, in user units, not pixels.
• The svg element's viewBox defines how many user units are visible. Its width and height attributes, or CSS, set how large that area renders.
• Transforms on the path or its parent groups scale, rotate or move the geometry before it reaches the viewport.
• Stroke width is excluded from the geometric bounding box. Half of the stroke sits outside the outline, and miter joins and square caps can extend further.
• In a browser, getBBox() returns the geometric box in the element's own user space, and getBoundingClientRect() returns on-screen dimensions in CSS pixels.

What controls the size of a path

Factor | What it affects | Where it lives

Path coordinates | Intrinsic geometric extent in user units | The d attribute of the path

viewBox | Which region of user space is visible, and therefore how units map to the viewport | The outer svg element

width and height, or CSS sizing | The final rendered size of the whole graphic | The outer svg element or a stylesheet

preserveAspectRatio | How the viewBox fits when its proportions differ from the viewport's | The outer svg element

transform | Scaling, rotation and translation of the path or its group | The path or any ancestor g element

stroke-width, stroke-linejoin, stroke-linecap | Visual extent beyond the geometric outline | Path attributes or CSS

A worked illustration

In the snippet below, the path draws a square whose corners sit at 4 and 28 on both axes, so its geometry is 24 by 24 user units. The viewBox exposes a 32 by 32 unit area. The file declares a 32 by 32 pixel size, so one user unit maps to one CSS pixel. If the same file is shown at 16 pixels, everything scales by half and the square renders at 12 pixels. The 2-unit stroke adds 1 unit on each side, so the visible shape spans 26 units, not 24.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
  <path d="M4 4 H28 V28 H4 Z" fill="none" stroke="#000" stroke-width="2"/>
</svg>

These numbers illustrate the arithmetic only. They are not recommended favicon dimensions, and the supplied material contained no specific size requirements.

Measuring a path's width and height

In a browser, the SVG DOM gives you two different measurements. getBBox() returns x, y, width and height for the fill geometry in the path's own user space. It does not include the stroke or the path's own transform. getBoundingClientRect() returns the rendered box in CSS pixels after all transforms and viewport scaling. Browsers have generally based this box on geometry rather than the painted stroke, so test in your target browsers if stroke overhang matters. Both methods need a rendered element. A path inside a hidden container may return zeros or fail.

const path = document.querySelector('path');

// Geometry in user units; excludes stroke
const box = path.getBBox();
console.log(box.width, box.height);

// Rendered size on screen in CSS pixels
const rect = path.getBoundingClientRect();
console.log(rect.width, rect.height);

Design applications report dimensions too, but the figures depend on settings. Many editors let you choose between geometric bounds and visual bounds that include the stroke. Examples are Inkscape's bounding-box preference and Illustrator's Use Preview Bounds option. When two tools disagree about a path's width, this setting is the first thing to check.

Why this matters for favicon SVG files

• Fit the viewBox to the artwork. Empty space inside the viewBox is rendered too, so excess padding makes the icon look smaller in a browser tab.
• Keep the viewBox square for a square icon. A non-square viewBox is letterboxed or cropped according to preserveAspectRatio.
• Account for stroke overhang. A stroke that sits flush against the viewBox edge can be clipped by half its width. Leave room, or convert strokes to filled outlines so the geometry and the visible shape match.
• Strokes scale with the graphic by default. A line that looks right at a large size can thin to almost nothing at favicon scale. The vector-effect value non-scaling-stroke keeps stroke width constant on screen. Outlining strokes is usually the more predictable choice for a fixed icon.
• Check how the icon renders at small sizes. The path data scales without loss, but fine detail can still blur into the pixel grid.

Paths, embedded images and previews

Path dimensions only describe true vector content. An SVG file can also wrap a bitmap in an image element. In that case the image has its own width and height attributes and a fixed pixel resolution, and resizing it softens or pixelates the logo instead of redrawing it. Some files offered as SVG logos are mostly or entirely such embedded rasters. A .svg extension or a filename does not prove the file contains editable paths. Open the file in an editor or read its markup to confirm that the artwork is built from path, shape or text elements. Also note that a thumbnail or preview of an SVG is usually a raster rendering and carries none of the path geometry.

Resizing someone else's logo

Changing a viewBox, tightening padding or outlining strokes changes the artwork. If the logo belongs to another organization, being able to download it does not mean you may modify it or use its fonts and trademarks. Check the owner's brand guidelines or license before you adjust its proportions or spacing for a favicon.

Gaps in the available evidence

The source material for this article contained no confirmed specifications, measurements or tool-specific figures. The guidance here relies on general, verifiable behavior of the SVG format and browser DOM methods. It does not cover favicon size requirements for specific browsers or platforms. Confirm those against current browser documentation before you finalize an icon.