logoredraws.com

Use an SVG logo in CSS

How to place an SVG logo with CSS: background images, encoded inline data, masks for single-color recoloring, and inline SVG, plus the file checks that decide which method works.

Published

Contents
  1. What "SVG to CSS" usually means
  2. The main methods compared
  3. Background image: the simplest route
  4. Data URI: embedding the markup in the stylesheet
  5. CSS mask: letting CSS choose a single color
  6. Inline SVG: full styling control
  7. Check the file before choosing a method
  8. Accessibility
  9. Permission to restyle a logo
  10. Which method to use

An SVG logo can be used in CSS in several ways. You can reference the file as a background image, embed it as an encoded data string, use it as a mask so CSS supplies the color, or place the SVG markup directly in the HTML and style its shapes. None of these converts the logo into CSS. The stylesheet points at, or wraps, the vector file. Which method fits depends on one question: do you only need the logo displayed, or do you need CSS to change its colors or parts?

What "SVG to CSS" usually means

Searches for turning an SVG into CSS usually come from one of two goals. The common one is getting a logo file to appear through a stylesheet, for example in a header background or a pseudo-element. The less common one is recreating the shapes with pure CSS properties. That can be done for very simple marks, but there is no general, faithful conversion for real logo artwork with curves, compound paths and multiple colors. For production use, keep the SVG as the source and choose how CSS delivers it.

The main methods compared

Method | How it works | Can CSS restyle the logo's colors? | Best suited to
Background image | The stylesheet references the SVG file with url() | No; the file renders as a closed image | Decorative or fixed-color logos in layout elements
Data URI | The SVG markup is encoded into the url() value itself | No, unless you edit the encoded markup | Small marks where avoiding a separate file request matters
CSS mask | The SVG's shape defines where a background color shows | Yes, but only as one flat color | Single-color logos that must follow a theme or hover state
Inline SVG | The SVG markup sits in the HTML; CSS targets its elements | Yes, per shape, including currentColor and custom properties | Multicolor theming, dark mode variants, animation

Background image: the simplest route

Referencing the file as a background works like any other image. The element needs its own dimensions, because a background does not size its container. Use background-size: contain to scale the logo without cropping.

.site-logo {
  width: 160px;
  height: 48px;
  background: url("logo.svg") no-repeat center / contain;
}

The limitation is that the SVG behaves as a sealed image. Selectors in your page stylesheet cannot reach the paths inside it, so you cannot recolor individual parts. Browsers also generally prevent an SVG loaded as an image from fetching external resources. If the logo depends on a linked font or a linked image, that dependency will not load in this context.

Data URI: embedding the markup in the stylesheet

Instead of a file path, the url() value can hold the SVG markup itself, using the image/svg+xml data type. This removes a separate request and keeps a small icon bundled with its styles. Some characters, such as the hash sign used in hex colors, must be percent-encoded. The SVG namespace declaration must also be present, because the markup is parsed as a standalone document. Base64 encoding also works, but it typically produces a longer string than URL-encoding readable SVG text. As with a background file, the result is not restylable from outside. To change a color, you edit the encoded markup.

CSS mask: letting CSS choose a single color

Using the SVG as a mask turns the logo into a stencil. The element's background color shows through wherever the logo has shape. This lets a stylesheet recolor a logo for themes or hover states without inline markup.

.site-logo {
  width: 160px;
  height: 48px;
  background-color: currentColor;
  -webkit-mask: url("logo.svg") no-repeat center / contain;
  mask: url("logo.svg") no-repeat center / contain;
}

The trade-off is that every colored area becomes the same color. A multicolor logo loses its internal distinctions. This method is only appropriate when the brand has an approved one-color version. The prefixed property is included because some browsers have historically needed it.

Inline SVG: full styling control

When the SVG markup is placed directly in the HTML, its paths and groups become part of the page. CSS can then target them like other elements. Setting fills to currentColor makes the logo inherit the surrounding text color. Custom properties let separate parts of a multicolor logo switch values for dark mode or other themes.

.site-logo .mark { fill: var(--logo-primary, currentColor); }
.site-logo .wordmark { fill: var(--logo-secondary, currentColor); }

.dark .site-logo { --logo-primary: #ffffff; --logo-secondary: #cccccc; }

This only works if the file's internal structure supports it. Shapes need classes or a sensible grouping, and hard-coded fill attributes or embedded style blocks may need to be removed so your stylesheet can take effect. Inline markup is also repeated in every page that uses it, which is a caching consideration for large logos.

Check the file before choosing a method

A .svg extension does not guarantee editable vector artwork. Opening the file in a text editor or vector application shows what it actually contains.

  • Look for path, circle, polygon or similar shape elements. These are the true vector shapes that scale cleanly and can be styled.
  • Look for an image element, often carrying a long base64 string. This means a raster picture is embedded inside the SVG wrapper. It will not scale crisply, and CSS cannot recolor it beyond what a mask silhouette allows.
  • Confirm a viewBox attribute is present. Without one, the logo may not scale to the box CSS gives it.
  • Check whether text is live text or converted to outlines. Live text depends on a font that may be unavailable, particularly when the SVG is used as a background or mask image.
  • Note any fixed fill, stroke or style declarations. They determine how much an inline stylesheet can override.

Accessibility

Background images and masks are invisible to screen readers. If the logo identifies the site or links home, it is content, not decoration. In that case, provide a text alternative, such as visually hidden text inside the element or an accessible label. Inline SVG can carry a title element and an appropriate role. A plain img element with alt text remains a reasonable choice when no CSS restyling is needed.

Recoloring a logo through a mask or inline styles changes the artwork. Being able to download a logo file does not by itself grant the right to modify it. It also does not grant the right to use its fonts or trademark in a given context. For a third-party brand, check the owner's usage guidelines for approved color variants before applying CSS recoloring. For your own logo, the brand guidelines should specify which one-color and reversed versions are acceptable.

Which method to use

Use a background image or img element when the logo only needs to appear in its original colors. Use a mask when an approved single-color version must follow a theme. Use inline SVG when separate parts need to change color, respond to dark mode or animate. In every case, confirm first that the file contains real vector shapes rather than an embedded raster image.

Evidence gap: no specific logo, file or browser-support data was supplied for this article. The guidance reflects general, documented SVG and CSS behavior. Exact browser support for mask properties should be verified against current compatibility references for the browsers you target.