Since I started self hosting a few services, I wanted a custom dashboard something like Grafana Canvas where I could monitor my entire infra and visulaize all my devices and their status on a single screen.

At first, I thought, “Hey, I’ll just design the whole device model with CSS!”

But then reality hit me… that would probably take a decade for someone like me who doesn’t have a frontend background 😅 Then I thought, “Why not ask someone who actually knows a thing or two about frontend?”

So, I reached out to a fullstack developer Adokshaj Bhandarkar probably the most frontend savvy person I know, who knows the ins and outs of it like a pro.

After explaining my idea (and all my doubts) to him, he quickly pointed me toward SVG. Using SVG, I realized I could design a custom infrastructure dashboard tailored exactly for my use cases.

These SVGs can be manipulated through the DOM and easily integrated with any frontend. Plus, you can design custom SVGs using tools like Illustrator. So, I went ahead and designed my own router model, where I can visualize port statuses whether an Ethernet port is connected, disconnected, or administratively disabled, etc.

I may not be a professional designer, but hey, I somehow pulled off the stunt and designed the router model myself! 😄

So, how can SVGs actually be manipulated? Well, each SVG element has an id and a fill attribute. Using the id, we can target specific elements in my case, each port on the router model has a unique ID. By changing the fill color dynamically, we can represent different states:

Red for a port that’s shutdown, Green for a port that’s online or up.

Here’s how you can try out the above PoC code:

• Run the server: Start by running server.js.

• Open the dashboard: Then open index.html in your browser.

• Live SVG monitoring: The SVG files are being watched using npm *chokidar.

• Test it out: Open mikrotik_plain.svg , change some colors, and save the file you’ll see the updates reflected in real time on your Browser!

SVG in action Final result