X-ray your SVG icons.
SVG is code, so we audit the code: viewBox discipline, embedded rasters, XSS vectors, editor cruft, currentColor support, path complexity — with an optimised copy ready to take away.
Analysed locally in your browser — nothing is uploaded
Why use our SVG Analyzer?
Security Audit
Detect XSS vectors, embedded scripts, event handlers and javascript: URLs that pose security risks.
Performance Optimization
Reduce file size by removing editor metadata, comments and unnecessary attributes for faster loading.
ViewBox Validation
Ensure proper viewBox setup for responsive scaling and consistent icon sizing across your application.
currentColor Support
Check if your SVG uses currentColor for theme-aware icons that adapt to your application color scheme.
Path Analysis
Analyze path complexity, command count and bezier curves to identify optimization opportunities.
Privacy First
Everything runs locally in your browser. Your SVG code never leaves your device.
How to analyze your SVG
Paste or Upload
Paste your SVG markup directly or upload an .svg file. You can also try our sample to see how it works.
Review the Audit
Get a comprehensive report covering security, performance, viewBox, currentColor and path complexity.
Copy Optimized Code
Download the optimized SVG or copy the cleaned code directly. Ready for production use.
SVG is code — these are the attack vectors
An SVG served from your own domain runs with your origin's privileges. Every vector below has been used in real campaigns, usually through user-uploaded avatars or icons pulled from third-party libraries.
| Vector | Looks like | Why it is dangerous |
|---|---|---|
| Inline script | <script>…</script> | Executes when the SVG is opened directly or embedded inline |
| Event handlers | onload="…" onclick="…" | Runs on render or interaction, no script tag required |
| javascript: URLs | href="javascript:…" | Triggers on click inside linked icons |
| foreignObject | <foreignObject>…</foreignObject> | Embeds arbitrary HTML, bypassing simple tag filters |
| External references | <use href="https://…"> | Loads remote content; can leak visitor IPs or track renders |
| Embedded raster | data:image/png;base64,… | Bloats the file and hides payloads from text-based review |
Serving untrusted SVGs? Deliver them as image/svg+xml from a separate origin, or sanitise with a dedicated library. Rendering user SVG inline in your page is equivalent to rendering user HTML.
Why viewBox decides whether an icon scales
With a viewBox, the SVG has an internal coordinate system. Set width="24" height="24" in CSS and it scales cleanly to any size, because the renderer maps that box onto the viewport.
Without one, the browser falls back to the raw coordinates. The icon renders at its authored size, clips when the container is smaller, and leaves empty space when the container is larger.
A wrong origin breaks cropping. viewBox="0 0 24 24" on artwork drawn from -12 -12 shifts the icon off-centre or cuts it in half — a frequent symptom of artwork exported from a canvas instead of an icon grid.
Oversized viewBox defeats alignment. Artwork placed in a 1024 × 1024 viewBox but occupying only the centre 200 px appears tiny in every container, because the surrounding whitespace is part of the drawing.
The rule of thumb: tight-crop the artwork to its visual bounds, then set a square viewBox around it. That single change makes an icon predictable in flex layouts, buttons and favicons alike.
What usually inflates an SVG file
Editor metadata
Illustrator and Figma embed <metadata>, sodipodi:* attributes and generator comments. They add kilobytes per icon with zero rendering effect — across a 200-icon library that is a measurable download cost.
Hidden layers and off-canvas groups
Designers leave experimental variants in the file and toggle them invisible. The paths are still serialised and still parsed. Reviewing the element tree usually halves the path count.
Excessive path precision
Coordinates like 12.3456789 cost bytes and render identically to 12.35 at every practical size. Two decimal places is the standard cut-off for UI icons.
Rasters pasted into vector art
A traced logo often keeps a base64 PNG behind the paths "for safety". It can multiply file size by ten and cannot be recoloured — the exact opposite of why SVG was chosen.
Frequently Asked Questions
What does an SVG analyzer check?
An SVG analyzer checks your SVG icons for code quality issues: viewBox discipline, embedded rasters, XSS security vectors, editor metadata, currentColor support, and path complexity. It provides an optimized version ready for production.
Why is SVG optimization important?
SVG optimization reduces file size, improves loading performance, removes security risks like XSS vectors, and ensures your icons work correctly across all browsers and contexts. Optimized SVGs are essential for web performance.
What are XSS vectors in SVG files?
XSS (Cross-Site Scripting) vectors in SVG files include embedded scripts, event handlers, foreignObject elements, and javascript: URLs that can execute malicious code when the SVG is rendered. Our analyzer detects and flags these security risks.
What is currentColor in SVG?
currentColor is a CSS keyword that allows SVG icons to inherit the text color of their parent element. Using currentColor makes your icons theme-aware and easier to style consistently across your application.