Using dataset on SVG Elements
The dataset API lets you attach and read custom data-* attributes on SVG shapes, useful for data-driven interactive graphics.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Storing Custom Data on SVG Shapes
Adding data-* attributes to SVG elements and reading them via the dataset property works on SVG elements in modern browsers, letting you attach arbitrary custom data (like a data ID, a category, or a value) directly to a shape, which is invaluable for connecting a visual SVG element back to its underlying data in interactive graphics.
- data-* attributes and the dataset property work on modern SVG elements
- Attaches arbitrary custom data like an ID, category, or value to a shape
- Connects a visual SVG element back to its underlying data record
Common Uses for dataset in Interactive SVG
dataset is commonly used in a chart or map to store each shape's data value or identifier so a click or hover handler can retrieve it (like showing a tooltip with the exact data for a clicked bar), or to store state information directly on shapes for interactive diagrams without maintaining a separate lookup structure in JavaScript.
- Stores each chart or map shape's data value or identifier for handlers to read
- Lets a click or hover handler retrieve exact data for a tooltip
- Stores interactive state on shapes without a separate JavaScript lookup structure
Frequently Asked Questions
How do I access a data-value attribute through the dataset property?
A data-value attribute is accessed as element.dataset.value, and a hyphenated attribute like data-item-id becomes element.dataset.itemId in camelCase, following the same conversion rules as HTML dataset access.
Is storing data in dataset better than keeping it in a separate JavaScript object?
For simple per-element data tightly coupled to the visual shapes, dataset is convenient and keeps data co-located with elements, though a separate structured data store is often better for large datasets or data needing complex querying.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG