# Bad value for attribute “src” on element “img”: Fragment is not allowed for data: URIs according to RFC 2397.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-src-on-element-img-fragment-is-not-allowed-for-data-uris-according-to-rfc-2397
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `data:` URI embeds resource content directly in a URL rather than pointing to an external file. It follows the format `data:[<mediatype>][;base64],<data>`. RFC 2397, which governs this scheme, explicitly states that fragment identifiers (the `#` character followed by a fragment name) are not valid in `data:` URIs.

This issue most commonly arises when developers try to reference a specific element inside an embedded SVG — for example, a particular `<symbol>` or element with an `id` — by appending a fragment like `#icon-name` to a `data:` URI. While fragments work in standard URLs (e.g., `icons.svg#home`), the `data:` URI scheme simply doesn't support them.

## Why It Matters

- **Standards compliance:** Browsers may handle invalid `data:` URIs inconsistently. Some may silently ignore the fragment, while others may fail to render the image entirely.
- **Portability:** Code that relies on non-standard behavior in one browser may break in another or in a future update.
- **Accessibility and tooling:** Validators, linters, and assistive technologies expect well-formed URIs. An invalid URI can cause unexpected issues down the chain.

## How to Fix It

You have several options depending on your use case:

1. **Remove the fragment** from the `data:` URI. If the embedded content is a complete, self-contained image, it doesn't need a fragment reference.
2. **Inline the SVG** directly into the HTML document. This lets you reference internal `id` values with standard fragment syntax using `<use>` elements.
3. **Use an external file** instead of a `data:` URI. Standard URLs like `icons.svg#home` fully support fragment identifiers.
4. **Encode the full, standalone SVG** into the `data:` URI so that it contains only the content you need, eliminating the need for a fragment reference.

## Examples

### ❌ Incorrect: Fragment in a `data:` URI

```html
<img
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Csymbol id='icon'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/symbol%3E%3C/svg%3E#icon"
  alt="Icon">
```

The `#icon` fragment at the end of the `data:` URI violates RFC 2397 and triggers the validation error.

### ✅ Correct: Self-contained SVG in a `data:` URI (no fragment)

Embed only the content you need directly, without wrapping it in a `<symbol>` or referencing a fragment:

```html
<img
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E"
  alt="Icon">
```

### ✅ Correct: External SVG file with a fragment

Move the SVG to a separate file and reference the specific symbol using a standard URL fragment:

```html
<img src="icons.svg#icon" alt="Icon">
```

### ✅ Correct: Inline SVG with `<use>` referencing an internal `id`

If you need to reference individual symbols from a sprite, inline the SVG and use fragment references within the same document:

```html
<svg xmlns="http://www.w3.org/2000/svg" hidden>
  <symbol id="icon-home" viewBox="0 0 20 20">
    <path d="M10 2 L2 10 L4 10 L4 18 L16 18 L16 10 L18 10 Z"/>
  </symbol>
</svg>

<svg width="20" height="20" aria-hidden="true">
  <use href="#icon-home"></use>
</svg>
```

This approach gives you full control over individual icons without needing `data:` URIs at all, and it's the most flexible option for icon systems.