Embed SVG inline

Hello,
I'm trying to embed SVG graphics as inline SVG that are saved as page media files.

I know, that I can embed them as <img> with something like
{{ angebot.media.files|first.html('', '', 'img-responsive icon svg') }}

But this won't let me manipulate the SVG via CSS.
I need to have the SVG code inline in the DOM.

I searched, but all I could find was the TWIG
{{ source('my-svg.svg') }}
which only works for files that are inside the template directory.

In PHP I would use file_get_contents. But for TWIG I couldn't find an equivalent that works with files outside of the templates directory.

Is there some filter or function or an existing plugin that I can use or would I have to write a plugin?

I use that script : this will turn your image into an inline SVG including all attributes, like IDs, classes, width and height which you can now easily target using CSS
It works very well, i use it in all my procjects

jQuery(document).ready(function ($) {
    $(function(){
    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Check if the viewport is set, else we gonna set it if we can.
            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
            }

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');    
    });
    });
});

EDIT : don't forget to add svg classe name to img

You could write your own twig extension for that.

But you would have the external requests though, since you're downloading the images via ajax.

@dimitrilongo Thank you for the suggestion. Actually I was using a JS solution but having display problems that I can't resolve. This is why I would like to embed the SVGs via Twig.

@chris_jung I was hoping there was a Twig extension that I can use. I'll look into writing my own.

I wrote a plugin with a grav Twig extension that allows to embed file contents of any file type.

See this thread: /forum/themes-styling/included-grav-logo-svg-missing-on-extending-theme-t7522?u=mahish