vercel/next.js · error

Unknown syntax for viewBox ({viewbox})

Error message

Unknown syntax for viewBox ({viewbox})

What it means

The viewBox attribute must contain exactly four whitespace-separated numeric tokens (min-x min-y width height) matching VIEW_BOX_CONTENT_REGEX. When the viewBox string doesn't conform (wrong token count, commas instead of spaces, non-numeric tokens), parse_viewbox returns this error. It fires only when width/height attributes are absent and the viewBox fallback is attempted.

Source

Thrown at turbopack/crates/turbopack-image/src/process/svg.rs:56

        .unwrap()
});

fn parse_length(len: &str) -> Result<f64> {
    let captures = UNIT_REGEX
        .captures(len)
        .ok_or_else(|| anyhow!("Unknown syntax for length, expected value with unit ({len})"))?;
    let val = captures[1].parse::<f64>()?;
    let unit = &captures[2];
    let unit_scale = UNITS
        .get(unit)
        .ok_or_else(|| anyhow!("Unknown unit {unit}"))?;
    Ok(val * unit_scale)
}

fn parse_viewbox(viewbox: &str) -> Result<(f64, f64)> {
    let captures = VIEW_BOX_CONTENT_REGEX
        .captures(viewbox)
        .ok_or_else(|| anyhow!("Unknown syntax for viewBox ({viewbox})"))?;
    let width = parse_length(&captures[3])?;
    let height = parse_length(&captures[4])?;
    Ok((width, height))
}

fn calculate_by_viewbox(
    view_box: (f64, f64),
    width: Option<Result<f64>>,
    height: Option<Result<f64>>,
) -> Result<(u32, u32)> {
    let ratio = view_box.0 / view_box.1;
    if let Some(width) = width {
        let width = width?.round() as u32;
        let height = (width as f64 / ratio).round() as u32;
        return Ok((width, height));
    }
    if let Some(height) = height {
        let height = height?.round() as u32;

View on GitHub (pinned to 0ae8c72462)

Solutions

1. Format viewBox as four space-separated numbers: viewBox="0 0 100 100".
2. Add explicit numeric width and height attributes so the viewBox path is not required.
3. Re-export the SVG from the design tool with standard attribute formatting.

Example fix

<!-- before -->
<svg viewBox="0,0,100,100">

<!-- after -->
<svg width="100" height="100" viewBox="0 0 100 100">

// Validate a viewBox string has four space-separated numeric tokens.
function isValidViewBox(vb) {
  const parts = (vb || '').trim().split(/\s+/);
  return parts.length === 4 && parts.every(p => /^[\w.\-]+$/.test(p));
}

When it happens

Trigger: An SVG with viewBox="0 0 100" (three values), viewBox="0,0,100,100" (comma-separated), or viewBox containing non-numeric tokens, and no explicit width/height attributes to fall back on.

Common situations: SVGs exported by tools that emit comma-separated viewBox values; hand-authored SVGs with a typo in the viewBox; SVGs where width/height were stripped leaving only a malformed viewBox.

Related errors

• Unknown syntax for length, expected value with unit ({len})
• Unknown unit {unit}
• Trace has no navigationStart for ${pageUrl}
• Failed to parse source map URL for ${filename}.
• "url" parameter is valid but image type is not allowed

AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/aa25d4aa074971bd. Report an issue: GitHub.