SVG markup, namespaces and attributes

SVG markup is the XML text that describes a vector graphic. It has a root svg element and a namespace declaration that tells software the elements belong to the SVG vocabulary. Inside the root are child elements such as path, rect, circle and g, which define shapes and groups. Attributes on those elements set geometry, the coordinate system and appearance. For an SVG favicon, the markup is the file itself: a short text document that the browser draws at whatever size the tab, bookmark or shortcut needs.

What SVG markup is made of

Because SVG is XML, it follows XML rules. Elements must be properly nested and closed, attribute values must be quoted, and names are case-sensitive. A favicon file usually needs only a few building blocks.

• svg: the root element. It carries the namespace declaration and the viewBox that defines the drawing's coordinate system.
• path: the most common shape element. Its d attribute holds the drawing commands that trace outlines, and most logo artwork exported from design tools ends up here.
• rect, circle, ellipse, line, polygon, polyline: basic shapes whose geometry is defined by attributes such as x, y, width, height, cx, cy, r and points.
• g: a group that applies shared attributes or transforms to its children.
• defs, linearGradient, radialGradient, clipPath, mask, symbol, use: reusable definitions and references, used for gradients, clipping and repeated shapes.
• style: an embedded stylesheet, useful in favicons for colour rules and media queries.
• text: live text that depends on font availability, which is usually a poor fit for a favicon.
• image: an element that embeds or references a raster or other image. It does not create vector artwork.

The SVG namespace and why it matters

The namespace is declared with an xmlns attribute on the root svg element. Its value is a fixed identifier defined in the W3C SVG specification. It tells an XML parser which vocabulary the elements belong to. It is an identifier, not a resource the browser downloads, so it must match the specification exactly, character for character. This article does not reproduce that identifier. Copy it from the specification or from a file exported by a reliable vector tool. The snippets below use the placeholder SVG_NAMESPACE_URI where it belongs.

Where the markup lives decides whether the declaration is required. In a standalone .svg file, which is what a favicon is, the declaration is needed. Without it, an XML parser treats the content as generic XML rather than SVG, and the file may show as raw markup or fail to render. When SVG is written inline inside an HTML document, the HTML parser assigns the SVG namespace automatically, so inline code often omits xmlns. Markup copied from an inline snippet into a separate favicon file therefore needs the declaration added.

Two other kinds of namespace often appear in exported files. The first is the xlink namespace, declared as xmlns:xlink and used by the older xlink:href form of references in use and image elements. SVG 2 allows a plain href attribute. Older software may still expect xlink:href, so keeping both the declaration and the prefixed attribute is the cautious choice when a file must work across older tools. The second kind is editor-specific namespaces from applications such as Inkscape or Illustrator. These store layer names, guides and other editing metadata. Browsers generally ignore them when rendering, but they add weight to the file. Optimisation tools often strip them, and doing so can also remove information that is useful when the artwork is reopened for editing. Keep an unoptimised master file alongside the lean favicon.

Attributes that set the coordinate system

The viewBox attribute takes four numbers: min-x, min-y, width and height. They define the internal coordinate space the artwork is drawn in. The width and height attributes on the root element set an intrinsic display size. preserveAspectRatio controls how the viewBox is fitted when the display area has different proportions. For a favicon, a square viewBox does most of the work, because it lets the browser scale the drawing to any icon size without distortion. Fixed width and height values are less important, since the browser sizes the favicon itself. Artwork that touches or crosses the viewBox edges can look cropped at small sizes, so deliberate padding inside the viewBox is a design decision worth making early.

SVG properties: attributes compared with CSS

Many visual SVG properties can be set in two ways: as presentation attributes written directly on an element, or as CSS properties in a style element or style attribute. The difference matters when a favicon needs to change colour. A presentation attribute such as fill sits at the bottom of the cascade, so any matching CSS rule overrides it. An inline style attribute overrides stylesheet rules unless those rules use !important. Geometry has traditionally been attribute-only. SVG 2 redefines some geometry attributes, such as cx, cy, r and the rect's x, y, width and height, as CSS properties, but support for setting them through CSS varies between software. Keeping geometry in attributes is the safer default.

Name | What it controls | Usually set as

d | Outline drawing commands for a path | Attribute

viewBox | Internal coordinate system of the root svg | Attribute

x, y, width, height, cx, cy, r, points | Position and size of basic shapes | Attribute (some also CSS in SVG 2, with uneven support)

fill, stroke, stroke-width | Paint and outline appearance | Presentation attribute or CSS property

fill-rule, clip-rule | How overlapping or self-intersecting areas are filled or clipped | Presentation attribute or CSS property

opacity, fill-opacity, stroke-opacity | Transparency | Presentation attribute or CSS property

transform | Translation, rotation, scaling and skewing | Attribute (also a CSS property in newer specifications)

id, class | Identification for references and styling | Attribute

Putting it together in an SVG favicon

A common favicon technique keeps the shape geometry in attributes and moves colour into an embedded style element. A media query then swaps the colour when the user's system prefers a dark appearance. The example below shows the structure. Replace the placeholder with the official SVG namespace identifier before use.

<svg xmlns="SVG_NAMESPACE_URI" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

The HTML page references the file with a link element. Its rel attribute is set to icon and its type attribute to image/svg+xml, which tells the browser it is an SVG favicon.

<link rel="icon" type="image/svg+xml" href="PATH_TO_FAVICON_SVG">

Browsers load a favicon as an image, and that limits what the markup can do. Scripts do not run, and external resources such as linked stylesheets, web fonts or referenced images are not fetched. Everything the icon needs must therefore live inside the file. In particular, text should be converted to outlined paths rather than left as live text elements. Support for SVG favicons, and for media queries inside them, differs across browsers and versions. No compatibility data was supplied for this article. The usual mitigation is to keep raster fallbacks, such as an ICO or PNG favicon and a PNG touch icon for home-screen shortcuts, and to check current compatibility references before relying on SVG alone.

Checking whether an SVG file contains real vector artwork

A .svg extension does not prove that the file holds editable vector paths. SVG can wrap a raster image, so the markup itself has to be inspected. Opening the file in a plain text editor answers most questions quickly.

• Vector artwork: the logo is drawn with path or basic shape elements, with geometry in attributes such as d, points or r.
• Embedded raster: an image element whose reference contains a long block of encoded data, often marked as base64 PNG or JPEG. The file is SVG in name only, it will not scale cleanly, and it cannot be edited as paths.
• Linked raster: an image element that points to a separate file. As a favicon, the linked file will not load at all.
• Raster preview: some editors save a bitmap thumbnail or metadata alongside the vector content. That thumbnail is not the artwork itself.
• Hidden content: clip paths and masks can conceal an embedded raster beneath vector-looking edges, so check what is being clipped.
• Live text: text elements render with whatever font is available, so the letterforms may change unless they are converted to outlines.

Permission is a separate question

Being able to download a logo file or read its markup does not grant the right to modify the artwork, alter or extract its fonts, or use the trademark in a new context. Treat editing or repurposing someone else's SVG logo, including turning it into a favicon, as a licensing and trademark matter to confirm with the owner or the brand guidelines, not as a technical question.

Evidence gaps

This overview relies on general principles of the SVG and XML specifications. No subject-specific evidence was supplied, so it contains no browser compatibility tables, file-size measurements, or behaviour notes for particular design tools or optimisers. Confirm those details against current documentation for the browsers and software in use.