SVG not showing? The causes and the fix for each

An SVG that does not show on a web page usually has one of four faults. The file lacks the xmlns attribute, the address or the server’s file type is wrong, the image has been given no size, or the shapes are drawn but cannot be seen. The first two stop the file loading at all. The last two leave an empty space with a working file behind it.

Find out which kind of fault it is

Type the address of the .svg file itself into the browser’s address bar, or drag the file into a browser window.

What the browser shows	What it means
The picture	The file is good. The fault is in the HTML or CSS: size, path or colour
The code as a tree of text, or an error naming a line	The file is at fault: no xmlns, or broken XML
“Not found”	The address is wrong
The code as plain text, or a download	The server is sending the wrong file type

The SVG viewer makes the same test without a server. It says whether the code is valid, whether xmlns is missing, what size the file claims and whether it has a viewBox.

1. The file has no xmlns

A standalone .svg file must declare the SVG namespace on its root element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 2 22h20z"/>
</svg>

Without xmlns="http://www.w3.org/2000/svg", the browser reads the file as XML of an unknown kind and draws nothing. In an <img> this gives a broken image, and in a CSS background an empty space.

The usual way to get such a file is to copy <svg> markup out of a web page and save it. Inline SVG in HTML does not need the attribute, so code that works in a page fails as a file.

2. The path is wrong

Open the browser’s developer tools, reload, and look at the Network tab for the .svg request. A 404 means the address does not lead to the file.

• A relative path in HTML starts from the page’s folder. In a stylesheet it starts from the stylesheet’s folder.
• Many web servers treat capitals as different letters: Logo.svg and logo.svg are two files. A page can work on a Windows or Mac computer, where they are often treated as one, and break once uploaded.

3. The server sends the wrong file type

A browser only draws an SVG in an <img> or a background if the server labels it image/svg+xml. A server that does not know the .svg ending may send it as plain text or as a download, and the image stays empty. In the Network tab, select the request and read the Content-Type response header.

The fix is in the server’s settings. On Apache, this line in the configuration or in an .htaccess file adds the type:

AddType image/svg+xml .svg

Other servers have an equivalent table of file types. This fault only appears on a server: a file opened from a folder on the same computer is recognised by its ending.

4. The SVG has no size

If the element is on the page but takes up no room, there is nothing to see. Right-click where the image should be, choose Inspect, and look at the size the tools report for the element.

• A CSS background does not give its element any size. An empty <div> with a background is zero pixels tall. Give it a height, a min-height, padding or content.
• An SVG with a viewBox but no width or height has proportions but no size of its own. It normally fills the width on offer. In a box that shrinks to fit its contents, such as a flex item, a float or an inline-block, there may be no width to fill, and the image can collapse to nothing. Set a width in CSS.
• An SVG with none of the three is given the browser’s fallback size of 300 by 150 pixels, and the drawing may be cropped by that window or sit small in one corner of it. Add a viewBox that covers the artwork, then set a width. SVG viewBox explained shows how to work out the four numbers.

5. It is drawn, but cannot be seen

The element has a size and the file loads, yet the space is blank.

Cause	How to tell	Fix
The shapes are the colour of the page	White shapes on white, or black shapes on a dark theme. The viewer’s dark background shows them	Change the fill, or use currentColor in an inline SVG
fill="none" with no stroke	Lines and outlines need a stroke to show	Add stroke and stroke-width
The shapes lie outside the viewBox	Coordinates in the code are far larger than the viewBox, or negative	Correct the viewBox to cover the artwork
A gradient or pattern is not found	The fill refers to url(#name) and no element has that id	Make the names match. Ids must be unique in a page
opacity="0", display: none or visibility: hidden	Inspect the element’s styles	Remove the rule

SVG fill and stroke explains the defaults that cause the second row.

6. The XML is broken

A .svg file is XML, which forgives nothing. One unclosed tag, a bare & (it must be written &), or stray text before the opening tag, and the whole file fails as an image. Opening the file directly in a browser names the line and the fault.

Inline SVG in HTML is read by the more forgiving HTML parser, with one trap. A shape written without its closing slash, <path d="..."> in place of <path d="..."/>, swallows the elements after it as its children, and children of a shape are not drawn. If everything after a certain shape is missing, look at how that shape is closed.

An SVG that will not display in an img tag

Everything above applies. Two further limits belong to <img> alone, and to CSS backgrounds:

• The file cannot load other files. A linked picture, a web font, an outside stylesheet or a <use> pointing at another file is not fetched. The parts that depend on them are missing or fall back to a default font. Embed pictures in the file and convert text to paths.
• Page CSS and scripts do not reach inside. A file whose shapes rely on a class defined in the page’s stylesheet shows unstyled, which usually means black. SVG in HTML compares what each way of placing an SVG allows.

An SVG made with JavaScript

Elements created with document.createElement('svg') or createElement('path') are never drawn, because they are made as unknown HTML elements. SVG elements must be created in the SVG namespace:

const svgNS = 'http://www.w3.org/2000/svg';
const circle = document.createElementNS(svgNS, 'circle');

A background image SVG that does not show

The causes, commonest first: the element has no height, the path is taken from the stylesheet’s folder and not the page’s, the file lacks xmlns, or a data URI has an unescaped #. SVG as a CSS background image covers each, with the rules for writing a data URI.

Is it the browser?

Rarely. Chrome, Edge, Firefox and Safari all draw SVG, and the causes above are the same in each. When a file shows in one browser and not in another, check first for a missing width, height or viewBox, where browsers have differed in how they size the image, and for a cached copy of an older file.

Questions

Why does it show on my computer and not on the server? The file type (cause 3) or capitals in the file name (cause 2).

Why does an SVG not show in an email? Many email programs do not draw SVG at all. Send a PNG: SVG to PNG converts one at any size.

A website will not let me upload an SVG. Why? An SVG can carry a script, so many sites and content systems refuse SVG uploads unless an administrator allows them. That is a rule of the site, not a fault in the file.