diff --git a/lighthouse-core/audits/image-aspect-ratio.js b/lighthouse-core/audits/image-aspect-ratio.js index de487da5ee82..c1f7589c504f 100644 --- a/lighthouse-core/audits/image-aspect-ratio.js +++ b/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; diff --git a/lighthouse-core/test/audits/image-aspect-ratio-test.js b/lighthouse-core/test/audits/image-aspect-ratio-test.js index 7bec5c7d694d..ccd1b4f36659 100644 --- a/lighthouse-core/test/audits/image-aspect-ratio-test.js +++ b/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'); + }); });