Generating SVG with PHP

In one of my previous jobs, I had to develop a system that could automatically produce sheets of images that could be printed onto Avery type business card paper. The purpose was to create a ticketing system which could be used to distribute unique codes out to people so that they could log in with this unique key at a later date. It’s a fairly common use-case, and I’ve seen similar systems used at various conferences I’ve attended, in order to keep track of who’s accessing the free WiFi, or to track individual users to promo codes. In fact promo codes is probably the best analogy for it.

The process I used was to determine the layout of one of the tickets, then generate a PNG using the graphics libraries available in PHP to make a single image. I then rolled that image into a function call, with the promo code value and value of the promotion as arguments passed to that function via its constructor. Once I’d got that far, it was just a matter of looping through the database of promo codes, offsetting the images as required into a document model, then turning it into a PDF file for download or print. All of which sounds easy. However it wasn’t is straightforward as I’d expected it to be…

For one thing, these tickets needed to look right, so the graphic designer on the project supplied me with assets showing how the tickets needed to look, with the text sections omitted so that I could overlay the unique codes onto the image. So far so good. The difficulty came when I was scaling and lining up the text with the other components on the ticket. Because the PNG function only yielded a result when the code was valid and complete, debugging became tricky; whenever something went wrong in my code, I’d just get a generic PHP syntax error with a line number, but I couldn’t always see what was happening behind that error. Long story short(ish), I fixed it eventually and rewrote the class to give me a text log so I could see what dimensions I’d left out or fat-fingered, to make debugging easier in the future.

If I were to attempt that project again, I’d forget the PNG generation idea completely, and use Scaled Vector Graphics; the SVG format. SVGs are generated by the browser render engine, and exist as markup, in the same way as a HTML page. In fact, SVG is based on XML, which is in turn based on SGML, just like HTML – so they’re consistent. Consistency is great in my opinion, because it means I can work with the same text editing tools, and come up with the same sort of time-saving scripts that I’d used with HTML. Less to learn, what’s not to like?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 <circle
 cx="100"
 cy="75"
 r="100"
 stroke="black"
 stroke-width="2"
 fill="red" />
 <circle
 cx="100"
 cy="80"
 r="40"
 stroke="black"
 stroke-width="2"
 fill="yellow" />
 <circle
 cx="300"
 cy="80"
 r="40"
 stroke="black"
 stroke-width="2"
 fill="yellow" />
</svg>

The killer feature in my opinion, is the ability to view all of this markup when you’re debugging. Rather than getting random server errors and having to chase down the log files for your server, you can see if the syntax is wrong by opening up the source tab in your browser! Far less hassle, and would’ve been a major headache saver in the past.

It’s also really easy to learn if you’ve got experience, check out an I’ve put together here showing how to draw some basic circles with PHP and SVG.

Leave a Reply

Your email address will not be published. Required fields are marked *