SVG File Format: Structure, Syntax and Best Practices

SVG (Scalable Vector Graphics) is both an image format and a markup language. An SVG file is valid XML, which means it follows strict rules about element nesting, attribute syntax and character encoding. Understanding the structure of an SVG file makes it easier to edit, optimize and integrate into your projects.

Basic SVG structure

Every SVG file starts with an <svg> root element. The most important attributes on this element are viewBox (which defines the coordinate system) and optionally width and height (which define the rendered size). Inside the root element are the shapes, groups, definitions and text that make up the graphic.

• viewBox="0 0 100 100", defines a 100x100 internal coordinate space
• width and height, set the default rendered size (can be overridden by CSS)
• xmlns="http://www.w3.org/2000/svg", the required namespace declaration

Core SVG elements

Shapes

• <path>, the most versatile element, draws any shape using a path data string
• <rect>, rectangles and squares, with optional rounded corners via rx and ry
• <circle>, circles defined by center point (cx, cy) and radius (r)
• <ellipse>, ellipses defined by center point and two radii (rx, ry)
• <line>, straight lines between two points
• <polygon> and <polyline>, shapes defined by a series of connected points

Grouping and structure

• <g>, groups elements so transforms and styles can be applied to all children at once
• <defs>, stores reusable elements (gradients, patterns, filters) that are not rendered directly
• <use>, references and renders a defined element, enabling symbol reuse
• <symbol>, defines a reusable graphic template, similar to a component

Text

<text> renders text as a vector element. Unlike raster text, SVG text is searchable, selectable and accessible by screen readers. Use the font-family, font-size and fill attributes to style it. For complex text layout, <tspan> elements allow fine-grained control over positioning.

The viewBox attribute explained

The viewBox is arguably the most important SVG attribute. It defines a rectangle in SVG coordinate space that will be mapped to the rendered size of the element. For example, viewBox="0 0 200 100" creates a coordinate space 200 units wide and 100 units tall. If the SVG is then rendered at 400x200 pixels, everything is scaled up 2x automatically.

Accessibility best practices

• Add a <title> element as the first child of <svg> to provide a text description
• Add aria-label or aria-labelledby when using SVG inline in HTML
• Use role="img" on decorative SVGs and role="presentation" on purely decorative ones
• Ensure sufficient color contrast between fills and their backgrounds
• Do not rely on color alone to convey information

Optimizing SVG files

Production SVGs should be optimized to remove editor metadata, redundant attributes and unnecessary precision. This reduces file size without any visual change. You can use the SVGcreator SVG Optimizer to do this in one click, it uses SVGO under the hood and shows you the before and after file size.