Inline SVG attributes get lowercased

[dritter]

Hi there,

the optimizer does not seem to respect the XML Namespace. As SVG is XML, and thus case sensitive (opposed to HTML, which is case insensitive), the SVG viewBox attribute gets lowercased by the amp-optimizer. Browsers seem to ignore the problem, so this is more a nitpick.

See the viewBox attribute here:

Before:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.7 25.1"><path d="M41 7.7l-1.2 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.8 6.8 0 0 1 5.2-2 8.3 8.3 0 0 1 4.3 1m11.7 13.1v-6.2h-6.2v6.2h-2.8V6.9h2.8v5.5h6.2V6.9h2.7v13.9m6-11.7v3.2h5v2.1h-5v4.3h7v2.2h-9.8v-14h9.9v2.2m5.3 0v3.2h5.5v2.2h-5.5v6.3H71V6.9h10.3v2.2m11.3 11.7l-4.4-6-1.7 2.2v3.8h-2.8V6.9h2.8v6.7l5.3-6.7H95l-5 6 6 7.9m.5-7a7.3 7.3 0 0 1 1.8-5 6.2 6.2 0 0 1 4.9-2.1 6.8 6.8 0 0 1 5.1 1.8 7.2 7.2 0 0 1 1.8 5.2 7.5 7.5 0 0 1-1.8 5.4 7 7 0 0 1-5.3 2 6 6 0 0 1-4.8-2 8 8 0 0 1-1.7-5.4m2.9 0a6.5 6.5 0 0 0 .9 3.8 3 3 0 0 0 2.7 1.4 3.9 3.9 0 0 0 3.2-1.3 5.8 5.8 0 0 0 1-3.9q0-4.8-4-4.8a3.3 3.3 0 0 0-2.9 1.3 5.8 5.8 0 0 0-1 3.5m24-6l-1.1 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.9 6.9 0 0 1 5.2-2 8.2 8.2 0 0 1 4.3 1M135 20.8v-6.2h-6.3v6.2H126V6.9h2.7v5.5h6.3V6.9h2.7v13.9"/><path fill="#618f30" d="M18.8 1.5l-1.3-.4C13-.3 13-.3 7.8.7l-1 .2C4.6.6 2.3.5.3 1.8a.7.7 0 0 0-.3.7l1.2 18.4v3.5a.7.7 0 0 0 .7.7h15.4a.7.7 0 0 0 .7-.7v-3.5l1.4-18.6a.7.7 0 0 0-.6-.8zm-2 21.3a.9.9 0 0 1-1 .9H3.7a.9.9 0 0 1-1-.9v-1.1a.9.9 0 0 1 1-.9h12.3a.9.9 0 0 1 .9.9v1.1zm1.1-19.2l-1.1 15.2a.7.7 0 0 1-.7.7h-.6c-.3 0-.5-.1-.5-.4l1-14.9s0-.2-.2-.2h-.2a.3.3 0 0 0-.2.3l-1 14.9c0 .2-.2.3-.6.3h-1a.4.4 0 0 1-.3-.4L13 3.7a.2.2 0 0 0-.2-.3h-.2a.3.3 0 0 0-.2.3l-.6 15.5c0 .2-.3.3-.6.3h-.9a.4.4 0 0 1-.4-.4v-15a.2.2 0 0 0-.2-.3h-.2a.2.2 0 0 0-.2.3v15.1c0 .2-.2.3-.5.3h-.9c-.3 0-.5-.1-.6-.3L6.8 4.4a.3.3 0 0 0-.3-.2h-.2a.2.2 0 0 0-.2.2l.6 14.7c0 .3-.2.4-.4.4h-1c-.3 0-.5-.1-.5-.3l-1-15.4a.3.3 0 0 0-.3-.3h-.2c-.1 0-.2.1-.2.3l1 15.3a.4.4 0 0 1-.4.4h-.5a.7.7 0 0 1-.7-.7l-1-15a.7.7 0 0 1 .3-.7 7.6 7.6 0 0 1 5.5-.8l.8-.1c4.2-.9 4.4-.9 8.2.3l1 .3a.7.7 0 0 1 .6.8z"/></svg>

After optimization:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 137.7 25.1"><path d="M41 7.7l-1.2 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.8 6.8 0 0 1 5.2-2 8.3 8.3 0 0 1 4.3 1m11.7 13.1v-6.2h-6.2v6.2h-2.8V6.9h2.8v5.5h6.2V6.9h2.7v13.9m6-11.7v3.2h5v2.1h-5v4.3h7v2.2h-9.8v-14h9.9v2.2m5.3 0v3.2h5.5v2.2h-5.5v6.3H71V6.9h10.3v2.2m11.3 11.7l-4.4-6-1.7 2.2v3.8h-2.8V6.9h2.8v6.7l5.3-6.7H95l-5 6 6 7.9m.5-7a7.3 7.3 0 0 1 1.8-5 6.2 6.2 0 0 1 4.9-2.1 6.8 6.8 0 0 1 5.1 1.8 7.2 7.2 0 0 1 1.8 5.2 7.5 7.5 0 0 1-1.8 5.4 7 7 0 0 1-5.3 2 6 6 0 0 1-4.8-2 8 8 0 0 1-1.7-5.4m2.9 0a6.5 6.5 0 0 0 .9 3.8 3 3 0 0 0 2.7 1.4 3.9 3.9 0 0 0 3.2-1.3 5.8 5.8 0 0 0 1-3.9q0-4.8-4-4.8a3.3 3.3 0 0 0-2.9 1.3 5.8 5.8 0 0 0-1 3.5m24-6l-1.1 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.9 6.9 0 0 1 5.2-2 8.2 8.2 0 0 1 4.3 1M135 20.8v-6.2h-6.3v6.2H126V6.9h2.7v5.5h6.3V6.9h2.7v13.9"></path><path fill="#618f30" d="M18.8 1.5l-1.3-.4C13-.3 13-.3 7.8.7l-1 .2C4.6.6 2.3.5.3 1.8a.7.7 0 0 0-.3.7l1.2 18.4v3.5a.7.7 0 0 0 .7.7h15.4a.7.7 0 0 0 .7-.7v-3.5l1.4-18.6a.7.7 0 0 0-.6-.8zm-2 21.3a.9.9 0 0 1-1 .9H3.7a.9.9 0 0 1-1-.9v-1.1a.9.9 0 0 1 1-.9h12.3a.9.9 0 0 1 .9.9v1.1zm1.1-19.2l-1.1 15.2a.7.7 0 0 1-.7.7h-.6c-.3 0-.5-.1-.5-.4l1-14.9s0-.2-.2-.2h-.2a.3.3 0 0 0-.2.3l-1 14.9c0 .2-.2.3-.6.3h-1a.4.4 0 0 1-.3-.4L13 3.7a.2.2 0 0 0-.2-.3h-.2a.3.3 0 0 0-.2.3l-.6 15.5c0 .2-.3.3-.6.3h-.9a.4.4 0 0 1-.4-.4v-15a.2.2 0 0 0-.2-.3h-.2a.2.2 0 0 0-.2.3v15.1c0 .2-.2.3-.5.3h-.9c-.3 0-.5-.1-.6-.3L6.8 4.4a.3.3 0 0 0-.3-.2h-.2a.2.2 0 0 0-.2.2l.6 14.7c0 .3-.2.4-.4.4h-1c-.3 0-.5-.1-.5-.3l-1-15.4a.3.3 0 0 0-.3-.3h-.2c-.1 0-.2.1-.2.3l1 15.3a.4.4 0 0 1-.4.4h-.5a.7.7 0 0 1-.7-.7l-1-15a.7.7 0 0 1 .3-.7 7.6 7.6 0 0 1 5.5-.8l.8-.1c4.2-.9 4.4-.9 8.2.3l1 .3a.7.7 0 0 1 .6.8z"></path></svg>

The w3c validator complains about the lowercased viewbox attribute when validated as SVG 1.1:

[westonruter]

As you note, HTML is case insensitive (unlike XML), so it is expected that SVG inside of (AMP) HTML would get lower-cased. In fact, if I try running an SVG with a viewbox attribute through the W3C Validator and it has no complaints:

Source I used (notice viewbox not viewBox):

<!DOCTYPE html>
<html lang=en>
  <head>
    <title>SVG in HTML</title>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 137.7 25.1"><!--...--></svg>
  </body>
</html>

Therefore, I believe this is invalid.

Relates to ampproject/amp-wp#2045.