{"id":34902,"date":"2025-11-20T07:16:17","date_gmt":"2025-11-20T15:16:17","guid":{"rendered":"https:\/\/www.podfeet.com\/blog\/?p=34902"},"modified":"2025-11-23T17:36:26","modified_gmt":"2025-11-24T01:36:26","slug":"brett-terpstra-svg-viewer","status":"publish","type":"post","link":"https:\/\/www.podfeet.com\/blog\/2025\/11\/brett-terpstra-svg-viewer\/","title":{"rendered":"Brett Terpstra is My Hero \u2014 BT SVG Viewer Plugin for WordPress"},"content":{"rendered":"

I’m still basking in the glory that is my Mind Map of Doom (\u2122\ufe0fDonald Burr) of every single dang setting in macOS 26<\/a>. In my how and why I did such a crazy thing post<\/a>, I told you that Brett Terpstra was instrumental in making the mind map actually useful to present on the web, and that I would tell you the story someday. That day is today.<\/p>\n

How I Tricked Brett Into Helping Me<\/h2>\n

On Thursday, November 6th, around noon, I sent Brett an email telling him about my mind map and asking him if he had any advice on the best way to present it on the web. I explained that I had a Markdown version, OPML for outlining apps, and I could present it with HTML, but that didn’t feel right. I wanted it to also be the real mind map in a pretty format, and more importantly, I wanted it to be searchable.<\/p>\n

He asked some great questions and even uploaded my mind map to a collaborative mind-mapping service called MindMeister<\/a>. It wasn’t quite what I was looking for, but his questions made me think more about what I was looking for. I tried to put myself in the eyes of the viewer, not my own. While I think it’s impressive to look at a comically large and unsearchable PNG image<\/a>, it doesn’t have any value whatsoever to people who just want to figure out where Apple hid a particular setting!<\/p>\n

As we noodled, I figured out I could export an SVG version of the mind map. SVG stands for Scalable Vector Graphics, which means that no matter how far you zoom in, the image scales while staying crisp and sharp. Oddly enough, an SVG is a text file that describes the paths to create the image. An SVG would be the perfect format to post this giant mind map to the web.<\/p>\n

But embedding an SVG into a blog post proved to be trickier than I imagined. Brett’s first idea was,<\/p>\n

\n I bet you could pretty easily embed the SVG in a container and then use a tiny bit of JavaScript to center it\u2026 just to avoid people assuming it was a blank image.”\n<\/p><\/blockquote>\n

Brett is a professional developer and could execute that maneuver with his eyes closed. I explained that I would run off with my friend ChatGPT for a while and try to figure it out. Brett offered to take a swing at it if that path didn’t work out.<\/p>\n

ChatGPT “Helping”<\/h2>\n

After a couple of hours arguing with my pathological liar friend ChatGPT, I had made no progress. I had several problems to be solved, one of which Brett referred to. The SVG exported from MindNode left a giant white space at the top, so when first viewed in a browser, you would assume you had a blank page. It was only by scrolling around that you’d eventually discover a small portion of the mind map.<\/p>\n

I uploaded the mind map to ChatGPT and asked it to clean things up so the top wasn’t empty. The resulting file didn’t have the white space, but it only allowed me to pinch in partway. After abandoning that whole path, ChatGPT told me to embed it in my web page with an image tag (<img><\/code>), but that turns it into an image, so it’s not searchable.<\/p>\n

Next, it suggested an inline tag for an SVG with some styling provided in CSS format. CSS stands for Cascading Style Sheets, which is the way a website can have consistent formatting for headings, links, graphics, etc., without specifically formatting every item. I wasn’t sure how this path would work, but I decided to give it a go.<\/p>\n

ChatGPT wanted me to paste the entire<\/em> text of the SVG file between the opening and closing <div><\/code> tags. This SVG file is 7596 lines long, and it probably took 30 seconds just to paste the text into my WordPress interface.<\/p>\n

<div class=\"svg-inline\">\n  <!-- paste the entire raw <svg>\u2026<\/svg> file here -->\n<\/div>\n<\/code><\/pre>\n
Worse yet, this massive text dump pretty much brought WordPress to its knees. After thinking I’d saved the post in draft format, when I tried to view the preview, a message popped up asking, “Do you want to leave this page?”  That’s WordPress’s way of telling you that you have not<\/em> actually saved the page. I gave up on following the suggestions from ChatGPT at this point.<\/p>\n
Brett Jumps In With Both Feet<\/h2>\n
You’ll remember I mentioned that I first asked Brett for advice at noon on Thursday. Friday morning at 8:21 AM, I told Brett that I had failed in my efforts, and he was good to his word and agreed to take a look at a way to solve this for me.<\/p>\n
The first thing he did was run my SVG through an optimizer (I had no idea these things existed!), and not only did the optimizer fix the white space problem, but the file size went from 3.8MB down to 1.5MB! I don’t know which optimizer he used, but a quick search revealed that there are quite a few web-based tools out there to provide this service. I found one called svgomg.net\/…<\/a> that has a whole bunch of toggles to help optimize your file the way you want, if you want to see what these tools can do.<\/p>\n
Anyway<\/em>, his reply came in at 9:40 AM, and in the same message about the optimizer, he wrote:<\/p>\n
\n  So now I\u2019m about 80% of the way through building you a WordPress plugin to:<\/p>\n
    \n
  1. Enable SVG uploads to the media library<\/li>\n
  2. Add a shortcode to insert SVGs into posts, with attributes like height, initial zoom, max zoom, zoom increment, etc.<\/li>\n
  3. Display a viewer in a post\/page with zoom controls and a centering button<\/li>\n
  4. Considering building in handling for MindNode SVGs that automates the process of fixing the viewbox and optimizing the SVG, but that might be a 1.1 thing<\/li>\n<\/ol>\n<\/blockquote>\n
    Now you know why I’ve been giving you timestamps. I wrote to him at 8:21 AM on Friday, telling him I’d made no progress, and by 9:40 AM (a mere hour and nineteen minutes later), he was 80% done writing a WordPress plugin to fix my problem. \ud83e\udd2f<\/p>\n
    At one minute to noon on Thursday, Brett sent me a link to version 1.0.0 of his BT SVG Viewer WordPress plugin on GitHub<\/a>. He referred to this as a “rush” job, but it wasn’t just a link to download some code to put on my website. It was a fully documented tool<\/em>. I’m talking about a Read Me with everything you need to know to use the plugin, including changing the presets for zoom and height.<\/p>\n
    With his plugin installed on Podfeet’s WordPress, and a few variables defined by me, the viewer could now see an embedded SVG with buttons to zoom in and out, center the graphic, and reset to the original position. It was a beautiful thing.<\/p>\n
    Over the next day, Brett released five more versions of the plugin. With his first version, I had to calculate where to center the image when it first came up, and plug those numbers into what WordPress calls a short code. A short code is some text between two square brackets with key\/value pairs. For example, to start at a zoom value of 50%, you would write zoom=”50″.  It was a bit tricky to figure out where to center the SVG. I had to know how tall and wide my SVG was so I could calculate the values of center_x=\"3257\"<\/code> and center_y=\"35866\"<\/code>.<\/p>\n
            
    \n                        
    \n                                    
    \n