# Images

## Content

DsPdfJS lets you draw images on a page using the[ drawImage ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#drawimage)method of the [PdfContext](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext) class. Images are loaded from a byte array using[ Image.load](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/Image#load), producing an Image object. A loaded Image can also be converted to a Bitmap using the[ img.toBitmap ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/Image#tobitmap)method. Both Image and Bitmap objects can be passed directly to the drawImage method.
DsPdfJS supports the following image formats:

* JPEG
* PNG

drawImage method accepts a[ DrawImageOptions](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/type-aliases/DrawImageOptions) type that gives you control over how an image is drawn.
![Image.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Image-20260421.36d161.png?width=720)

### Add Image

To add an image to a PDF document, load the image data using Image.load, then draw it onto the page by calling ctx.drawImage with the target position and dimensions.

```auto
const doc = new ds.PdfDocument();
const ctx = doc.newPageContext();
const margin = ctx.resolution / 2;

const img = ds.Image.load(await loadFileAsArray("img/wargravepink.jpg"));
const scale = 0.5;

// Draw image at half size, preserving aspect ratio:
ctx.drawImage(img, margin, margin, img.width * scale, img.height * scale, {
  keepAspectRatio: true,
  opacity: 1,
});

// Draw image with a clipped region:
ctx.drawImage(img, margin, margin + img.height * scale + 24, img.width * scale, img.height * scale, {
  clipBounds: { x: margin, y: margin + img.height * scale + 24, width: 200, height: 150 },
  keepAspectRatio: true,
});
```

### Render SVG Image to PDF

DsPdfJS provides the[ SvgDocument](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/SvgDocument) class to load and render SVG files onto PDF pages. To render an SVG image to a PDF document:

1. Load the SVG file as a byte array and pass it to [SvgDocument.load](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/SvgDocument#load).
2. Obtain a PdfContext by calling[ doc.newPageContext](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument#newpagecontext).
3. Apply a coordinate scale using [ctx.pushTransform](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#pushtransform) and [ctx.scale](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#scale) to reconcile SVG pixel units with PDF point units.
4. Draw the SVG onto the page using[ ctx.drawSvg](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#drawsvg), passing the SvgDocument instance and the target coordinates.
5. Restore the drawing context by calling [ctx.popTransform](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#poptransform).

>type=note
> **Note:** SVG coordinates are expressed in pixels, while PDF page coordinates are in points. A scale factor of 72 / 96 converts from 96 dpi pixel space to 72 pt PDF space. Always wrap SVG drawing operations in a [pushTransform](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#pushtransform) / [popTransform](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfContext#poptransform) pair to avoid affecting subsequent drawing operations.

```auto
// Load an SVG from a file:
const svgData = await loadFileAsArray("svg/Smiling-Girl.svg");
const svgDoc = ds.SvgDocument.load(svgData);

const doc = new ds.PdfDocument();
const ctx = doc.newPageContext();

// Footer margin is in the default (identity) page coordinate space:
const footerMargin = ctx.resolution / 2;

// SVG APIs use pixels, so we scale the drawing context while rendering the SVG:
const scale = 72 / 96;
ctx.pushTransform();
try {
  ctx.scale(scale);

  // Margin in the scaled coordinate space:
  const margin = footerMargin / scale;

  // Measure the SVG (in SVG/pixel space):
  const size = svgDoc.getIntrinsicSize();

  // Draw the bounding rectangle:
  ctx.drawRect(margin, margin, size.width, size.height, {
    fillBrush: new ds.SolidBrush([0, 184, 204, 0.2]),
    strokePen: new ds.Pen({ color: [0, 193, 213] }),
  });

  // Draw the SVG:
  ctx.drawSvg(svgDoc, margin, margin);
} finally {
  // Restore the drawing context transform:
  ctx.popTransform();
}
```

![SVG.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/SVG-20260429.feb1eb.png?width=720)
For more samples of working with SVG files, please visit our[ demos](https://developer.mescius.com/document-solutions/javascript-pdf-api/demos/features/svg/draw-svg).