On many of the websites I have worked on that involve a CMS, the file manager does not handle SVGs very well. If I want to be able to store SVG icons or elements in the file manager, it is treated as an image and typically outputted using
img tags, restricting any styling I'd like to add such as
img tags to inline svg:
It's a pretty simple function that takes a query and a callback as arguments. All you need to do is call that function with a query for the images you want to convert, and it will loop through each of them, fetch the SVG and use
DOMParser to pull the SVG data from the file. After that, it copies the
class attributes from the image to the SVG variable and replaces the image with the SVG data.
You can see it in action here, you'll notice that the html just has an image tag but if you inspect the page, it has been replaced with inline SVG. Now you can do whatever you want with the graphic!
Feel free to edit this to your needs, it's possible to copy over more than just the
class attributes, and it would probably be good to do a test and check elements to make sure they are
img tags before fetching data.