Merge pull request #12 from catdad-experiments/render-without-viewbox

support rendering SVGs that don't use `viewBox`

Author: catdad

.github/workflows/ci.yml

@@ -14,17 +14,17 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: [16, 18, 20]
+        node: [18, 20, 22]
         os: [ubuntu-latest, windows-latest, macOS-latest]
         # these are only excluded so we don't run so many jobs
         # they are more expensive and less likely to be a problem if the rest pass
         exclude:
           - os: macOS-latest
-            node: 16
-          - os: windows-latest
             node: 18
-          - os: macOS-latest
+          - os: windows-latest
             node: 20
+          - os: macOS-latest
+            node: 22
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node }}

index.js

@@ -38,6 +38,19 @@ const resolveUseTags = ($, $svg) => {
   });
 };
 
+const resolveViewBox = ($, $svg) => {
+  const viewBox = $svg.attr('viewBox');
+
+  if (viewBox) {
+    return;
+  }
+
+  const width = $svg.attr('width');
+  const height = $svg.attr('height');
+
+  $svg.attr('viewBox', `0 0 ${width} ${height}`);
+};
+
 module.exports = async ({ buffer, width, height } = {}) => {
   if (!Buffer.isBuffer(buffer)) {
     throw new Error('required "options.buffer" is missing');
@@ -50,6 +63,9 @@ module.exports = async ({ buffer, width, height } = {}) => {
     throw new Error('"options.buffer" is not a valid SVG image');
   }
 
+  resolveViewBox($, $svg);
+  resolveUseTags($, $svg);
+
   const { naturalWidth, naturalHeight } = await loadImage(Buffer.from($.xml($svg)));
 
   let w, h;
@@ -71,7 +87,6 @@ module.exports = async ({ buffer, width, height } = {}) => {
   $svg.attr('width', `${w}`);
   $svg.attr('height', `${h}`);
 
-  resolveUseTags($, $svg);
 
   const image = await loadImage(Buffer.from($.xml($svg)));
   const canvas = createCanvas(w, h);

test/index.test.js

@@ -62,6 +62,21 @@ describe('module', () => {
     await validateImage({ png, width: 50, height: 50, hash: 'c7343wq04L3' });
   });
 
+  it('renders images without a viewbox', async () => {
+    const input = `
+    <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="25" cy="25" r="25" fill="red"/>
+      <rect width="20" height="20" x="0" fill="cyan" />
+      <rect width="20" height="20" x="20" fill="magenta" />
+      <rect width="20" height="20" x="40" fill="yellow" />
+      <rect width="20" height="20" x="60" fill="black" />
+      <rect width="20" height="20" x="80" fill="gray" />
+    </svg>`;
+    const png = await render({ buffer: Buffer.from(input), width: 200 });
+
+    await validateImage({ png, width: 200, height: 100, hash: 'ef0003y01x0' });
+  });
+
   it('errors if the input is not an SVG image', async () => {
     let error;