# Bad value X for attribute “id” on element “pattern”: Not a valid XML 1.0 name.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-id-on-element-pattern-not-a-valid-xml-1-0-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<pattern>` element lives inside `<svg>`, and SVG is an XML-based language. Unlike regular HTML — where `id` values follow relatively relaxed rules — SVG content must comply with XML 1.0 naming conventions. This means `id` values have stricter character and formatting requirements than you might be used to in plain HTML.

## XML 1.0 Name Rules

An XML 1.0 name (used for `id` attributes in SVG) must follow these rules:

- **First character** must be a letter (`A`–`Z`, `a`–`z`) or an underscore (`_`).
- **Subsequent characters** can be letters, digits (`0`–`9`), hyphens (`-`), underscores (`_`), or periods (`.`).
- **Spaces and special characters** like `!`, `@`, `#`, `$`, `%`, `(`, `)`, etc. are not allowed anywhere in the name.

Common mistakes that trigger this error include starting an `id` with a digit (e.g., `1pattern`), a hyphen (e.g., `-myPattern`), or a period (e.g., `.dotPattern`), or including characters like spaces or colons.

## Why This Matters

- **Standards compliance:** SVG is parsed as XML in many contexts. An invalid XML name can cause parsing errors or unexpected behavior, especially when SVG is served with an XML MIME type or embedded in XHTML.
- **Functionality:** The `<pattern>` element's `id` is typically referenced via `url(#id)` in `fill` or `stroke` attributes. An invalid `id` may cause the pattern reference to silently fail, leaving elements unfilled or invisible.
- **Cross-browser consistency:** While some browsers are lenient with invalid XML names, others are not. Using valid names ensures consistent rendering across all browsers and environments.

## How to Fix

Rename the `id` value so it starts with a letter or underscore and contains only valid characters. If you reference this `id` elsewhere (e.g., in `fill="url(#...)"` or in CSS), update those references to match.

## Examples

### ❌ Invalid: `id` starts with a digit

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="1stPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="blue" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#1stPattern)" />
</svg>
```

### ❌ Invalid: `id` starts with a hyphen

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="-stripe-bg" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="5" height="10" fill="red" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#-stripe-bg)" />
</svg>
```

### ❌ Invalid: `id` contains special characters

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="my pattern!" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="green" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#my pattern!)" />
</svg>
```

### ✅ Valid: `id` starts with a letter

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="firstPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="blue" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#firstPattern)" />
</svg>
```

### ✅ Valid: `id` starts with an underscore

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="_stripe-bg" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="5" height="10" fill="red" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#_stripe-bg)" />
</svg>
```

### ✅ Valid: Using letters, digits, hyphens, and underscores

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dot-grid_v2" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="3" fill="green" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#dot-grid_v2)" />
</svg>
```

Note that this same XML 1.0 naming rule applies to `id` attributes on all SVG elements — not just `<pattern>`. If you see similar errors on elements like `<linearGradient>`, `<clipPath>`, or `<filter>`, the same fix applies: ensure the `id` starts with a letter or underscore and uses only valid characters.