javascript - Is it possible to render SVG elements directly in Svelte? - Stack Overflow

admin管理员组

文章数量:1293985

I am trying to import and render SVG's in Svelte.

I am using @rollup/plugin-url to import the SVG code like so:

<script>
  import arrowCircle from "heroicons/dist/solid-sm/sm-arrow-circle-up.svg"
</script>

<main>
  <object title="Arrow Circle" type="image/svg+xml" data={arrowCircle}></object>
</main>

Now this works (in terms of the SVG content getting brought in) but it renders the following screen:

Ideally I would like to use the <object /> element so I can apply classes to the SVG but given the error I thought I would have a go with the <img /> tag to see if this would at least render the SVG, but instead got this:

<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2018a8%208%200%20100-16%208%208%200%20000%2016zm3.707-8.707l-3-3a1%201%200%2000-1.414%200l-3%203a1%201%200%20001.414%201.414L9%209.414V13a1%201%200%20102%200V9.414l1.293%201.293a1%201%200%20001.414-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E">

I also tried just {arrowCircle} but that rendered the above image src as plain text.

From what I can tell it is to do with the data prefix that is part of the raw import.

I am aware of the codefeathers/rollup-plugin-svelte-svg plugin but would like to be able to do be able to do this without another plugin if possible, or at least understand what is going on.

For reference SVG are valid in both <img /> tags as well as <object /> as per this article.

I am trying to import and render SVG's in Svelte.

I am using @rollup/plugin-url to import the SVG code like so:

<script>
  import arrowCircle from "heroicons/dist/solid-sm/sm-arrow-circle-up.svg"
</script>

<main>
  <object title="Arrow Circle" type="image/svg+xml" data={arrowCircle}></object>
</main>

Now this works (in terms of the SVG content getting brought in) but it renders the following screen:

Ideally I would like to use the <object /> element so I can apply classes to the SVG but given the error I thought I would have a go with the <img /> tag to see if this would at least render the SVG, but instead got this:

<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2018a8%208%200%20100-16%208%208%200%20000%2016zm3.707-8.707l-3-3a1%201%200%2000-1.414%200l-3%203a1%201%200%20001.414%201.414L9%209.414V13a1%201%200%20102%200V9.414l1.293%201.293a1%201%200%20001.414-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E">

I also tried just {arrowCircle} but that rendered the above image src as plain text.

From what I can tell it is to do with the data prefix that is part of the raw import.

I am aware of the codefeathers/rollup-plugin-svelte-svg plugin but would like to be able to do be able to do this without another plugin if possible, or at least understand what is going on.

For reference SVG are valid in both <img /> tags as well as <object /> as per this article.

• javascript
• svg
• svelte
• rollup

Share Improve this question Follow asked Apr 27, 2020 at 5:08 Otis WrightOtis Wright 2,11088 gold badges3232 silver badges5353 bronze badges 5

• Did you try adding the missing namespaces? developer.mozilla/en-US/docs/Web/SVG/… – Robert Longson Commented Apr 27, 2020 at 5:18
• @RobertLongson do you mean to the SVG's themselves? – Otis Wright Commented Apr 27, 2020 at 6:50
• Yes, they are not valid SVG without namespces. – Robert Longson Commented Apr 27, 2020 at 7:22
• 2 If an option you can rename your files to .svelte and use them as any other ponent, it will inline the SVG. – Stephane Vanraes Commented Apr 27, 2020 at 9:02
• Hmmm I can see that they don't have the namespaces but I am also able to paste the raw SVG input in and they work... – Otis Wright Commented Apr 28, 2020 at 7:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

It looks as though the SVG file isn't valid as a standalone image. Try this:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3/2000/svg" ...>...</svg>

本文标签： javascriptIs it possible to render SVG elements directly in SvelteStack Overflow