8LS Logo
GitHub

Create SVGs from SvelteKit dynamically

An SVG as an example

Let’s have a look into following SVG:

The Code

I just asked ChatGPT to generate an SVG for me with “Hello World” text in it and a purple border around it. Together with the border the SVG is 200x100 pixels in size.

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="2.5" y="2.5" width="195" height="95" fill="white" stroke="purple" stroke-width="5" />
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="16" fill="black">
    Hello World
  </text>
</svg>

The Result

Pretty straight forward, isn’t it?

Hello World

Dynamically creating SVGs

Now let’s create an SVG dynamically with SvelteKit. We will use the same SVG as above, but we will create it dynamically with SvelteKit. You will find a link below that you can click to create an SVG dynamically based on query parameters:

Create SVG

Let’s make it even more dynamic by binding the values in belows form to the URL for generating the SVG.

Whatever you type in the form above will be used to create the SVG below:

Dynamically created SVG

What’s more. We can also create a dynamic PNG with SvelteKit in this way. This file is created on the server side with the help of the resvg library. As you can see the text is a bit blurry. Depending on your environment also the font might differ. —> TODO: Fix this :)

Dynamically created Png

Just click with your right mouse button on the image above and save it to your computer.