Why does React render these SVGs differently? - reactjs

Question

If I render SVG elements to a defined SVG object, then all is well.
If I render an entire SVG object, the resulting image doesn't scale.
If you look at the following demo, the 1st svg renders correctly. The svg fills the width of the browser and everything scales.
The second svg is a 300x150 image that doesn't scale at all.
https://codepen.io/brunnock/pen/ydMdgv
// The following renders as expected.
function SVG1() {
return (
<g>
<rect height="100%" width="100%" fill="#ccc" />
<circle cx={150} cy={75} r={50} fill="red" />
<text x="100" y="275" font-size="50">
This is the right size.
</text>
</g>
);
}
// svg1 is a predefined svg element in the HTML file.
ReactDOM.render(<SVG1 />, svg1);
// The following renders a 300x150 image that doesn't scale.
function SVG2() {
return (
<svg viewbox={"0 0 600 600"}>
<rect height="100%" width="100%" fill="#ccc" />
<circle cx={150} cy={75} r={50} fill="red" />
<text x="100" y="275" font-size="50">
This is not the right size.
</text>
</svg>
);
}
// svg2 is a div.
ReactDOM.render(<SVG2 />, svg2);
I couldn't find any difference in the rendered html via Chrome's inspector.

Answer 1

Remove the parentheses from the viewBox
function SVG2() {
return (
<svg viewbox="0 0 600 600">
<rect height="100%" width="100%" fill="#ccc" />
<circle cx={150} cy={75} r={50} fill="red" />
<text x="100" y="275" font-size="50">
This is not the right size.
</text>
</svg>
);
}

Answer 2

I'm an idiot. Change "viewbox" to "viewBox" and "font-size" to "fontSize".