Inline rendering

Normally an SVG placed with an img, embed, or object tag is a sealed box — you can't style anything inside it. Inline rendering is SVG Support's signature feature: it dynamically replaces your img tag with the SVG's actual code, making every element inside it targetable with CSS and JS.

1. Enable Advanced Mode

Go to Settings → SVG Support and check Enable Advanced Mode. This turns on inline rendering (and adds a small JS file to your front end that does the swapping).

2. Add the class to your image

Embed your SVG like any standard image, and add the class style-svg to any img tag you want swapped out for the real SVG code:

<img class="style-svg" alt="alt-text" src="image-source.svg" />

Or with your own custom class (configurable in settings):

<img class="your-custom-class" alt="alt-text" src="image-source.svg" />

The whole img element is dynamically replaced by the actual code of your SVG, so the inner content becomes targetable with CSS.

In the Block Editor

• Image block: select the block, open the sidebar → Advanced → Additional CSS class(es), and add style-svg.
• Cover block: add style-svg the same way to render SVG backgrounds inline. Use the Skip Nested SVGs setting to control what happens to SVG images nested inside the Cover block.

In the Classic Editor

Add the class directly to the img tag in the Text view, or enable Automatically Insert Class in the settings — then the correct class is inserted for you (and default WordPress classes stripped) whenever you embed an SVG.

Container targeting

You can also put the class on any container element. The script traverses all children of the target element, finds img tags with .svg in the src, and replaces each one:

<div class="style-svg">
  <img src="icon-one.svg" alt="" />
  <img src="icon-two.svg" alt="" />
</div>

Page builders: Force Inline SVG

Some theme options and page-builder modules don't let you add a class to the image. For those cases, enable Force Inline SVG in the settings — it automatically inlines all SVG images found in the rendered page. Use with intention; targeting classes is the cleaner approach when available.