viewBox vs width/height — what determines the PDF page size

SVG's sizing model has two layers: the physical size (how big the rendered drawing should be on a page or screen) and the coordinate system (the numerical space inside which shapes are drawn). They're set by separate attributes that interact in non-obvious ways. SVGtoPDF has to resolve them to a single PDF page size.

The three attributes

• width and height: the physical dimensions of the rendered SVG. Can include CSS units ("100mm", "5in", "720pt"). Without units, the value is in CSS pixels (1 px = 1/96 in by spec).
• viewBox: a four-number rectangle "x y width height" defining the SVG's internal coordinate space. Shapes inside the SVG are placed in this coordinate space.
• preserveAspectRatio: how to fit the viewBox into the width/height rectangle when their aspect ratios don't match. Default is "xMidYMid meet" (center, fit inside).

How SVGtoPDF picks a page size

The rule (matching the SVG 1.1 spec):

1. If width and height are present and have explicit units (mm, in, pt), use them directly. PDF page = converted to points.
2. If width and height are present but unitless, treat them as CSS pixels. PDF page = (width × 72 / 96) × (height × 72 / 96) points.
3. If viewBox is present but width/height are not, use the viewBox's width and height as point dimensions. PDF page = (viewBox_w) × (viewBox_h) points.
4. If only width/height are present without viewBox, use them and assume the viewBox matches.
5. If none are present, fall back to a default (typically 300 × 150 pixels, per the spec).

Worked examples

• <svg viewBox="0 0 100 100"> (no width/height) → 100 × 100 pt PDF page (about 1.4 × 1.4 inches).
• <svg width="800" height="600"> (no viewBox) → 800 × 600 px = 600 × 450 pt PDF page (8.33 × 6.25 inches).
• <svg width="100mm" height="50mm" viewBox="0 0 200 100"> → 100 × 50 mm = 283.46 × 141.73 pt PDF page. The viewBox just sets the internal coordinate system; coordinates 0–200 horizontally map to 0–100 mm.
• <svg width="500" height="500" viewBox="0 0 100 200"> → 500 × 500 px page. The viewBox is 100 × 200 (1:2 aspect, taller than wide), drawn into a 1:1 rectangle. With default preserveAspectRatio "xMidYMid meet", the viewBox is scaled to fit the height, and content is letterboxed left/right.

preserveAspectRatio — what happens with mismatched aspects

When the viewBox aspect ratio doesn't match the width/height aspect, the SVG renderer needs a rule for fitting. preserveAspectRatio gives nine options:

• xMinYMin / xMidYMid / xMaxYMax (and X/Y combinations): alignment within the rectangle.
• meet: fit inside the rectangle, preserving aspect, leaving letterbox bars.
• slice: fill the rectangle, preserving aspect, cropping content that overflows.
• none: stretch to fit, ignoring aspect.

Default is "xMidYMid meet": center, letterbox.

SVGtoPDF respects preserveAspectRatio when determining how content is drawn but uses width/height (or viewBox if width/height are absent) for the actual PDF page size. The page is the outer rectangle; content is placed inside per the rule.

The most common case

Designers exporting SVGs from modern design tools typically set width and height in pixels matching the viewBox dimensions:

<svg width="200" height="100" viewBox="0 0 200 100">

This produces a 200 × 100 CSS-pixel canvas with a 1:1 mapping between viewBox coordinates and pixels. SVGtoPDF converts to 200 × 72/96 = 150 pt × 75 pt — a 2.08 × 1.04 inch PDF page. For most practical SVGs (icons, small diagrams), this is fine.

For larger output (logos meant to print at 8 inches wide), set explicit physical units:

<svg width="8in" height="2in" viewBox="0 0 200 50">

The PDF page becomes exactly 8 × 2 inches; the internal coordinate system stays a 200 × 50 grid.

When the resulting PDF feels too small

A common surprise: an SVG looks fine in a browser but produces a tiny PDF page. Cause: the SVG declared no width / height, only a viewBox like "0 0 24 24" (typical for icon SVGs from icon libraries). SVGtoPDF treats viewBox dimensions as points, producing a 24 × 24 pt page = roughly 1/3 × 1/3 inch.

Fix:

1. Add explicit width/height to the SVG before upload: <svg width="240" height="240" viewBox="0 0 24 24"> for a 10× larger page.
2. Or set physical units: <svg width="50mm" height="50mm" viewBox="0 0 24 24">.

When the resulting PDF feels too large

The opposite: an SVG with width="2000" height="2000" produces a 1500 × 1500 pt PDF page (about 21 × 21 inches), much bigger than expected. Cause: the SVG was authored at high pixel density for screen, and the unitless values are interpreted as pixels.

Fix: reduce the width/height to the size you actually want printed. The viewBox can stay the same — it sets the coordinate system, not the page size.

Inspecting an SVG

Open the SVG in a desktop SVG editor (Inkscape, Illustrator, Affinity Designer) or simply in a text editor — the root <svg> tag is right at the top and shows the width, height, and viewBox attributes. A few examples:

<svg width="200" height="100" viewBox="0 0 200 100">        — explicit, matches viewBox
<svg viewBox="0 0 24 24">                                 — no size (icon style)
<svg width="100mm" height="50mm" viewBox="0 0 200 100">   — explicit physical size

If you want to see the rendered dimensions before uploading, drop the SVG into a browser tab — the page title bar or zoom indicator usually reports the natural dimensions.