safe-svg
safe-svg copied to clipboard
Feature/svgo support
Description of the Change
Implements support for SVG optimization using the popular SVGO tool. For the scripts' structure and build, 10up-toolkit has been utilized. The Optimizer is active by default and will try to optimize any SVG file uploaded via the Media Library, using the default SVGO settings.
A filter safe_svg_svgo_param
has been added so that developers can override these settings and pass their own.
Also, using the same filter like this: add_filter( 'safe_svg_svgo_params', '__return_false' );
will allow them to completely disable the Optimizer.
At the moment, the optimizer doesn't work if you upload an image directly (using "Upload" instead of the "Media Library" button), as it bypasses the media uploader. Other than that, as long as the file is uploaded using the Media Library, it will get optimized. Also, it should work with both single and multiple images. With the first chance, I will resume my work to make it work with direct uploads as well.
Closes https://github.com/10up/safe-svg/issues/68
How to test the Change
- Run
npm install
andnpm run build
. - Upload one or more unoptimized SVG files using the Media Library. You can find unoptimized SVG files for testing purposes here.
- Confirm that the uploaded file(s) have been optimized. This can be checked by either comparing their file size or by adding the files in a text editor and comparing their contents (optimized files should have considerably less content).
Known issue: Given that SVGO is a JS tool, using it with WordPress had its challenges. To make it work, a hook to wp.Uploader
has been made, to identify when a file gets uploaded, optimize it, and then make an AJAX call to update the file with PHP. Therefore, at the moment it doesn't work if you upload an image directly, bypassing the media uploader. More specifically, if you hit the "Upload" button from the image below:
Using the "Media Library" option, on the other hand, should work with either single or multiple SVG. It should also work with drag and drop and even if you drop mixed image types (for example SVGs together with JPEGs, PNGs etc) at the same time.
Changelog Entry
Added - SVG optimization during upload via SVGO
Credits
Props @gsarig
Checklist:
- [x] I agree to follow this project's Code of Conduct.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my change.
- [ ] All new and existing tests pass.