… starting from the point where the story stopped.
Leveraging plugins for secure SVG integration
To use SVG files on your WordPress site safely, you can enable support using plugins or by adding code manually. Using a plugin is the recommended method because it’s easy and includes security features.Mansoor Ahmed Khan
Avoiding plugins whenever possible is part of that philosophy. Sure, the more plugins a website relies on, the greater the risk of conflicts, performance slowdowns, and security vulnerabilities. But the real reason is simpler: I don’t want to depend on free third-party plugins. First, truly reliable free or freemium plugins are rare. Too often, they come with limitations, hidden trade-offs, or subpar execution. Second—and more critically—you’re at their mercy. A plugin can change its pricing model overnight, stripping away essential features, or worse, get abandoned entirely. When that happens, it doesn’t just stop working—it can turn into a security liability. I’ve experienced this firsthand with my reaction plugin: my first choice abruptly ended its freemium offering, forcing me to look elsewhere; the second was left to decay, ultimately becoming a risk to my site.
All of this reinforces my preference for manual solutions. And yet, here I am—forced to consider a plugin for SVG support because securing these files properly is too complex to handle without one 1.
You might think of SVGs as simple, scalable images. But beneath their seemingly innocent surface lies a potential danger. SVGs are essentially code—XML code—and like any code, they can harbor hidden scripts. Imagine uploading what you believe is a harmless logo, only to unknowingly introduce a backdoor for malicious actors. These scripts can silently steal user data, redirect visitors to harmful sites, or even inject unwanted content into your website. The risk isn’t just theoretical; it’s a real possibility that demands careful attention.
Why I chose Safe SVG
Given the absence of native SVG support in WordPress and the increasing demand for this essential functionality, it’s no surprise that several plugins have emerged to bridge the gap. Among the plugins worth considering 2 are Safe SVG, which focuses purely on secure SVG integration in WordPress, and SVG Support, which provides complete SVG integration, allowing you to upload, style, and animate SVGs within WordPress. Both are widely used options, offering secure SVG uploads with automatic sanitization while also ensuring that SVGs are properly displayed in the WordPress Media Library—a feature that manual code solutions often overlook (as stressed earlier).
Safe SVG is the best way to Allow SVG Uploads in WordPress!Safe SVG
Rather than searching for alternatives, I opted for the solution most aligned with what WordPress itself could have implemented had SVG support made it into core. Unlike other plugins created to fill a general need, Safe SVG began as a proof of concept for WordPress ticket #24251—the very discussion that first proposed integrating SVG support into WordPress core. Safe SVG embodies what WordPress’s approach could have been had it moved forward with integration.
Initially a proof of concept for #24251.
In essence, it represents a direct response to the SVG dilemma, offering sanitization while allowing uploads in a way that aligns with WordPress’s user-first philosophy. It doesn’t pack in unnecessary features or overcomplicate its function—it simply does one job well, providing a secure way to use SVGs without compromising a site’s integrity.
The main advantage of this plugin is the security-first approach. By sanitizing SVGs, it prevents dangerous scripts or code from being embedded.Shahaneaz Shaikat
Safe SVG is indeed a lightweight WordPress plugin designed to enable SVG uploads securely. While some alternative plugins offer extended features, Safe SVG maintains a sharp focus on security and usability, avoiding unnecessary complexities. As emphasized earlier, manually handling sanitization is cumbersome, and WordPress itself lacks any built-in method to do so. This is where Safe SVG excels. It integrates Daryll Doyle’s SVG-Sanitizer, a proven PHP-based library designed to strip malicious scripts from SVG files while preserving their intended design.
Last, but not least, Safe SVG has built a strong reputation in the WordPress community, consistently receiving positive feedback for its simplicity and reliability. With over 1 million active installations and a 4.9-star rating on WordPress.org, it has proven to be a trusted solution for secure SVG uploads. Users appreciate its plug-and-play nature, meaning no extensive configuration is needed—just install, activate, and SVGs become safely accessible.
This is pretty much a plug-and-play kind of plugin and it’s definitely the most straightforward approach to safe SVG implementation in WordPress. If you’re intent on using SVGs, we recommend you give it a try.John Hughes
Installation and configuration
Navigating to the Plugins tab in WordPress, I selected Add Plugin and searched for “Safe SVG.” With the plugin located, installation was as simple as clicking Install Now. The real decision, however, came next—Network Activation.
Since I run a multisite setup, I hesitated before activating the plugin across the network. Given its role in ensuring secure SVG uploads, it seemed essential to have it enabled across all sites—not just for my blog’s reaction buttons. A quick Google search yielded limited information, but I did stumble upon a relevant WPMUDEV forum discussion: SVG not working on the subsite.
This was exactly the kind of issue I was hoping to avoid. Desperate for answers, I skimmed through the thread at lightning speed. Then, I spotted it—a comment mentioning Safe SVG. Without pausing to process, I jumped to the worst possible conclusion. That was the plugin they were using… and it wasn’t working.
But then—hold on. I slowed down, and re-read the comment properly. This wasn’t from the original poster. This was someone else, chiming in to say they had Safe SVG network activated—implying it worked across their multisite. Just like that, the conclusion flipped. With renewed confidence, I proceeded with Network Activation, trusting that Safe SVG would function across all my sites as needed.
That’s it, I was done with the installation; there was nothing else to do.
Moment of truth: time to implement
With Safe SVG activated, the next logical step was testing it. But how? Should I upload an SVG directly to the Media Library? Or should I go straight to my reaction plugin, where the issue first surfaced? For a moment, indecision took hold. I stared at the screen, frozen. What if the plugin failed me? What if I had gone through all of this for nothing? Eventually, I made my choice. Straight to TotalRating.
Opening the widget editor, I found my four existing reactions still in place—Like, Agree, Disagree, Thank you. Instead of replacing them outright, I opted to add a fifth reaction. After all, with my revised labels, I’d need five buttons anyway. Clicking New Point, I selected Image and attempted to drop in my freshly created SVG file. Nothing. Undeterred, I tried another approach—manually browsing for the file instead. The dreaded error message I had encountered before:
Abandoning the direct plugin approach, I headed to the Media Library, clicked Add Media File, and held my breath. Please, let this work. I dragged my first SVG into place… And—it worked!
With the first SVG upload successful, I made sure to edit the image properly—adding alt text and ensuring everything was set up correctly. But more importantly, I copied the URL of the SVG. You might remember that TotalRating offered an alternative method—instead of directly uploading an image, I could provide a URL. Bingo.
Back to the Media Library, I repeated the process with the remaining four labels, carefully uploading each SVG. Then, with my URLs ready, I returned to the reaction plugin. One by one, I added the new images and updated the labels below accordingly.
Success.
“Success! Really? Are we actually done?”
“Well—for this part, yes. The reaction buttons are in place, integrated and functional. But just look at them. This isn’t over—not even close.”
To be continued…
1 Yes, enabling SVG uploads with a simple code snippet is easy. But doing so safely? That’s a different story. As discussed earlier, SVGs are not passive image files—they’re XML-based and capable of executing scripts. Without proper sanitization, they can introduce serious vulnerabilities. Was there a way to sanitize them manually? Absolutely. But let’s be honest—it would have been a painstaking process, requiring a combination of external sanitization tools and meticulous oversight before every upload. This level of vigilance, while commendable, is impractical for everyday use. ^
2 A good SVG plugin should not simply enable uploads—it should prioritize security, ensuring files are sanitized to remove potential threats. Without this safeguard, an SVG plugin is nothing more than an open door to vulnerabilities. ^