Boneyard Tools

SVG Dimension and viewBox Reader

Drop in an SVG to see its real size: the width and height attributes with their units, the viewBox, and the reduced aspect ratio. When the file has no width or height, the effective size is taken from the viewBox. The file is read entirely in your browser and never uploaded.

How to read SVG dimensions

  1. Drag an SVG file onto the box, or click browse to pick one.
  2. Read the width, height, viewBox, and aspect ratio shown instantly.
  3. Check the preview to confirm it is the file you expected.

Examples

An icon with a viewBox

<svg viewBox="0 0 24 24"> (no width or height)
Effective size 24 x 24, viewBox 0 0 24 24, aspect ratio 1:1

A sized banner

<svg width="800" height="200" viewBox="0 0 800 200">
Width 800, height 200, aspect ratio 4:1

Frequently asked questions

Is my SVG uploaded anywhere?

No. The file is read and parsed entirely in your browser using JavaScript. Nothing is sent to a server, so even private artwork stays on your device.

How does it read the dimensions?

It decodes the file as text and reads the width, height, and viewBox attributes on the opening svg tag. The width and height keep their original units, such as px, pt, em, or a percentage.

What if the SVG has no width or height?

Many icons omit width and height and rely on the viewBox. In that case the reader uses the viewBox width and height as the effective size and computes the aspect ratio from it.

What is the viewBox and why does it matter?

The viewBox defines the coordinate system as minX minY width height. It sets the intrinsic proportions of the graphic and lets the SVG scale cleanly even when width and height are percentages or missing.

Why is the aspect ratio sometimes blank?

The ratio is reduced from whole numbers using the greatest common divisor. If a dimension is a percentage, a decimal, or missing, there is no clean whole-number box to reduce, so the ratio is left out.

Related tools