handle preserveAspectRatio after having downloaded images

lib/single-file/html-images-minifier.js

@@ -24,6 +24,8 @@ this.imagesMinifier = this.imagesMinifier || (() => {
 
 	const DEBUG = false;
 	const SVG_NS = "http://www.w3.org/2000/svg";
+	const PREFIX_DATA_URI_IMAGE_SVG = "data:image/svg+xml";
+	const TRANSFORMED_IMAGE_ATTRIBUTE = "data-single-file-image-transform";
 
 	return {
 		process: (doc, mediaAllInfo, options) => {
@@ -40,6 +42,21 @@ this.imagesMinifier = this.imagesMinifier || (() => {
 				processStyleSheets(doc, duplicates, mediaAllInfo);
 				processImages(doc, duplicates, duplicateURLs, options);
 			}
+		},
+		postProcess(doc) {
+			doc.querySelectorAll("svg[" + TRANSFORMED_IMAGE_ATTRIBUTE + "]").forEach(svgElement => {
+				const useElement = svgElement.childNodes[0];
+				if (useElement) {
+					const refImageId = useElement.getAttribute("xlink:href").substring(1);
+					if (refImageId) {
+						const refImageElement = doc.getElementById(refImageId);
+						if (refImageElement && refImageElement.getAttribute("xlink:href").startsWith(PREFIX_DATA_URI_IMAGE_SVG)) {
+							svgElement.removeAttributeNS(SVG_NS, "preserveAspectRatio");
+							svgElement.removeAttributeNS(SVG_NS, TRANSFORMED_IMAGE_ATTRIBUTE);
+						}
+					}
+				}
+			});
 		}
 	};
 
@@ -111,12 +128,11 @@ this.imagesMinifier = this.imagesMinifier || (() => {
 						const useElement = doc.createElementNS(SVG_NS, "use");
 						svgElement.appendChild(useElement);
 						imgElement.getAttributeNames().forEach(attributeName => attributeName != "src" && svgElement.setAttribute(attributeName, imgElement.getAttribute(attributeName)));
+						svgElement.setAttribute(TRANSFORMED_IMAGE_ATTRIBUTE, "");
 						svgElement.setAttributeNS(SVG_NS, "viewBox", "0 0 " + width + " " + height);
 						svgElement.setAttributeNS(SVG_NS, "width", imageData.clientWidth);
 						svgElement.setAttributeNS(SVG_NS, "height", imageData.clientHeight);
-						if (!imgElement.src.includes(".svg")) { // FIXME
-							svgElement.setAttributeNS(SVG_NS, "preserveAspectRatio", "none");
-						}
+						svgElement.setAttributeNS(SVG_NS, "preserveAspectRatio", "none");
 						useElement.setAttributeNS(SVG_NS, "xlink:href", "#single-file-" + urlIndex);
 						const imageElement = doc.getElementById("single-file-" + urlIndex);
 						if (!imageElement.getAttributeNS(SVG_NS, "width") && !imageElement.getAttributeNS(SVG_NS, "height")) {

lib/single-file/single-file-browser.js

@@ -209,6 +209,10 @@ this.SingleFile = this.SingleFile || (() => {
 			return imagesMinifier.process(doc, mediaAllInfo, options);
 		}
 
+		static setPreservedAspectRatios(doc) {
+			return imagesMinifier.postProcess(doc);
+		}
+
 		static compressCSS(content, options) {
 			return uglifycss.processString(content, options);
 		}

lib/single-file/single-file-core.js

@@ -109,6 +109,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		]
 	}, {
 		sequential: [
+			{ option: "groupDuplicateImages", action: "setPreservedAspectRatios" },
 			{ option: "lazyLoadImages", action: "lazyLoadImages" },
 			{ option: "removeAlternativeFonts", action: "postRemoveAlternativeFonts" },
 			{ option: "compressCSS", action: "compressCSS" }
@@ -590,6 +591,10 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			}
 		}
 
+		setPreservedAspectRatios() {
+			DOM.setPreservedAspectRatios(this.doc);
+		}
+
 		removeAlternativeMedias() {
 			const stats = DOM.minifyMedias(this.doc);
 			this.stats.set("processed", "medias", stats.processed);