Images & SVG Vectors

Embedding JPEG photos, transparent PNGs with alpha channel masking (SMask), and inline SVG vector paths.

Source Code (image.ts)

import { MheePDF, Image } from "mheepdf";

// 1. Initialize MheePDF Document
export const pdf = new MheePDF({
  pageSize: MheePDF.A4,
  margin: 50,
  defaultFont: "Helvetica",
  defaultFontSize: 12,
  compress: false,
});

// 2. Add Title
pdf.addText("Embedding Images & Vector Graphics", { fontSize: 22, align: "center" });
pdf.addText("\n");
pdf.addText("MheePDF supports embedding JPEG/JPG files, transparent PNG files (with alpha channel/SMask support), and inline SVG vector graphics.");
pdf.addText("\n");

// 3. Add Left-aligned JPEG Image using Image.fromUrl
pdf.addText("1. JPEG Image (Left aligned, 120pt width):", { fontSize: 14 });
const catImage = await Image.fromUrl("/resources/images/test-cat.jpg", { width: 120, align: "left" });
pdf.add(catImage);
pdf.addText("\n");

// 4. Add Center-aligned PNG Image with Transparency using Image.fromUrl
pdf.addText("2. PNG with Alpha Transparency (Center aligned, 140pt width):", { fontSize: 14 });
const rgbaImage = await Image.fromUrl("/resources/images/test-rgba.png", { width: 140, align: "center" });
pdf.add(rgbaImage);
pdf.addText("\n");

// 5. Add Center-aligned SVG Graphic using standard fetch
pdf.addText("3. Inline SVG Vector Graphic (Center aligned, scales crisp):", { fontSize: 14 });
const svgResponse = await fetch("/resources/images/test-svg.svg");
const svgString = await svgResponse.text();
pdf.addSvg(svgString, { align: "center" });

PDF Preview

Open Tab