Understanding SVG Structure
Every SVG starts with a root <svg> element that defines the canvas. The two most important attributes are viewBox and the explicit width/height dimensions.
The viewBoxdefines the internal coordinate system — think of it as the "camera frame" that determines which part of the SVG canvas is visible. The format is viewBox="minX minY width height". When the aspect ratio of the viewBox differs from the element dimensions, the preserveAspectRatio attribute controls how the SVG scales.
Common child elements include <path> (freeform shapes via the d attribute), <rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon>. Grouping is done with <g>, and reusable definitions go in <defs>.
SVG Optimization Tips
| Optimization | What It Does | Size Reduction |
|---|---|---|
| Remove metadata | Strip editor comments, Illustrator/Inkscape metadata | 10-30% |
| Simplify paths | Reduce decimal precision, merge adjacent segments | 15-40% |
| Use currentColor | Replace hardcoded colors with CSS-inheritable value | Minimal, but improves reusability |
| Remove empty groups | Eliminate <g> elements with no visual effect | 5-10% |
| Minify whitespace | Remove unnecessary newlines and indentation | 5-15% |
| Remove default values | Drop attributes that match SVG defaults (fill="black") | 5-10% |
FAQ
Is it safe to paste SVG from unknown sources?
This tool sanitizes SVG before rendering by stripping <script> tags, event handler attributes (onclick, onload, etc.), <foreignObject> elements, and javascript: URLs. However, for maximum safety, avoid pasting SVGs from untrusted sources in production applications without server-side sanitization.
Why does my SVG look different here vs. in my editor?
Common reasons include: missing fonts (text elements will fall back to the system font), embedded images using relative paths, and CSS styles that were applied externally. The preview renders the SVG in isolation without external stylesheets.
What does the "Copy Optimized" button do?
It copies a cleaned version of your SVG with comments removed and whitespace normalized. This is a light optimization — for heavy optimization (path simplification, attribute removal), use a dedicated tool like SVGO.
Can I test transparency?
Yes. Use the background toggle to switch between white, dark, and checkerboard backgrounds. The checkerboard pattern makes it easy to see which parts of your SVG are transparent versus white-filled.