How to Style Inline SVG with External CSS

Styling inline SVG elements using external CSS stylesheets is a seamless process because inline SVGs are directly injected into the Document Object Model (DOM). This direct integration allows standard CSS rules, classes, and IDs from external .css files to target and style the SVG’s internal elements—such as paths, circles, and polygons—just like ordinary HTML tags.

Linking the External Stylesheet

To apply an external stylesheet to your inline SVG, link the CSS file inside the <head> section of your HTML document using the standard <link> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>SVG Styling</title>
</head>
<body>
    <svg class="custom-icon" viewBox="0 0 24 24">
        <circle class="icon-circle" cx="12" cy="12" r="10" />
        <path class="icon-shape" d="M8 12l2 2 4-4" />
    </svg>
</body>
</html>

Targeting SVG Elements with CSS

Unlike standard HTML elements that use properties like background-color and border, SVG graphics rely on specific presentation attributes. You can target the SVG and its child nodes directly using classes, IDs, or element selectors in your external stylesheet:

/* Target the SVG wrapper */
.custom-icon {
    width: 48px;
    height: 48px;
    transition: transform 0.3s ease;
}

/* Style the background circle */
.icon-circle {
    fill: #e0f2fe;
    stroke: #0284c7;
    stroke-width: 2px;
}

/* Style the inner path */
.icon-shape {
    fill: none;
    stroke: #0369a1;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

Essential SVG CSS Properties

When writing external rules for SVG elements, use these core properties:

fill: Sets the interior color of shapes, text, or paths.
stroke: Sets the color of the outline or line path.
stroke-width: Controls the thickness of the outline.
stroke-dasharray and stroke-dashoffset: Used for creating dashed lines and path-drawing animations.
opacity / fill-opacity / stroke-opacity: Defines transparency levels.

Handling Specificity and Presentation Attributes

If an inline SVG element contains hardcoded presentation attributes (such as fill="black" directly on a <path>), the external CSS rules will usually override them. However, if the inline SVG uses an inline style attribute (such as style="fill: black;"), the external stylesheet cannot override it without higher specificity or the !important rule:

/* Overriding inline style attributes */
.icon-shape {
    fill: #10b981 !important;
}

For the cleanest implementation, remove all presentation attributes (fill, stroke) and inline style declarations from the SVG markup, allowing the external stylesheet to manage all visual styling.

Creating Interactive States and Animations

Because the SVG paths reside in the DOM, you can apply pseudo-classes like :hover, :focus, or CSS keyframe animations directly from the external stylesheet:

.custom-icon:hover {
    transform: scale(1.1);
}

.custom-icon:hover .icon-circle {
    fill: #0284c7;
}

.custom-icon:hover .icon-shape {
    stroke: #ffffff;
}

Using CSS Custom Properties (Variables)

External stylesheets can also pass CSS variables into inline SVGs for flexible theming:

:root {
    --brand-color: #6366f1;
}

.custom-icon {
    fill: var(--brand-color);
}