Convert SVG to a PDF in Node with PDFKit and SVG.js

Instructor: [00:00] I'm going to start nodemon on this index file. I've already installed express, so let's just set that up by requiring express, creating our app from express, setting up the root route. We'll get the route, the request response, and we'll send back "hello," and listen on port:3000, save, and we'll open our localhost:3000 here and see "hello."

[00:31] I'm also going to need the FS package. FS the File System, require FS, and have a file in here called background.SVG which I can bring in. With the File System, you essentially createReadStreams, so I could read that file in, background SVG and pipe it into response.

[00:52] If I hit save there and refresh, you'll see the entire SVG file. Since we're going to convert this into a PDF, I'm going to do it this way where I grab the background, and we'll say this is File System readFileSync and read the background in SVG, and we'll essentially stringify it or two string.

[01:15] Then, npm install pdfkit which we can bring in. We'll call this our PDFDocument and require PDFKit which I've npm installed already. We'll go ahead and create a new doc. This is a new PDF document. We want us to have a layout of landscape and a size of A4, essentially the default document size for printer.

[01:46] Now, since we have a document and we have a background SVG, we can bring in the SVG-to-PDFKit package, which I've already installed, so SVG-to-PDF and require SVG-to-PDFKit, and essentially, we're just going to say SVG-to-PDF and write the document that background.

[02:12] We can take our document and pipe that into response. Then, we also need to document end our stream. Hit save there and refresh. You can see we're rendering out our SVG file to a PDF.

[02:29] Now, I want to bring in another tool called SVG.js as well as SVG DOM, so the window is require SVG DOM. Then, when we use our SVG tools from SVG.js, we pass in that window, because node doesn't come with that window object or document to write those SVG elements.

[03:00] We do need that document, so we'll say document, there's a window.document. We can use this to draw, too. To draw, we'll come in here and define a draw, and this is just SVG around the document, documentElement.

[03:16] Then, we can draw to that with what is called as name SVG and draw text. We'll say the text is DOM inquest. The size is 45. I know these values add a time. The attribute of X on SVG is going to be 50 percent.

[03:35] Right in the middle, the attribute of Y is going to be 45 percent, and the attribute of text-anchor is we want that anchored to the middle. Now, we can just call this same SVG-to-PDF, but instead of passing in background, we'll pass in the name SVG, and get the SVG off of it.

[03:58] When I hit save here and refresh, we'll see my name pop in right there. I can type, essentially anything else, refresh, and see anything else pop up. I want to make this configurable.

[04:14] On the request, grab the request query, grab the name, and just drop that in here, name, and say that name is "hello," enter, and now "hello" is coming through here and being passed in query, and being written out to the name SVG. Essentially, duplicate this. We're going to reuse this for a date for the bottom left.

[04:45] We'll say date SVG is draw in order to say October. The size is 19. The X is 13.9 percent and the Y is 87.7 percent. Then, duplicate this and say that's the date SVG. Now, when I refresh, we'll see October is super tiny down there. I can make that bigger, because SVG we can actually make it as big as we want.

[05:16] You can see October right there. Let's bring the date into here as well, so date and bring the date down here, and add the date, name as you, and date is today, hit enter.

[05:35] Now, we have a PDF rendered from SVG as well as certificate that you did this today, or whatever dynamic text you want to add to this PDF. Thanks for being SVG, you can print it off at any size you want, and everything should be crystal clear, fonts and everything.