FAQ & troubleshooting

The most common issue of all: set explicit dimensions in your CSS. Inlined SVGs in particular usually need a width and/or height set on the SVG (or its container) to display correctly.

Make sure Advanced Mode is enabled in Settings → SVG Support, and that the style-svg class (or your custom class) is on the img tag or a parent container. See the inline rendering tutorial.

Disable Advanced Mode in the settings. The front-end JS only exists to do inline swapping, so with Advanced Mode off, no JS is loaded.

Open your SVG in a code editor and add CSS classes to each element you want to target. Make sure the img tag is being swapped for your inline SVG, then use CSS or JS to animate those elements. Full walkthrough in the styling & animation tutorial.

To allow SVG to work in the Customizer, your (child) theme needs flexible logo dimensions in its functions.php. The important part:

add_theme_support( 'custom-logo', array(
  'flex-width'  => true,
  'flex-height' => true,
) );

Make sure you can add your own class to the image in the builder. The easiest way is to place your image code in a simple text/code block. If the builder won't let you set a class at all, enable Force Inline SVG in the settings to render all SVG files inline.

If your multisite was installed prior to WordPress 3.5, you may need to remove the legacy ms-files.php handling. Search for “dumping ms-files” for guides on removing it after upgrading.

Add the mime types for svg and svgz under MLA Settings → Media Library Assistant → Uploads (tab), and then it works.