How do I convert an inline svg into a file svg and then display it?

问题

I'm trying to save an inline SVG as a file and then display it on a webpage. Based on this question, thought I'd found my answer but it doesn't work.

Here's what I did. The inline SVG is this:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ff2825" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <line x1="4" y1="7" x2="20" y2="7" />
  <line x1="10" y1="11" x2="10" y2="17" />
  <line x1="14" y1="11" x2="14" y2="17" />
  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
</svg>

I created a new empty file and pasted that into it. I saved the file with the name trashcan.svg.

Then I tried to display it but wasn't sure whether I was better using an or tag so did both:

    <img src="trashcan.svg" alt="trashcan">
    <object type="image/svg+xml" data="trashcan.svg" class="logo">Trashcan</object>

I hoped at least one of those would work but all that is displayed is the the word "trashcan" where the img should be and the word "Trashcan" where the object should be.

What do I need to do differently here to get my SVG to display? Or is the trashcan.svg file not quite right? If so, what do I need to change?

I'd like to do the same thing with various other SVGs I'll be using in the program so I'm hoping someone can tell me what's wrong with my approach.

回答1:

I really didn't know if there was more involved in turning an inline SVG into a file so I appreciate Michael Mullany setting me straight on that.

As for the files not appearing, it turns out that I made a beginner mistake: I had the wrong path to the files.

I put the file in the same directory as the Vue component and assumed that would work but I didn't reckon on Laravel apparently wanting things like images to always be in the public hierarchy. As soon as I moved the file to public/images it displayed just fine.

I'm still pretty new to Laravel so I'm still stumbling over lots of beginner issues....

I hope this information will be of some use to the next newbies to have this problem.

来源：https://stackoverflow.com/questions/65190542/how-do-i-convert-an-inline-svg-into-a-file-svg-and-then-display-it

标签

svg