Warn if svg uses the viewbox attribute

[emilos]

An attempt to close #1062

The under the hood issue is that:

node.setAttribute('viewbox', '-250 -250 500 500')

does not work while:

node.setAttribute('viewBox', '-250 -250 500 500')

works correctly.

A warning seems to be the simplest solution since that is the right attribute name https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Thanks :)

[codecov-io]

Codecov Report

Merging #1077 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1077      +/-   ##
==========================================
+ Coverage   91.68%   91.69%   +<.01%     
==========================================
  Files         123      123              
  Lines        4462     4466       +4     
  Branches     1439     1441       +2     
==========================================
+ Hits         4091     4095       +4     
  Misses        157      157              
  Partials      214      214

Impacted Files	Coverage Δ
src/validate/html/validateElement.ts	90.38% <100%> (+0.38%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6b956fb...bc00e20. Read the comment docs.

[Rich-Harris]

Thanks for the PR! However I'm not sure this is the right solution:

• Browsers don't care if you get the casing wrong — they'll just fix it for you. Since Svelte is designed to handle HTML the same as browsers, we should too
• There's nothing special about viewBox — SVG has lots of attributes with weird casing, such as textLength.

For that matter, browsers don't care about casing on HTML elements either — they treat everything as though it were lowercase. Svelte doesn't, and probably should.

[emilos]

👍 thanks, makes sense, I wasn't sure whether svelte should case about this or not. I'll close this PR then :)