When I designed my shiny new logo in SVG format, I was thrilled. It was sharp, scalable, and pixel-perfect on all screens. But when I tried uploading it to a web project, something unexpected happened. The SVG sanitizer called it “unsafe” and blocked it. Wait… how could my innocent logo be dangerous?
TL;DR:
SVG files aren’t just images — they can contain code. Some of that code can be harmful. My SVG logo got flagged due to embedded scripts and unnecessary metadata. I learned how to sanitize and whitelist SVG code properly, keeping it secure while preserving all the visual magic.
How is an image dangerous?
Unlike JPEGs or PNGs, SVGs are actually code. They’re written in XML, which means they can include tags to draw shapes, lines, and even run scripts. Yes — a hacker could sneak in <script> tags inside an SVG. That opens the door to things like redirecting users, stealing cookies, or logging keystrokes.
Imagine uploading a cool vector image only to find out it was secretly packed with malicious code. That’s why SVG sanitization is vital. But in my case, I wasn’t sending in malware — just my slick new design. So, what went wrong?
SVG sanitized me out of existence
I built a logo using a popular design tool and exported it as an SVG. When I tried uploading it to a platform that uses an SVG sanitizer, it simply rejected it. A message popped up: “Dangerous elements detected in SVG.”
Confused, I opened the file in a text editor. It was a wall of XML. There were gradients, filters, foreignObject tags, and even some scripting references. I had no idea these were added. The design tool included a lot of “extras” behind the scenes.
Here are some of the things that can trigger an alert:
- Embedded scripts (
<script>) - External references to fonts or images
<foreignObject>tags (which allow HTML inside SVG)- Excessive metadata or animation features
I needed a SVG detox
After some digging, I found trusty SVG sanitizers like Darryl Doyle’s DOMPurify + sanitize-svg and online tools like SVGOMG.
These tools clean out dangerous or extraneous elements, but be warned: they can go overboard. My first sanitization attempt left me with a very different logo — stripped of gradients and visual effects. It was safe… but ugly.
Introducing the “sanitize-and-whitelist” method
I learned that to keep both security and style, I had to use a two-step method:
Step 1: Sanitize
Use a tool that removes the truly harmful parts — like embedded scripts or foreignObject tags. DOM-based sanitizers are good here. They parse the SVG and remove anything that smells phishy.
Step 2: Whitelist
Once the SVG is technically safe, re-allow some visual elements if you trust the source (like your own computer!). You can make exceptions for harmless tags based on your project’s needs like:
<linearGradient><filter><style>(if tightly worded)
Some libraries and frameworks let you define a custom whitelist of allowed tags and attributes, so you can fine-tune it. If your sanitization tool flags something you know is safe, just add it to the whitelist. That way, you won’t lose your hard-earned design.
How I applied it to my logo
Here’s how I finally sanitized my SVG without destroying the look:
- Ran the SVG file through SVGOMG. It stripped unnecessary metadata and comments.
- Removed
<script>tags and remote font references manually in a text editor. - Replaced
<foreignObject>(used by design tools for text) with simpler<text>tags. - Tested the result in browser sandboxes to ensure rendering stayed the same.
- Submitted it again — and it passed!
There was one tiny visual tweak I had to live with, but the final product looked almost identical. And now, it was safe and standards-compliant.
Why platforms are strict with SVGs
Most websites that let users upload SVGs run them through sanitizers. It’s a security must. Since SVGs are code, they can be used to exploit cross-site scripting (XSS) vulnerabilities. Sanitizers act like bouncers—if a file includes anything sketchy, it’s denied entry.
If you’re building a site yourself, never allow unsanitized SVG uploads. One rogue vector can open you up to a whole world of pain.
SVG tips for designers and developers
Here are a few ways to avoid SVG headaches in your workflow:
- Design smart — Use minimal effects unless necessary.
- Export clean — Try the “simplified SVG” option in your design tool when exporting.
- Edit manually — Open the SVG in a text editor and scan for suspicious code.
- Sanitize everything — Even from trusted tools.
- Whitelist gently — Only allow tags that are absolutely needed for your visuals.
Final thoughts: art meets engineering
SVGs are both beautiful and dangerous, like a vector-shaped ninja.
They can bring your designs to life with crisp edges and tiny file sizes. But they can also be exploited if you’re not careful. Don’t let that scare you — embrace them, just sanitize first.
Thanks to the sanitize-and-whitelist method, I now have a safe logo on my page that looks just like the original concept. No malware included.
So next time your SVG gets flagged, don’t panic. Just give it a digital bubble bath and reapply — clean, confident, and ready to shine.
