Почему хром не отображает SVG, созданный через JS?

Question

[romaro]

Пробую создать SVG:

const openedEye = 'M8 1.488c-5.302 0-8 5.21-8 6.512 0 1.302 2.791 6.512 8 6.512S16 9.302 16 8c0-1.302-2.698-6.512-8-6.512zm0 10.233A3.731 3.731 0 014.279 8 3.731 3.731 0 018 4.279 3.731 3.731 0 0111.721 8 3.731 3.731 0 018 11.721zM8 6c1.143 0 2 .953 2 2 0 1.143-.952 2-2 2-1.143 0-2-.952-2-2 0-1.142.857-2 2-2z';

const el = document.querySelector('html');

const toggleContainer = document.createElement('div');
toggleContainer.classList.add('_toggle');
el.append(toggleContainer);

// svg
const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgEl.setAttribute('width', '16');
svgEl.setAttribute('height', '16');
svgEl.setAttribute('viewBox', '0 0 16 16');
toggleContainer.append(svgEl);

// path
const pathEl = document.createElement('path');
pathEl.setAttribute('fill-rule', 'evenodd');
pathEl.setAttribute('d', openedEye);
svgEl.append(pathEl);

Сама картинка почему-то не отображается в хроме:

Answer 1

[0xD34F]

const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

Так, NS, хорошо.

const pathEl = document.createElement('path');

Плохо.

Comments

[romaro]

А ведь мог бы и догадаться)

Answer 2

[Rst0]

const openedEye = 'M8 1.488c-5.302 0-8 5.21-8 6.512 0 1.302 2.791 6.512 8 6.512S16 9.302 16 8c0-1.302-2.698-6.512-8-6.512zm0 10.233A3.731 3.731 0 014.279 8 3.731 3.731 0 018 4.279 3.731 3.731 0 0111.721 8 3.731 3.731 0 018 11.721zM8 6c1.143 0 2 .953 2 2 0 1.143-.952 2-2 2-1.143 0-2-.952-2-2 0-1.142.857-2 2-2z';

var el = document.querySelector('body'); <!-- не html, а body --->
const xmlns = "http://www.w3.org/2000/svg";
const toggleContainer = document.createElement('div');
toggleContainer.classList.add('_toggle');
el.append(toggleContainer);

// svg
const svgEl = document.createElementNS(xmlns, 'svg');

svgEl.setAttribute('width', '16');
svgEl.setAttribute('height', '16');
svgEl.setAttribute('viewBox', '0 0 16 16');
toggleContainer.append(svgEl);

// path

const pathEl = document.createElementNS(xmlns, "path"); <!-- path тоже NameSpace-->
pathEl.setAttribute('fill-rule', 'evenodd');
pathEl.setAttribute('d', openedEye);
svgEl.append(pathEl);