Erik

<p>This plugin provides a Svg Block to your block editor, this can be used with any svg icon or image (or even a html snippet). Some key features are provided like automatic markup sanitation, optimization (svgo), and small utility to change the color and the markup that will be very useful for you to create variations of your image.</p>
<p>This block has the same controls as the images, but actually the content is xml markup, and you can change it as you like! This allows thousands of possibilities… You will be able to use css animations or js scripts to animate it, change the inner text of the svg, create variations of the same svg.<br />
However, this has the disadvantage that the svg will not be copied into the media library, so if you plan to use the same svg several times (buttons, icons, etc.) you are better off creating a reusable block</p>
<p>From a performance point of view, be aware that the image will not be included as an external resource, but will instead be within the markup of the page, thus making svg even faster than it already is.</p>
<h3>Svg are awesome because:</h3>
<ul>
<li>✌️ Are always super sharp!</li>
<li>🪶 Incredibly lightweight and doesn’t require any additional resize image (you only need one source for all screen sizes and resolutions)</li>
<li>⚡ Increased page performance! Using inline SVGs saves can save dozens of requests and save server download bandwith.</li>
<li>🎉 highly customisable and animatable! Embedded svgs are easy to be animated, just use css!</li>
</ul>
<h4>Security</h4>
<p>Since this plugin doesn’t enable uploads of svg images into media library could be considered safer than all the others that enable the upload.<br />
As if that wasn’t enough Svg’s will be cleaned with DOM purify which indeed is a first class js purifier, those used in php try to mimic how it works.</p>
<p>Svg will be included within the pages as xml fragments, so they will not be processed by imagemagick and cannot be uploaded by anyone from website “side”. Only those with permissions to use the editor will be allowed to ‘upload’ (or rather include) them.</p>
<h4>Inspirations, links</h4>
<p><a href="https://www.slideshare.net/x00mario/the-image-that-called-me" rel="nofollow ugc">Mario Heiderich the-image-that-called-me</a></p>
<p><a href="https://www.fortinet.com/blog/threat-research/scalable-vector-graphics-attack-surface-anatomy" rel="nofollow ugc">Fortinet – Anatomy of Scalable Vector Graphics (Svg) Attack Surface on the Web</a></p>
<h3>Resources</h3>
<ul>
<li>dompurify © 2015 Mario Heiderich, <a href="https://raw.githubusercontent.com/cure53/DOMPurify/main/LICENSE" rel="nofollow ugc">Apache License Version 2.0</a></li>
<li>svgo © 2021 Kir Belevich, <a href="https://raw.githubusercontent.com/svg/svgo/main/LICENSE" rel="nofollow ugc">MIT License</a></li>
</ul>
<h4>Contribute</h4>
<p>We love your input! We want to make contributing to this project as easy and transparent as possible, whether it’s:</p>
<ul>
<li>Reporting a bug</li>
<li>Discussing the current state, features, improvements</li>
<li>Submitting a fix 💯 or a new feature 🎉</li>
</ul>
<p>We use GitHub to host code, to track issues and feature requests, as well as accept pull requests.<br />
By contributing, you agree that your contributions will be licensed under its GPLv3 License.</p>


OH MY Svg

Add any svg to your website with the superpowers of the block editor. Out-of-the-box security and speed optimization!

10up

Jeffrey Paul

Daryll Doyle

<p>Safe SVG is the best way to Allow SVG Uploads in WordPress!</p>
<p>It gives you the ability to allow SVG uploads whilst making sure that they’re sanitized to stop SVG/XML vulnerabilities affecting your site.  It also gives you the ability to preview your uploaded SVGs in the media library in all views.</p>
<h4>Current Features</h4>
<ul>
<li><strong>Sanitised SVGs</strong> – Don’t open up security holes in your WordPress site by allowing uploads of unsanitised files.</li>
<li><strong>SVGO Optimisation</strong> – Runs your SVGs through the SVGO tool on upload to save you space. This feature is disabled by default but can be enabled by adding the following code: <code>add_filter( 'safe_svg_optimizer_enabled', '__return_true' );</code></li>
<li><strong>View SVGs in the Media Library</strong> – Gone are the days of guessing which SVG is the correct one, we’ll enable SVG previews in the WordPress media library.</li>
<li><strong>Choose Who Can Upload</strong> – Restrict SVG uploads to certain users on your WordPress site or allow anyone to upload.</li>
</ul>
<p>Initially a proof of concept for <a href="https://core.trac.wordpress.org/ticket/24251" rel="nofollow ugc">#24251</a>.</p>
<p>SVG Sanitization is done through the following library: <a href="https://github.com/darylldoyle/svg-sanitizer" rel="nofollow ugc">https://github.com/darylldoyle/svg-sanitizer</a>.</p>
<p>SVG Optimization is done through the following library: <a href="https://github.com/svg/svgo" rel="nofollow ugc">https://github.com/svg/svgo</a>.</p>


Safe SVG

Our agency has a talented illustrator who is adept at creating SVGs, particularly with self-contained CSS animations. We would be loading them all manually from the theme folder with no path to easily add new or replace existing SVGs without developer involvement if it weren't for this plugin. We install Safe SVG on pretty much all sites we custom build for our clients.

I'm really hoping for some additional features to come to this plugin to better support the Gutenberg editor, since the core image block doesn't handle SVGs well. But that doesn't affect my 5-star review as the most reliable SVG upload plugin.

Agency go-to for SVG uploads

Why Automattic hates SVG has always been a source of confusion to me. Why shouldn't uploading SVG be as easy and straightforward as any other kind of (supported) image? Then again, it's true that you can write malicious code inside a SVG rather easily. The solution? Safe SVG. It cleans up a malformed or malicious SVG during the upload, so that when it arrives in your Media Library, it will already have been sanitised.

The plugin is as simple to operate as it is useful. All parts of WP that require opening the Media Library browser will now accept SVGs as well. As others have remarked, there are some outstanding issues when previewing SVGs inside Gutenberg. No surprises there — this plugin has predated Gutenberg, and (at the time of writing) has been abandoned for about two years, during which Automattic has been eagerly upgrading WordPress.

The author has not gone away, though. He is still actively developing the sanitising part of the plugin, using a library he has developed and posted on GitHub, and which has accepted several contributions and gone through many code reviews. It's possibly the reference library for SVG sanitation written in PHP.

And fortunately he's now back and has released a brand new version as of late February 2022 :)

Incredibly useful!

Great plugin, does what it says. Should be core functionality.

Why is this not a part of core?


Great plugin! very usefull, but please can you add the possibility to add an inline SVG on the block pasting svg code?



Thanks!


Wonderful + fetaure request

Enable SVG uploads and sanitize them to stop XML/SVG vulnerabilities in your WordPress website.

OH MY Svg vs Safe SVG