core(aspect-ratio): skip aspect ratio audit for svg (#3722)

* core(aspect-ratio): skip aspect ratio audit for svg, fixes #3716

* core(aspect-ratio): use the correct svg mimeType in the test

* core(aspect-ratio): skip aspect ratio audit for svg

* core(aspect-ratio): use the correct svg mimeType in the test

* core(aspect-ratio): explain why svg is filtered

* core(aspect-ratio): better unit test (fails when it should)

lighthouse-core/audits/image-aspect-ratio.js

@@ -70,9 +70,11 @@ class ImageAspectRatio extends Audit {
     let debugString;
     const results = [];
     images.filter(image => {
-      // filter out images that don't have following properties
-      // networkRecord, width, height, images that use `object-fit`: `cover` or `contain`
+      // - filter out images that don't have following properties:
+      //   networkRecord, width, height, images that use `object-fit`: `cover` or `contain`
+      // - filter all svgs as they have no natural dimensions to audit
       return image.networkRecord &&
+        image.networkRecord.mimeType !== 'image/svg+xml' &&
         image.width &&
         image.height &&
         !image.usesObjectFit;

lighthouse-core/test/audits/image-aspect-ratio-test.js

@@ -133,4 +133,26 @@ describe('Images: aspect-ratio audit', () => {
       usesObjectFit: false,
     },
   });
+
+  it('skips svg images', () => {
+    const result = ImageAspectRatioAudit.audit({
+      ImageUsage: [
+        generateImage(
+          {width: 150, height: 150},
+          {},
+          {
+            url: 'https://google.com/logo.png',
+            mimeType: 'image/svg+xml',
+          },
+          {
+            isCss: false,
+            usesObjectFit: false,
+          }
+        ),
+      ],
+    });
+
+    assert.strictEqual(result.rawValue, true, 'rawValue does not match');
+    assert.strictEqual(result.debugString, undefined, 'debugString does not match');
+  });
 });