joelmelon

This plugin allows you to use SVG icons within WordPress as shortcode and/or as Gutenberg Block and adds SVG support with the SVG-Sanitizer library.
<h3>License</h3>
Use this code freely, widely and for free. Provision of this code provides and implies no guarantee. 
Please respect the GPL v3 licence, which is available via http://www.gnu.org/licenses/gpl-3.0.html

SVG Icons

This plugin allows you to use SVG icons within WordPress as shortcode and/or as Gutenberg Block and adds SVG support with the SVG-Sanitizer library.

Benbodhi

The complete SVG solution for WordPress – secure, flexible, and easy to use.
SVG Support enables secure SVG uploads with powerful features for both basic users and developers:
✨ Key Features: 
– Secure SVG uploads with automatic sanitization 
– Inline rendering for direct CSS/JS manipulation 
– File size optimization through minification 
– Role-based access control 
– Advanced developer options 
– Multisite compatible 
– Full Block Editor (Gutenberg) compatibility
🔒 Security First: 
– Built-in sanitization removes potentially harmful code 
– Role-based upload restrictions 
– Comprehensive MIME type validation
🎨 Designer Friendly: 
– Direct styling of SVG elements 
– Animation support 
– Custom class targeting 
– Automatic dimension handling
💻 Developer Ready: 
– Advanced mode for additional features 
– REST API support 
– Gutenberg compatible 
– Extensive hooks and filters
<h3>Usage</h3>
Basic Usage: 
– First, install and activate SVG Support via your WordPress dashboard 
– Upload SVG files to your media library like any other image 
– Works seamlessly with Image blocks, Cover blocks and featured images
Advanced Usage: 
– Enable “Advanced Mode” for minification and inline rendering 
– Customize with hooks and filters for tailored functionality
Block Editor Usage: 
– Use Advanced Mode to enable inline rendering: 
 – Add the <code>"style-svg"</code> class to Image blocks 
 – Add the <code>"style-svg"</code> class to Cover blocks to render SVG backgrounds inline 
– Use “Skip Nested SVGs” setting to control inline rendering of SVGs within Cover blocks
Classic Editor Usage: 
– Use Advanced Mode to add the <code>"style-svg"</code> class to <code><img></code> tags for inline rendering 
– Enable “Auto Insert Class” option for automatic class insertion in Classic Editor
Common Issues & Solutions: 
– SVG not displaying? Ensure dimensions are set in CSS. 
– Need help? Use the support tab and I will do my best to assist you.
<h3>Spin up a test site</h3>
With a single click, you can spin up a completely free test site to test SVG Support using TasteWP! No sign up, no cards, nothing! How cool is that? Give it a go: 
<a href="https://tastewp.com/new?pre-installed-plugin-slug=svg-support&redirect=options-general.php%3Fpage%3Dsvg-support&ni=true" rel="nofollow ugc">Click Here to spin up a test site in seconds</a>
<h3>Security</h3>
SVG Support prioritizes security with automatic sanitization and role-based restrictions. Only trusted users should have upload permissions. Configure settings to balance functionality and security.
<h3>Feedback</h3>
I’m open to your <a href="mailto:wp@benbodhi.com" rel="nofollow ugc">suggestions and feedback</a> – Thanks for using SVG Support!
Follow <a href="https://twitter.com/svgsupport" rel="nofollow ugc">@SVGSupport</a> on Twitter 
Follow <a href="https://twitter.com/benbodhi" rel="nofollow ugc">@benbodhi</a> on Twitter 
Follow <a href="https://warpcast.com/benbodhi" rel="nofollow ugc">@benbodhi</a> on Warpcast
Note: I hope you like this plugin! Please take a moment to <a href="https://wordpress.org/support/view/plugin-reviews/svg-support?filter=5#postform" rel="ugc">rate it</a>.
<h3>Development & Contributing</h3>
The development version of SVG Support is maintained on GitHub. Feel free to contribute:
<ul>
<li>Submit bug reports or feature suggestions: <a href="https://github.com/benbodhi/svg-support/issues" rel="nofollow ugc">GitHub Issues</a></li>
<li>Contribute code via <a href="https://github.com/benbodhi/svg-support/pulls" rel="nofollow ugc">Pull Requests</a></li>
<li>Development repository: <a href="https://github.com/benbodhi/svg-support" rel="nofollow ugc">GitHub</a></li>
</ul>
<h3>Translations</h3>
Contribute translations <a href="https://translate.wordpress.org/projects/wp-plugins/svg-support" rel="nofollow ugc">here</a>. New to translating? Check the <a href="https://make.wordpress.org/polyglots/handbook/tools/glotpress-translate-wordpress-org/" rel="nofollow ugc">Translator Handbook</a>.

SVG Support


is very useful, please add Reset button in Settings :-). tnx


Useful

Excellent

Working well

Securely upload SVG files to your media library, with built-in sanitization and advanced features for styling and animation.

SVG Icons vs SVG Support