Скачать или смотреть Dynamically Updating SVG Text with data-* Attributes for Event Dates

Learn how to dynamically update text content inside SVG images using HTML5 custom data attributes and JavaScript, perfect for reusable event images with changing dates.
---
This video is based on the question https://stackoverflow.com/q/79391960/ asked by the user 'WebDragon' ( https://stackoverflow.com/u/5317678/ ) and on the answer https://stackoverflow.com/a/79391980/ provided by the user 'mplungjan' ( https://stackoverflow.com/u/295783/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Is it possible to change the text content displayed in an SVG image by setting specific data-* attributes in the html svg tag?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Problem Overview

When creating graphical elements like SVG images for events, it's common to want to display dynamic text—such as event dates—inside a reusable SVG without having to create a separate image file for each date. For example, a ticketing system may want a single SVG template that updates the displayed date based on a data-datetime attribute.

Can SVG Text Content Change via data-* Attributes?

SVG itself doesn’t automatically update its text nodes based on data attributes attached to the <svg> tag. However, by combining custom data attributes with JavaScript, you can dynamically inject and update text inside the SVG after the page loads.

Modern, Concise Solution

Key Idea

Use data-datetime (and optional data-emoji) attributes on the <svg> element. Then, on page load, JavaScript will:

Locate all .event-svg elements.

Read the data-datetime attribute.

Format the date string to a human-readable format.

Find the <text> element inside the SVG (marked with class .event-date).

Update the text node with the formatted date and optional emoji.

Example Implementation

[[See Video to Reveal this Text or Code Snippet]]

[[See Video to Reveal this Text or Code Snippet]]

Explanation

The time T15:00:00 helps avoid timezone edge-case bugs.

The .event-date text updates dynamically based on the dataset.

Scaling Up: Generating Multiple Date SVGs Dynamically

You can generate multiple SVGs for a month’s worth of event dates with varying background colors or emojis using JavaScript DOM manipulation:

[[See Video to Reveal this Text or Code Snippet]]

CSS for Grid Layout

[[See Video to Reveal this Text or Code Snippet]]

HTML Container

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Custom data-* attributes combined with JavaScript enable dynamic, reusable SVG text content.

This avoids the need for numerous static images, saving bandwidth and maintenance.

The approach is modern, flexible, and compatible with standard web technologies.

Use this method to display dynamic dates, emojis, or other variable content inside SVG images effectively.