Svg created by Angular 2 doesn't scale

Question

It's known that svg-element with viewbox should automatically scale to the sizes from styles.

For example, let's take a 200*200 circle and place it into a 100*100 div. Before that let's make svg to take all div's space. Svg is scaled so that we can see the full circle:

div {
  width: 100px;
  height: 100px;
  outline: 1px dotted red;
}

svg {
  width: 100%;
  height: 100%;
}

<div>
  <svg viewbox="0 0 200 200">
    <circle cx="100" cy="100" r="99" />
  </svg>
</div>

Now let's place this markup into Angular 2 component:

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <svg viewbox="0 0 200 200">
        <circle cx="100" cy="100" r="99" />
      </svg>
    </div>
  `
})
export class App {
  constructor() {
  }
}

With the same styles we'll see:

Why does it happen and how can I fix it?
I need svg to scale automatically.

Full example: http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview

---

It's interesting that if you select this svg-element in devtools and run

$0.outerHTML = $0.outerHTML

the element will get its expected representation.

---

PS: Same question in Russian.

Answer 1

SVG is case sensitive. The correct attribute is viewBox rather than viewbox.