Docs: use SVG image for the resize fit property example (#3735)

lovell · Jul 21, 2023 · f908987 · f908987
1 parent aea368a
commit f908987
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 2 deletions.
diff --git a/docs/api-resize.md b/docs/api-resize.md
@@ -10,7 +10,7 @@ When both a `width` and `height` are provided, the possible methods by which the
 
 Some of these values are based on the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
 
-<img alt="Examples of various values for the fit property when resizing" width="100%" style="aspect-ratio: 998/243" src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/api-resize-fit.png">
+<img alt="Examples of various values for the fit property when resizing" width="100%" style="aspect-ratio: 998/243" src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/api-resize-fit.svg">
 
 When using a **fit** of `cover` or `contain`, the default **position** is `centre`. Other options are:
 - `sharp.position`: `top`, `right top`, `right`, `right bottom`, `bottom`, `left bottom`, `left`, `left top`.

diff --git a/docs/image/api-resize-fit.png b/docs/image/api-resize-fit.png
diff --git a/docs/image/api-resize-fit.svg b/docs/image/api-resize-fit.svg
diff --git a/lib/resize.js b/lib/resize.js
@@ -126,7 +126,7 @@ function isResizeExpected (options) {
  *
  * Some of these values are based on the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
  *
- * <img alt="Examples of various values for the fit property when resizing" width="100%" style="aspect-ratio: 998/243" src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/api-resize-fit.png">
+ * <img alt="Examples of various values for the fit property when resizing" width="100%" style="aspect-ratio: 998/243" src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/api-resize-fit.svg">
  *
  * When using a **fit** of `cover` or `contain`, the default **position** is `centre`. Other options are:
  * - `sharp.position`: `top`, `right top`, `right`, `right bottom`, `bottom`, `left bottom`, `left`, `left top`.