# Attribute with the local name “xmlns:serif” is not serializable as XML 1.0

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-with-the-local-name-xmlns-serif-is-not-serializable-as-xml-1-0
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When graphic design tools like Affinity Designer (formerly Serif) export SVG files, they often embed custom namespace declarations such as `xmlns:serif="http://www.serif.com/"`. These namespaces allow the editor to store its own metadata — like layer names, grouping information, or application-specific settings — inside the SVG file. While this metadata is useful if you re-open the file in the original editor, it has no meaning in a web browser.

The HTML5 specification defines a specific set of namespace attributes that are allowed in SVG elements (such as `xmlns`, `xmlns:xlink`, and `xmlns:xml`). Any namespace prefix not in this predefined list — like `xmlns:serif`, `xmlns:inkscape`, or `xmlns:sodipodi` — triggers this validation error because the HTML parser cannot serialize these attributes back into well-formed XML 1.0. This isn't just a theoretical concern: non-serializable attributes can cause issues when the DOM is manipulated via JavaScript or when the markup is processed by XML-based tools.

Beyond the `xmlns:serif` declaration itself, you'll likely find attributes in the SVG that use this namespace prefix, such as `serif:id="layer1"`. These should also be removed since they reference a namespace the browser doesn't understand.

## How to Fix It

1. **Remove the `xmlns:serif` attribute** from the `<svg>` element.
2. **Remove any attributes prefixed with `serif:`** (e.g., `serif:id`) from child elements within the SVG.
3. If you re-export the SVG, check your editor's export settings — some tools offer a "clean" or "optimized" export option that strips proprietary metadata.
4. Consider using an SVG optimization tool like [SVGO](https://github.com/svg/svgo) to automatically clean up unnecessary attributes.

## Examples

### ❌ Invalid: SVG with `xmlns:serif` attribute

```html
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="http://www.serif.com/"
  viewBox="0 0 100 100"
  width="100"
  height="100">
  <g serif:id="Layer 1">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </g>
</svg>
```

This triggers the error because `xmlns:serif` is not a recognized namespace in HTML5, and `serif:id` references that unsupported namespace.

### ✅ Valid: SVG with proprietary attributes removed

```html
<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="100"
  height="100">
  <g>
    <circle cx="50" cy="50" r="40" fill="blue" />
  </g>
</svg>
```

Both `xmlns:serif` and `serif:id` have been removed. The SVG renders identically in the browser since those attributes were only meaningful to the editing application.

### Handling Multiple Proprietary Namespaces

Exported SVGs sometimes contain several non-standard namespaces at once. Remove all of them:

```html
<!-- ❌ Invalid: multiple proprietary namespaces -->
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="http://www.serif.com/"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  viewBox="0 0 200 200">
  <rect x="10" y="10" width="180" height="180" fill="red"
    serif:id="background"
    inkscape:label="bg-rect" />
</svg>

<!-- ✅ Valid: all proprietary namespaces and prefixed attributes removed -->
<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 200">
  <rect x="10" y="10" width="180" height="180" fill="red" />
</svg>
```

If you frequently work with SVGs from design tools, integrating an SVG optimizer into your build process can save time and ensure these non-standard attributes never reach production.