literal tags: svg VS html

fnick851 · February 21, 2020, 11:10pm

What is the difference between:

html`<svg><circle /></svg>`

and

svg`<svg><circle /></svg>`

They seem to render exact same thing.
How do the usage differ?

Thanks.

radames · February 22, 2020, 12:29am

Hi it seems like just a shortcut

Look at this

github.com

observablehq/stdlib/blob/master/src/svg.js

import template from "./template.js";

export default template(function(string) {
  var root = document.createElementNS("http://www.w3.org/2000/svg", "g");
  root.innerHTML = string.trim();
  return root;
}, function() {
  return document.createElementNS("http://www.w3.org/2000/svg", "g");
});

github.com

observablehq/stdlib/blob/master/src/html.js

import template from "./template.js";

export default template(function(string) {
  var template = document.createElement("template");
  template.innerHTML = string.trim();
  return document.importNode(template.content, true);
}, function() {
  return document.createElement("span");
});

mbostock · February 22, 2020, 12:37am

They’re equivalent if you’re generating an SVG (SVG) element. They’re not equivalent if you’re generating another type of SVG element, such as a G element or a path element.

This generates an HTMLUnknownElement:

html`<g></g>`

Whereas this generates an SVGGElement:

svg`<g></g>`

So, if you’re using embedded expressions within an SVG element, you’ll want to use svg instead of html. See for example:

radames · February 22, 2020, 12:56am

does that mean is this redundant?

svg`<svg><circle /></svg>`

it could also be ?

svg`<circle />`

mbostock · February 22, 2020, 1:00am

No, because the first one returns an SVG element that contains a circle element, while the second one just returns a circle element. The svg template literal doesn’t wrap the markup in an SVG element, it just interprets the markup contextually as if it had been inside an SVG element.

radames · February 22, 2020, 1:20am

That makes sense. For a brief moment I thought it would work.

Topic		Replies	Views
SVG constructed from D3 + HTML template not displaying correctly Community Help	3	941	August 7, 2018
Problem to render svg with html template literal tag in Chrome	2	918	May 22, 2018
Simple SVG DOM manipulation Community Help	3	849	March 31, 2019
DOM.svg is deprecated Community Help	7	312	January 24, 2023
List of tagged template literals Community Help	1	1210	June 28, 2018

literal tags: svg VS html

Related topics