svgCreate html?

Developers General
1

How do I append an in icon, instead of plain text?

Currently, I am displaying text inside a node like this:

const text = svgCreate('text');
                    //style and append text node
                    svgAttr(text, { fontSize: '9px' });
                    text.setAttribute('x', 5);
                    text.setAttribute('y', 12);
                    svgAppend(text, document.createTextNode('foo-bar'));
                    svgAppend(parentNode, text);

this one works ok, but if I want to put HTML inside it(instead of “foo-bar”), it doesn’t work, it is displayed as plain text.

I have also tried with svgAppend(text, document.createElement… but nothing is displayed in this case.

TLDR: I want to add an icon instead of text.

2

So you want HTML in your SVG? In order to do this you need <foreignObject> (cf. <foreignObject> - SVG: Scalable Vector Graphics | MDN).

3

SVG stands for Scalable Vector Graphics · SVG is used to define vector-based graphics for the Web · defines the graphics in Clicker counter XML format · Every element and … SVG images can be written directly into the HTML document using the tag . To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the element in your HTML document.