Use SVG as an Image Source

Yes, you can point an image tag at an SVG file the same way you would a PNG or JPEG, and modern browsers will display it. For a vector logo this is often the simplest delivery option: one small file that stays sharp at any size. The catch is that the browser treats the SVG as a sealed, self-contained picture. That affects styling, fonts, interactivity and whether the logo actually scales cleanly.

The basic markup

<img src="logo.svg" alt="Company name" width="160" height="40">

The alt text should name the brand or organization the logo represents, not describe its shapes. The width and height attributes reserve space while the page loads. They also set the display size, which you can override with CSS. For the artwork to scale in proportion, the SVG file itself should include a viewBox attribute on its root element. Without one, resizing can crop the logo or leave unexpected empty space.

What changes when an SVG is loaded as an image

• Scripts inside the SVG do not run, and links or interactive elements inside it do not respond.
• The page's stylesheet cannot reach inside the file, so you cannot recolor individual paths with CSS. The colors baked into the file are what display.
• External resources the SVG references are generally not loaded. This includes web fonts, linked images and separate stylesheets. The file needs to work on its own.
• Any text set in a font that is not available falls back to a different font, which can visibly change a wordmark.

Check that the file is genuinely vector

A .svg extension does not guarantee editable vector paths. An SVG can simply wrap a raster image, often a PNG or JPEG embedded as encoded data inside an image element. A file like that blurs or pixelates when enlarged, just like the original bitmap. Open the file in a text editor or vector application to check its contents. Shape elements such as path, polygon, rect or circle indicate vector artwork. A single large image element indicates embedded raster content. Also, the thumbnail a file browser or download page shows is only a raster preview of the file, so it cannot tell you how the logo was built.

Preparing a logo SVG for image-tag use

• Convert live text to outlines so the wordmark does not depend on fonts the browser cannot load.
• Keep the viewBox. Consider removing fixed width and height on the root element if you want the page to control sizing entirely.
• Put styles inside the file, as attributes or an internal style block, rather than linking an external stylesheet.
• Make sure the server delivers the file with the image/svg+xml content type. Some browsers will not display an SVG served with the wrong type.
• Treat SVGs from unknown sources with care. Scripts are blocked in image-tag mode, but a malicious file opened directly can still execute them, so sanitize user-uploaded SVGs.

When a different method fits better

Method | What it allows | Trade-off

Image tag | Simple markup, separate caching, alt text | No internal styling, scripts or external resources

CSS background image | Decorative placement controlled from the stylesheet | No alt text, so it is unsuitable when the logo identifies the brand

Inline SVG in the page markup | Recoloring parts with CSS (for example via currentColor), animation, accessible title element | Adds markup to every page and is not cached as a separate file

Object or embed element | Scripts and interactivity inside the SVG | More complex markup and more security exposure

For a static logo in a header or footer, the image tag is usually enough. Choose inline SVG when the logo must change color with a theme or respond to hover states.

Technical use is not the same as permission

Being able to download a logo SVG does not mean you may modify it, recolor it or display it in any context. The artwork, any fonts it was built from, and the trademark itself can each carry separate terms. Check the owner's brand guidelines or license before altering or publishing a logo you did not create.

Limits of this guidance

No specific logo file, browser test results or support data were supplied for this article. The points above are general, documented behaviors of SVG used as an image rather than measured results. Confirm how your particular file renders in the browsers your audience uses.