SVG 没有在我的项目中正确显示，我是否正确使用了标签？答案

【问题标题】：SVG not showing correctly on my project, I am using the tag correctly?SVG 没有在我的项目中正确显示，我是否正确使用了标签？
【发布时间】：2021-12-20 19:53:59
【问题描述】：

SVG 无法正确加载，我做错了什么吗？还是我应该只上传一个 png？

&lt;svg width=513.57px height=760.29px xmlns="Component 1.svg" alt="White bellflowers"&gt;&lt;/svg&gt;

【问题讨论】：

，并从文件中删除空间可能是一个好习惯。
@bZezzz 还是一样，没用。
形状的填充有问题。也许您有一些类在第二个 svg 中使用 fill:none 进行样式设置，并且该样式也应用于白花。这将有助于查看您拥有的 svg。

标签： html css svg

【解决方案1】：

如果您想使用带有 svg 标签的 svg 并像使用典型的 HTML/CSS 一样修改/设置它的样式，则必须内联包含整个 SVG 标记。 XMLNS 属性仅用于定义 XML 的“命名空间”，对于 svgs，基本上总是

<svg xmlns="http://www.w3.org/2000/svg">

这只是告诉浏览器/xml 解析器它正在处理一个 svg 元素，并且应该相应地处理里面的内容。

如果您想像普通图像一样在外部文件中使用 svg 图形，您可以像其他评论者建议的那样使用标准的“img”标签。但请注意，这通常会阻止您像使用常规标记一样使用 CSS 设置样式和定位 SVG 的不同部分。

最后，与其用像素尺寸显式设置高度和宽度，不如为 svg 定义一个“viewBox”属性，使其具有正确的比例/纵横比，然后让浏览器根据需要缩放和调整大小在它放置在哪个容器中。对于您的 svg，这看起来像

 <svg viewBox="0 0 514 760" xmlns="http://www.w3.org/2000/svg" ...

这样，它可以是任何需要的大小，并与页面内容的其余部分一起流动。

【讨论】：

【解决方案2】：

您似乎混淆了<imgs 和<svgs。

图片有srces，SVG需要包含paths等。

【讨论】：