Implementing a serverless function that creates custom charts. I started by placing an SVG template in a string literal. This evolved into creating functions that generate SVG primitives. The resulting is code that is much cleaner, more readable, and potentially more flexible.

Due to deployment constraints, I needed a simple stateless MCP server deployed as a serverless function. The request arrives, CORS is added, GET returns 200, POST routes to handler. The handler calls other APIs, mapping to the protocol. Tools are described using Zod per convention.

If you are converting SVG to PNG then you probably want to keep the font styles intact. The resvg package can accommodate this with a font configuration. The font files themselves need to be loaded into buffers. Font styles need to be applied inline - CSS does not seem to apply.

Converting SVG to PNG is usually the domain of packages such as Sharp. This creates a binary dependency which complicates deployment (develop on Mac, deploy on Linux). The resvg package gives you this functionality without the binary dependency thanks to the included WASM module.

OpenWhisk (Adobe IO Runtime) output can present whatever content type is desired. In the case of SVG that content type would be image/svg+xml with the body of the response being the text string representing the SVG. You can use string literals to dynamically build the SVG.

A lot of setup guides make their job easy by making your job hard. They do so by having you install all manner of additional dependencies before you even know what you are doing. Adobe App Builder is one of those products. Here is my minimalist version of what is actually needed.