Laravel 5.6 displaying an svg icon in my blade view not working

Question

I have an icon in this location stored: public/icons/list.svg and in my blade I try to display the icon like this:

{{ Html::image('icons/list.svg', 'list') }}

This results into this in my html page:

<img src="https://url.dev/icons/list.svg" alt="list">

But this unfortunately doesn't work it displays as if the file can not be found. (this works great for .png or .jpg files)

Am I doing something wrong here?

Can you try this: https://stackoverflow.com/a/52226069/1228951 — ajthinking, Apr 11 '19 at 08:25
To detect if is a problem with the svg file or the server try load a working svg image first like https://www.w3.org/TR/SVG/images/conform/smiley.svg, second open your svg image in browser (see if you can view it), check directory and file permissions, check your server for allowed files type extensions — ustmaestro, Apr 11 '19 at 08:44

score 2 · Answer 1 · answered Apr 11 '19 at 08:30

2

Sometimes Apache doesn't recognize media type for svg, so try adding in your .htaccess:

AddType image/svg+xml .svg .svgz

answered Apr 11 '19 at 08:30

Nikola Kirincic

3,651
1
24
28

I don't have a .htaccess – Michael Apr 11 '19 at 08:31
@Michael, add one in your public directory – Nikola Kirincic Apr 11 '19 at 08:33
@Michael, did you check permissions for 'icons' directory? – Nikola Kirincic Apr 11 '19 at 08:39

score 1 · Answer 2 · answered Apr 11 '19 at 08:26

1

Sometimes it doesn't work for me either and I've used the source code of the svg image

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="none">
    .
    .
    .
</svg>

to get the source code of svg, just open the svg in a browser and view the source

answered Apr 11 '19 at 08:26

Sethu

1,299
10
13

You can also copy the svg straight out of illustrator, When you paste it into the codes it just pastes the complete svg code. – Yilmaz Apr 11 '19 at 12:02

Laravel 5.6 displaying an svg icon in my blade view not working

2 Answers2