用django svg img src

Question

这是我第一篇关于stackoverflow的帖子：所以请提前做好 我正在做我的第二个Django项目。 我想在网页上显示SVG img。 如果我做      

＆＃13;

＆＃13;

<figure>
      <embed type="image/svg+xml" src="test.svg" width="75%" height="75%"/>
    </figure>

＆＃13;

＆＃13;

＆＃13; 然后我可以在chrome中显示svg文件。 但是，如果我尝试在django做同样的事情它不起作用。 我尝试过使用

＆＃13;

＆＃13;

 <iframe src="bar_chart.svg" width="200" height="200" ></iframe>

＆＃13;

＆＃13;

＆＃13; 以及一些其他修改。 django中显示svg图像的正确语法是什么。

Answer 1

我强烈建议使用SVG内联。在我上一份工作期间，我尝试使用嵌入在Django项目中的对象，我的同事的弹出窗口阻止程序阻止了它们。

将SVG重命名为具有HTML扩展名，将SVG放入一个模板目录中，然后使用include标记。

{％include'bar_chart.svg'％}

关于内联的最好的事情是你可以用css定位SVG中的任何东西，坏的东西是IE8而旧的不支持它，同样适用于android 2.3及更低版本。

了解更多SVG善意结帐https://css-tricks.com/using-svg/

Answer 2

如 this answer 中针对类似问题所述，您可以使用 SVG <use> HTML 元素和 static django 模板标签来实现此目的：

{% load static %}
<svg>
  <use 
    href="{% static "bar_chart.svg" %}#id_of_svg_element_to_include"
  >
  </use>
</svg>

但请注意：

• 您引用的 SVG 文件中的 svg 元素必须具有您可以引用的 ID（上面的#id_of_svg_element_to_include）
• 您必须确保 ID 位于 svg 元素上，而不是例如根据 MDN 上的 the note for the width and height attributes，g 上的 width 元素 else height 和 use 将不适用。

不内联的明显好处是 SVG 可以从您的快速静态文件服务器提供并且可以缓存。