Back to Community
Home / Community / Plugin → Safe svg

Troubleshooting Common Safe SVG Issues: From Shrinking Images to Broken Animations

52 threads Sep 9, 2025 Plugin → Safe svg

Content

If you're using the Safe SVG plugin on your WordPress site, you've made a great choice for security and flexibility. However, like any powerful tool, it can sometimes interact unexpectedly with your theme, other plugins, or specific SVG code. Based on common community reports, here’s a guide to diagnosing and resolving the most frequent issues.

1. SVG Image Shrinks or Disappears When Linked

The Problem: An SVG displays correctly until you add a link to it, often in a page builder like Elementor, causing it to shrink or vanish.

Why It Happens: This is typically a CSS conflict. The anchor tag (<a>) wrapping the image might have default styles (like display: block;, width: 0;, or height: 0;) that override the image's dimensions.

The Solution: Add custom CSS to target the linked image. The exact selector will depend on your theme, but a good starting point is:

a .your-svg-class, a.custom-logo-link {
    width: inherit !important;
    height: inherit !important;
    display: inline-block !important;
}

2. SVG Animation is Broken or Removed

The Problem: An animated SVG uploads but the animation no longer works. Tags like <animate> might be stripped from the file.

Why It Happens: This is not a bug but a core security feature. Safe SVG uses a sanitizer library that strips out potentially dangerous tags and attributes by default. SMIL animation tags like <animate> are on this blocklist because they can be exploited for malicious purposes.

The Solution: You can explicitly allow these tags using a filter in your theme's functions.php file. For basic SMIL animation, add:

function allow_safe_svg_animation( $tags ) {
    $tags[] = 'animate';
    $tags[] = 'animateTransform';
    // Add other animation tags as needed
    return $tags;
}
add_filter( 'svg_allowed_tags', 'allow_safe_svg_animation', 10, 1 );

// Sometimes attributes need to be allowed too
function allow_safe_svg_animation_attrs( $attributes ) {
    $attributes[] = 'vector-effect';
    // Add other required attributes
    return $attributes;
}
add_filter( 'svg_allowed_attributes', 'allow_safe_svg_animation_attrs', 10, 1 );

Warning: Only add tags and attributes you absolutely trust and need. Research the security implications of any tag before allowing it.

3. Double Slashes or Incorrect Paths in srcset

The Problem: The generated HTML for your SVG images shows incorrect srcset paths with double slashes (e.g., ...uploads//2021/04/image.svg), which can cause performance or display issues.

Why It Happens: This is a known bug in older versions of the Safe SVG plugin related to how it processes file paths for the responsive srcset attribute.

The Solution: Ensure you are running the latest version of the Safe SVG plugin. The development team has addressed this issue in a GitHub pull request, and the fix has been included in subsequent releases. Updating the plugin is the simplest fix.

4. SVG Not Displaying on Mobile or Front-End

The Problem: An SVG appears in the WordPress admin (e.g., in the media library or a page builder) but does not render on the public-facing front-end of the site.

Why It Happens: The causes can vary widely. It could be due to:

  • Lazy Loading: A conflict with lazy loading scripts that cannot properly handle the SVG source.
  • Caching: Aggressive caching plugins serving an old, broken version of the page.
  • Theme/Plugin Conflict: Another plugin or your theme's CSS is hiding the image or breaking its layout.

The Solution: Follow a standard conflict-testing procedure:

  1. Clear All Caches: Clear your browser cache, any server-side cache, and your caching plugin's cache.
  2. Disable Lazy Loading: Temporarily disable lazy loading features in your theme or plugins to see if it resolves the issue.
  3. Conflict Test: Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) and disable all other plugins except Safe SVG. If the SVG appears, reactivate your plugins one by one to find the culprit.
  4. Check the Code: Use your browser's inspector tool to see if the SVG <img> tag has a broken src attribute or is being hidden by CSS (display: none;).

5. General Performance and Sizing Issues

The Problem: Pages with many SVGs load slowly, or SVGs occasionally flash at their original large size before snapping to their correct CSS dimensions.

Why It Happens: Safe SVG adds a function to calculate image dimensions, which can become a performance bottleneck if a page has a very high number of SVGs. The flashing is often a brief loading state where the intrinsic size of the SVG is displayed before your theme's CSS is fully applied.

The Solution: For performance, this is an issue the Safe SVG team has noted and is working to optimize in future updates. For styling issues, add robust CSS to all SVGs to ensure they are always contained:

img[src$='.svg'] {
    max-width: 100%;
    height: auto;
}

By understanding these common pitfalls, you can confidently use Safe SVG to enhance your website. Most issues can be resolved with a CSS tweak, a filter, or a plugin update. Always remember to test changes on a staging site first.

Related Support Threads Support