The following TypeScript fails to pile:

let svg = document.createElement("svg");
svg.width = 300;

Due to the error Property 'width' does not exist on type 'HTMLElement'. But if I change svg to canvas, for example, then it does pile, so it's something about SVGs specifically it seems...

Any ideas?

The following TypeScript fails to pile:

let svg = document.createElement("svg");
svg.width = 300;

Due to the error Property 'width' does not exist on type 'HTMLElement'. But if I change svg to canvas, for example, then it does pile, so it's something about SVGs specifically it seems...

Any ideas?

• javascript
• typescript
• svg

• 1 canvas is a special element. Normal elements don't have width property – marzelin Commented Jul 28, 2017 at 15:05
• svg have width property developer.mozilla/en-US/docs/Web/SVG/Attribute/width – brk Commented Jul 28, 2017 at 15:05
• @brk but that's an tag attribute, not an object property. Or is one (like id) that's both? – Jared Smith Commented Jul 28, 2017 at 15:06
• you are creating custom html element, not svg. See here how to create svg tag stackoverflow./questions/8215021/… – marzelin Commented Jul 28, 2017 at 15:12

4 Answers 4

let svg = document.createElement("svg"); doesn't create svg element, but custom html element.

Proper way to create svg element:

let svg = document.createElementNS("http://www.w3/2000/svg", "svg");

const customSvg = document.createElement("svg")
const properSvg = document.createElementNS("http://www.w3/2000/svg", "svg")

console.log(customSvg instanceof SVGSVGElement) // false
console.log(properSvg instanceof SVGSVGElement) // true

console.log(customSvg.width) // undefined
console.log(properSvg.width) // SVGAnimatedLength {}

As Marzelin explained, the proper way to create an svg element is by using document.createElementNS instead:

document.createElementNS("http://www.w3/2000/svg", "svg");

• Related question: Create SVG tag with JavaScript

The TypeScript standard lib knows this well, hence why you are getting a HTMLElement return type inference from document.createElement("svg") instead of SVGSVGElement.

In SVG width and height of elements are attributes and not CSS properties so you'd need to write

document.getElementById('cercle1').setAttribute("height", "10px");

similarly for the width.

Change height/width of object SVG javascript

In your case:

svg.setAttribute("width", "300px");

Your question title is question "Property 'width' does not exist on type 'HTMLElement'"

HTMLElement has no property width it has property style. and style had width

let svg = document.createElement("svg");
svg.style.width = '30px';

In your case you need an SVGSVGElement

var svgEl = document.createElementNS("http://www.w3/2000/svg", "svg")
svgEl.width = 300