SVG files are XML documents with a specific DOM (Document Object Model) structure, and understanding this structure reveals why design tools generate bloated SVGs and how optimization techniques achieve dramatic size reductions without visual impact.

The SVG DOM consists of elements representing shapes (rect, circle, ellipse, line, polyline, polygon, path), text (text, tspan), groups (g), definitions (defs), and styling (style, use). Each element has attributes defining its geometry, appearance, and behavior. The path element is the most powerful and common, using a mini-language of commands: M (move to), L (line to), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), and Z (close path). A complex illustration might contain hundreds of path elements, each with lengthy d attribute strings containing coordinate sequences.

Design tools like Adobe Illustrator, Figma, Sketch, and Inkscape generate SVGs optimized for re-editability rather than file size. Illustrator adds its own XML namespace (xmlns:x and xmlns:i) with proprietary metadata for round-trip editing. Inkscape embeds sodipodi and inkscape namespaces with layer information, grid settings, and document metadata. Figma includes descriptive element IDs and sometimes redundant group nesting. All these tools may include: XML declarations and doctype definitions, editor-specific metadata and namespaces, comments documenting the export process, empty group elements with no visual content, default attribute values that match the SVG specification defaults (fill="black", stroke="none"), redundant style properties inherited from parent elements, excessive decimal precision in coordinates (15 decimal places when 2 would suffice), and embedded fonts or unused definitions.

Optimization techniques target each source of bloat. Metadata and comment removal strips non-visual data. Attribute minification removes default values and shortens color notations (converting "rgb(255,0,0)" to "#f00"). Coordinate precision reduction rounds numbers to fewer decimal places, since the difference between 12.345678901234 and 12.35 is sub-pixel and invisible. Path optimization merges sequential commands, converts absolute coordinates to relative (which tend to produce shorter numbers), and simplifies unnecessary precision. ID shortening replaces descriptive IDs like "Layer_1_copy_2_rectangle" with minimal IDs like "a". Style consolidation moves repeated inline styles into CSS classes. Group flattening removes unnecessary nesting where groups contain only a single child element. These optimizations are purely syntactic, changing the representation without affecting the rendered appearance.