是否可以在Svelte中直接渲染SVG元素？

Question

我正试图在Svelte中导入并渲染SVG。

我正在使用 @rollupplugin-url 来导入SVG代码，就像这样。

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

现在这可以工作了（从SVG内容的角度来看），但它呈现的是下面的画面。

理想情况下，我想使用 <object /> 元素，这样我就可以将类应用到SVG上，但考虑到这个错误，我想我会用 <img /> 标签，看看这样做是否至少可以渲染 SVG，但得到的却是这个。

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

我还试了一下 {arrowCircle} 但这使上面的图像 src 作为纯文本。

据我所知，这是与 data 前缀，是原始导入的一部分。

我知道 codefeathersrollup-plugin-svelte-svg）。 插件，但如果可能的话，希望能够在没有另一个插件的情况下也能做到这一点，或者至少了解是怎么回事。

参考SVG是有效的，在两个 <img /> 标签以及 <object /> 照此 文章.

Answer 1

看起来好像SVG文件作为独立的图片是无效的。试试这个。

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