Невозможно получить изображение SVG из функции d3.xml (): всегда выдается ошибка

Question

Я использую библиотеку D3.js версии 5.9.2, установленную через npm Я пытаюсь загрузить файл .svg с помощью функции d3.xml (), как описано в этом примере: https://fabiofranchino.com/blog/how-to-inject-external-svg-with-d3/

Из этой статьи Я выяснил, что возможно внедрить SVG внутри другого SVG и получить их «вложенным» способом.

Мой код выглядит так:

import * as d3 from "d3";

function drawSVG(data) {
  // list of constants

  const height = window.innerHeight;
  const width = window.innerWidth;

  d3.xml("https://s.cdpn.io/3/kiwi.svg")
    .then(data => {
         d3.select("body").node().append(data.documentElement);
    })
    .catch(e => {
      console.log("no data detected", e);
    });

}

drawSVG();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Я всегда получаю одну и ту же ошибку: msgstr "ошибка в строке 19 в столбце 10: несоответствие открытия и окончания тега: мета строка 0 и заголовок"

Я пробовал это с несколькими изображениями (как из внешних URL-адресов, так и из локальных файлов)

Кажется, что сами файлы SVG в порядке. Может кто-нибудь помочь мне выяснить, что именно не так и как я могу загрузить файл SVG с D3?