search

ampproject / amp-toolbox-php

AMP Optimizer PHP library
Apache License 2.0
73 stars 25 forks source link

Inline SVG attributes get lowercased #107

Open dritter opened 3 years ago

dritter commented 3 years ago

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: image

westonruter commented 3 years ago

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:

image

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 https://github.com/ampproject/amp-wp/issues/2045.