Fix scaling of SVG

src/helpers.ts

@@ -4,7 +4,7 @@ import sharp from "sharp";
 import { toIco } from "./ico.js";
 import { FaviconImage } from "./index.js";
 import { IconOptions } from "./config/defaults.js";
-import { SvgTool } from "./svgtool.js";
+import { svgDensity } from "./svgtool.js";
 
 export type Dictionary<T> = { [key: string]: T };
 
@@ -124,12 +124,6 @@ export function relativeTo(
 }
 
 export class Images {
-  #svgtool: SvgTool;
-
-  constructor() {
-    this.#svgtool = new SvgTool();
-  }
-
   bestSource(
     sourceset: SourceImage[],
     width: number,
@@ -153,8 +147,10 @@ export class Images {
     pixelArt: boolean
   ): Promise<Buffer> {
     if (source.metadata.format === "svg") {
-      const svgBuffer = await this.#svgtool.ensureSize(source, width, height);
-      return await sharp(svgBuffer)
+      const options = {
+        density: svgDensity(source.metadata, width, height),
+      };
+      return await sharp(source.data, options)
         .resize({
           width,
           height,

src/svgtool.ts

@@ -1,5 +1,4 @@
-import xml2js from "xml2js";
-import { SourceImage } from "./helpers.js";
+import sharp from "sharp";
 
 // sharp renders the SVG in its source width and height with 72 DPI which can
 // cause a blurry result in case the source SVG is defined in lower size than
@@ -11,50 +10,26 @@ import { SourceImage } from "./helpers.js";
 // https://github.com/lovell/sharp/issues/729#issuecomment-284708688
 //
 // They suggest setting the image density to a "resized" density based on the
-// target render size but this does not seem to work with favicons and may
-// cause other errors with "unnecessarily high" image density values.
+// target render size.
 //
-// For further information, see:
+// Also, see:
 // https://github.com/itgalaxy/favicons/issues/264
-export class SvgTool {
-  async ensureSize(
-    svgSource: SourceImage,
-    width: number,
-    height: number
-  ): Promise<Buffer> {
-    let svgWidth = svgSource.metadata.width;
-    let svgHeight = svgSource.metadata.height;
-
-    if (svgWidth >= width && svgHeight >= height) {
-      // If the base SVG is large enough, it does not need to be modified.
-      return svgSource.data;
-    } else if (width > height) {
-      svgHeight = Math.round(svgHeight * (width / svgWidth));
-      svgWidth = width;
-    } else {
-      // width <= height
-      svgWidth = Math.round(svgWidth * (height / svgHeight));
-      svgHeight = height;
-    }
-
-    // Modify the source SVG's width and height attributes for sharp to render
-    // it correctly.
-    return await this.resize(svgSource.data, svgWidth, svgHeight);
-  }
-
-  async resize(
-    svgFile: Buffer,
-    width: number,
-    height: number
-  ): Promise<Buffer> {
-    const xmlDoc = await xml2js.parseStringPromise(svgFile);
-
-    xmlDoc.svg.$.width = width;
-    xmlDoc.svg.$.height = height;
-
-    const builder = new xml2js.Builder();
-    const modifiedSvg = builder.buildObject(xmlDoc);
-
-    return Buffer.from(modifiedSvg);
+export function svgDensity(
+  metadata: sharp.Metadata,
+  width: number,
+  height: number
+): number | undefined {
+  if (!metadata.width || !metadata.height) {
+    return undefined;
   }
+  const currentDensity = metadata.density ?? 72;
+  return Math.min(
+    Math.max(
+      1,
+      currentDensity,
+      (currentDensity * width) / metadata.width,
+      (currentDensity * height) / metadata.height
+    ),
+    100000
+  );
 }