Embed SVG inline

Support
1

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 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?

2

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

3

You could write your own twig extension for that.

4

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

5

@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.

6

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

1 Like
7

See this thread: Included grav-logo.svg missing on extending theme