Back to Community
Home / Community / Plugin → Svg support

How to Change SVG Colors with CSS Using SVG Support

22 threads Sep 9, 2025 Plugin → Svg support

Content

One of the most common questions users have about the SVG Support plugin is how to change the color of their SVG graphics using CSS. Many expect to use a simple fill: red; rule and see an immediate change, but this often doesn't work as expected. This guide explains why this happens and provides the most effective solutions.

Why Your CSS Fill Color Isn't Working

Based on community support threads, the primary reason CSS color changes fail is that the SVG is not being rendered inline. By default, when you upload an SVG to WordPress, it's treated like any other image and placed inside an <img> tag. The internal code of the SVG is hidden, making its individual elements (like <path> or <circle>) inaccessible to your site's CSS.

The SVG Support plugin's key feature is its ability to 'inline' SVGs, exposing their internal structure so you can style them directly.

Solution 1: Enable Inline Rendering (The Essential First Step)

To style internal SVG elements, you must first ensure the plugin is set to render your graphic inline. There are two main ways to do this:

  1. Add a Class Manually: When inserting an SVG into a post or page, add the class style-svg to the image tag. 
    <img src="your-image.svg" class="style-svg" alt="Description" />
  2. Use the 'Force Inline SVG' Setting (Use with Caution): In the SVG Support settings panel (found under Settings > SVG Support), you can enable the option to Force Inline SVG. This will attempt to inline all SVGs on the site automatically. A common community-reported issue is that this can sometimes conflict with other plugins or themes, so it's often better to add the class manually for more control.

After inlining, if you view your page's source code, you will see the full SVG XML code instead of just an <img> tag. This means it's ready to be styled.

Solution 2: Write Effective CSS Rules

Once your SVG is inlined, you can target its elements. The most common property to change colors is fill. You need to write specific CSS rules.

Target the Entire SVG:
You can apply a color to all elements within the SVG. 

.style-svg {
    fill: #606060;
}

Target Specific Elements Inside the SVG:
For more control, target specific elements by their tag name or, ideally, by a class you add to the SVG's code before uploading it. 

/* Target all paths in a specific SVG */
#your-svg-unique-id path {
    fill: blue;
}

/* Target all circles */
#your-svg-unique-id circle {
    fill: green;
}

/* Target a specific class within the SVG */
.icon-path {
    fill: red;
}

Create Hover Effects:
With the SVG inlined, creating hover effects becomes straightforward. 

/* Change color on hover */
.style-svg:hover {
    fill: #ff0000;
}

/* Or target internal elements on hover */
#your-svg-unique-id:hover path {
    fill: #ff0000;
}

Solution 3: Prepare Your SVG File Correctly

Often, the problem isn't the CSS but the SVG file itself. If the SVG was created in a design tool like Illustrator or Inkscape, internal styles might be hardcoded, overriding your CSS.

  • Simplify the Code: Before uploading, open the SVG file in a code editor. Look for inline fill="#colorcode" attributes on elements and remove them. This allows your CSS to take precedence.
  • Use 'Undefined' Fill in Inkscape: A user reported that in Inkscape, you must set the 'Fill and Stroke' section to 'Paint is undefined' (click the question mark icon) for the CSS fill property to work correctly.
  • Add Your Own Classes: For the most robust and reusable solution, add class names directly to the elements inside your SVG file before uploading it. For example, change <path d="..." /> to <path class="icon-main" d="..." />. You can then target .icon-main in your CSS.

Solution 4: Troubleshoot Lazy Loading Conflicts

A frequently reported issue in the community is that browser-level or WordPress-level lazy loading can prevent the SVG from being inlined properly. The SVG Support team suggests adding the loading="eager" attribute to your <img> tag to ensure it loads immediately, allowing the plugin to process it.

<img src="your-image.svg" class="style-svg" loading="eager" alt="Description" />

Conclusion

Changing SVG colors with CSS using the SVG Support plugin is a powerful feature, but it requires the SVG to be inlined first. The most reliable workflow is to:

  1. Clean and prepare your SVG file by removing hardcoded colors and adding classes.
  2. Insert it into WordPress using the style-svg class.
  3. Write specific CSS rules to target the elements you want to style.

By following these steps, you should be able to dynamically control the appearance of your SVGs directly from your stylesheet.

Related Support Threads Support