SVG syntax and XML structure for logo files

An SVG logo is a plain-text XML document. Instead of storing pixels, its markup describes the logo as geometry: coordinates, curves, fills and strokes that a renderer draws fresh at any size. Because the file is text, you can open it in any text editor and read what the logo is made of. That makes the XML structure the most reliable way to confirm whether you have true vector artwork, not just a file that ends in .svg.

Why an SVG file counts as XML

SVG follows XML's strict rules. Elements are written in angle brackets. Every opening tag must be closed or written as self-closing. Attribute values must be quoted, names are case-sensitive, and elements must nest correctly. A file that breaks these rules is malformed, and many tools will refuse to open it rather than guess, unlike the lenient parsing browsers apply to ordinary HTML. A file may also begin with an optional XML declaration. Export tools sometimes add comments or a document type declaration, which renderers do not need.

The skeleton of a logo SVG

The simplified example below shows a typical logo layout: a root element, an accessible title, and two named groups, one for a symbol and one for lettering stored as a path.

<svg viewBox="0 0 200 80" width="200" height="80">
  <title>Example Co logo</title>
  <g id="symbol">
    <circle cx="40" cy="40" r="30" fill="#1a4f8b"/>
  </g>
  <g id="wordmark" fill="#1a1a1a">
    <path d="M90 30 H150 V38 H98 V46 H140 V54 H98 V62 H150 V70 H90 Z"/>
  </g>
</svg>

The example is illustrative and leaves out the namespace declaration for brevity. A standalone .svg file should declare the SVG namespace with an xmlns attribute on the root element. Without that declaration, a browser may show the file as raw XML instead of a graphic. SVG placed inline inside an HTML page does not strictly need the declaration.

Key elements and their role in a logo

• svg (root): Contains everything. The viewBox attribute sets the internal coordinate system as min-x, min-y, width and height. Width and height set a default display size. The viewBox is what lets a logo scale cleanly, so a file without one may not resize as expected.
• title and desc: Give the graphic an accessible name and description.
• g (group): Bundles related parts, such as a symbol and a wordmark. Groups can carry shared styles or transforms, and id attributes make them easy to target.
• path: Stores most logo geometry in its d attribute as a sequence of drawing commands.
• rect, circle, ellipse, line, polyline, polygon: Basic shapes, often used for simple marks or exported unchanged from design tools.
• defs: Holds reusable definitions such as gradients, clip paths, masks and symbols, which other elements reference by id.
• text: Live, editable lettering that depends on fonts.
• image: Places a raster image inside the SVG, either by referencing an external file or by embedding the data.

How path syntax stores logo geometry

A path's d attribute is a compact command language. M moves the pen without drawing. L draws a straight line, and H and V draw horizontal and vertical lines. C and S draw cubic Bézier curves, Q and T draw quadratic curves, A draws an elliptical arc, and Z closes the shape. Uppercase commands use absolute coordinates and lowercase commands use coordinates relative to the previous point. Design applications often export long decimal values. Optimizers can shorten these to reduce file size, but rounding too aggressively can distort small details such as tight curves or thin counters in lettering, so check the optimized result against the original.

Styling: attributes, inline styles and CSS classes

Fill, stroke and other visual properties can be set three ways: as presentation attributes such as fill, inside a style attribute on an element, or through CSS rules in a style element. Presentation attributes carry the lowest priority. Stylesheet rules override them, and an inline style attribute generally overrides both. When recoloring a logo, check which method the file uses, or an edit may appear to have no effect. One practical catch: some exporters generate generic class names, and when several SVGs are placed inline on the same web page, their style rules apply page-wide. As a result, one logo's classes can recolor another.

Live text versus outlined lettering

A text element renders with whatever font is available where the file is displayed. If that font is missing, the system substitutes another one and the wordmark changes appearance. For this reason, delivered logo files commonly have their lettering converted to outlines, meaning paths. Outlined lettering looks the same everywhere but can no longer be edited as text. Keeping live text also requires a suitable license for the font, which is separate from having the logo file.

Vector artwork, embedded raster and previews

The .svg extension does not prove a file contains editable vector paths. An SVG can consist of nothing more than an image element wrapping a PNG or JPEG, either linked or embedded as a long base64 data string. Such a file is technically SVG, but the artwork is raster: it pixelates when enlarged and cannot be edited as shapes. Some files mix both, for example a vector wordmark next to a raster symbol. Some design tools also store a raster preview alongside the vector data. Only the actual elements in the markup tell you which kind of artwork you have.

Checking a logo SVG's structure

• Open the file in a text editor and confirm the root svg element has a viewBox.
• Check that the visible artwork is made of path and shape elements rather than image elements.
• Search for long base64 strings, which usually signal embedded raster data.
• Look for text elements and note which fonts they reference.
• Notice editor-specific namespaced attributes or metadata that some design applications add. These are usually harmless but add size, and stripping them can also remove useful editing information such as layer names.
• Look for script elements or event-handler attributes. A logo does not need them, and many platforms sanitize or reject SVGs that contain them.
• Confirm the file is well-formed XML, for example by opening it in a browser or running it through a validator.

What an edit-friendly structure looks like

For handoff, a well-prepared logo SVG generally has a clear viewBox that fits the artwork without unexplained empty space. Its parts are grouped logically with meaningful ids, its styling method is consistent, and it contains no hidden, empty or off-canvas leftovers from the design process. Whether lettering stays live or is outlined should be a deliberate choice that matches the recipient's needs. These are editorial recommendations, not requirements of the SVG format.

File access is not usage permission

Being able to download or open a logo's SVG does not grant the right to modify the artwork or use it freely. The trademark, the artwork itself and any fonts it relies on are governed by their own terms, independent of how the file is structured.

Limits of this overview

No evidence about a specific logo, tool or exporter was supplied. This article therefore describes general SVG and XML principles only. Exact output, such as how styles are written, how precise the numbers are and what metadata is included, varies by application, version and export settings. Inspect the files you actually receive rather than assuming a particular structure.