[imps] data-* vs x-vendor-* attributes

Jarek Foksa jarek at boxy-svg.com
Sun Feb 28 08:48:35 PST 2016

I'm building an SVG editor that allows users to save SVG documents using either XML or HTML 5 serialization.

In order to preserve editing capabilities I need to store app-specific data as content attributes. For example, when user draws a star path, I want to preserve the information about the number of arms, the inner radius and the outer radius of the star.

When using XML serialization, the obvious solution is to use custom namespace:

  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="http://www.boxy-svg.com/bx">
    <path bx:shape="star" bx:arms="6" bx:r1="10" bx:r2="20" d="...">

However, I'n not sure how the corresponding markup should look like when using HTML 5 serialization. Should I use data-* attributes?

  <svg viewBox="0 0 500 500">
    <path data-shape="star" data-arms="6" data-r1="10" data-r2="20" d="...">

... or data-vendor-* attributes?

  <svg viewBox="0 0 500 500">
    <path data-bx-shape="star" data-bx-arms="6" data-bx-r1="10" data-bx-r2="20" d="...">

... or x-vendor-* attributes?

  <svg viewBox="0 0 500 500">
    <path x-bx-shape="star" x-bx-arms="6" x-bx-r1="10" x-bx-r2="20" d="...">

The data-* approach is very likely going to cause clashes when the file is opened with another editor.

The data-vendor-* approach does not seem to be mentioned in the spec.

The x-vendor-* approach seems to be what the HTML spec recommends, but I'm not entirely sure whether my usage falls under the category of "vendor-specific proprietary user agent extension". Also, the x-vendor-* attributes are not mentioned in the current SVG 2 draft.

More information about the Implementors mailing list