logoredraws.com

Styling SVG with CSS: What Works for Vector Logos and What Doesn't

How CSS styles SVG logos: which embedding methods allow restyling, how fill, stroke and currentColor work, why export settings matter, and where CSS cannot reach.

Published

Contents
  1. The short answer
  2. Embedding method decides whether CSS can reach the logo
  3. The core properties
  4. Why export settings matter
  5. Where CSS cannot help
  6. Styles that travel inside the file
  7. Technical ability is not permission
  8. Practical takeaway

The short answer

CSS can style SVG because SVG shapes are elements in a document, and properties such as fill, stroke, stroke-width and opacity apply to them. For a vector logo, this means a single SVG file can be recolored, resized or animated in a browser without editing the artwork in a design tool. Whether page CSS can reach the logo depends on how the SVG is placed on the page and how the file was exported. CSS can only restyle real vector shapes. It cannot recolor a raster image embedded inside an SVG.

Evidence note: the source material for this article contained no subject-specific data, such as a particular logo, tool version or browser support figures. What follows is based on general, documented SVG and CSS behavior. Check current browser support before you rely on newer features.

The biggest practical factor is how the SVG gets onto the page. An SVG loaded as an image is treated as a separate, isolated document, so the page's stylesheet cannot select its shapes.

Embedding method | Can the page's CSS style shapes inside? | Typical use
Inline <svg> in the HTML | Yes, shapes can be selected like other elements | Logos that change color on hover, themes or dark mode
<img src="logo.svg"> | No, only the image box can be sized or positioned | Static logo display, simple delivery
CSS background-image | No | Decorative placement
<object> or <iframe> | No, the page's CSS does not cross into the embedded document | Rarely needed for logos
Styles inside the SVG file | Yes, but only from within the file | Self-contained files whose styling travels with them

If a logo must change color in response to the page, such as a hover state, a dark theme or a brand color variable, it generally needs to be inline. If it only needs to display correctly, an <img> reference is simpler and keeps the markup clean.

The core properties

SVG shapes use their own paint properties instead of color and background-color. fill paints the interior of a shape. stroke paints its outline, and stroke-width sets the outline's thickness. Width and height can be set with CSS, but the artwork scales cleanly only if the SVG has a viewBox attribute that defines its coordinate system.

.site-logo {
  width: 160px;
  height: auto;
}

.site-logo .mark {
  fill: #1a4d8f;
}

.site-logo .outline {
  stroke: #1a4d8f;
  stroke-width: 2;
  fill: none;
}

For single-color logos, currentColor is often the most useful value. It makes the shapes take on the CSS color of their parent, so the logo follows the surrounding text color automatically.

<a class="brand" href="/">
  <svg viewBox="0 0 120 40" aria-hidden="true">
    <path fill="currentColor" d="..." />
  </svg>
  Company Name
</a>

.brand { color: #222; }
.brand:hover { color: #1a4d8f; }

For multi-color logos, CSS custom properties let one stylesheet control several colors, for example fill: var(--logo-primary). This approach also works for artwork reused through <use>, provided the referenced shapes inherit their fill instead of setting it themselves.

Why export settings matter

Design tools can write styling into an exported SVG in different ways, and the choice affects how easily CSS can override it. Adobe Illustrator's SVG export, for example, offers internal CSS, inline style and presentation attributes as styling options.

  • Presentation attributes, such as fill="#1a4d8f" on a path, are the easiest to override. Any CSS rule that targets the element takes precedence over them.
  • Inline style attributes, such as style="fill:#1a4d8f", override normal stylesheet rules. Changing them from outside requires !important or editing the file.
  • Internal CSS, a <style> block with generated class names, keeps the file tidy. However, generic names such as .cls-1 can collide when several inline SVGs share a page, which causes one logo's colors to affect another.

For a logo that will be restyled on the web, a common editorial recommendation is to export with presentation attributes or with meaningful, unique class names, and to remove fixed colors from any shape that should inherit its color.

Where CSS cannot help

  • Embedded raster images: an SVG can contain a PNG or JPEG through an <image> element. fill and stroke have no effect on it. CSS filters can shift its appearance, but that is not a true recolor of vector artwork.
  • Raster previews saved as .svg: a .svg extension alone does not prove the file contains editable paths. To confirm, open the file and check for path, rect, circle or polygon elements rather than a single embedded image.
  • Live text: logo lettering kept as SVG text depends on the font being available where the file is shown. Converting the text to outlines removes that dependency but also makes the text no longer editable as text.
  • Isolated embeds: logos placed through <img> or background-image stay outside the page's CSS. The only way to change their colors is to edit the file or switch to inline SVG.

Styles that travel inside the file

A <style> block inside the SVG file still works when the file is loaded as an image. This lets a logo carry its own rules, including media queries. Inside an SVG, width-based media queries respond to the size of the SVG's own viewport, not the browser window. This allows a logo to switch to a simplified mark at small sizes. Some browsers also honor prefers-color-scheme inside SVG files, which is used for dark-mode favicons, but support varies, so test it in your target browsers.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
  <style>
    .mark { fill: #1a4d8f; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #ffffff; }
    }
  </style>
  <path class="mark" d="..." />
</svg>

Technical ability is not permission

Being able to recolor or reshape a logo with CSS does not mean you are allowed to. Permission to download a logo file is separate from permission to modify the artwork, use its fonts or alter a trademark. Brand guidelines often specify approved colors and variants. For a logo you do not own, check the owner's usage terms before changing its appearance.

Practical takeaway

To style an SVG logo with CSS, place it inline, or use internal styles if the rules should travel with the file. Make sure the logo is built from real vector shapes with a viewBox, and export it so colors are easy to override, ideally with presentation attributes or unique class names. Use currentColor for single-color marks and custom properties for multi-color ones. If the logo is referenced through <img>, contains embedded raster images or is only a raster preview with an .svg extension, CSS restyling will not work as expected.