django - 如何在 django 模板中嵌入 SVG 图像

Question

我正在尝试在使用 django 模板构建的网页上显示 SVG 图像。

如果我简单地说

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

然后在 HTML 文件中呈现 SVG 文件(由 Chrome)。

但是如果我尝试在 Django 模板中做同样的事情，它就不起作用了。我也尝试过使用

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

和一些其他变体。

在 django 中显示 SVG 图像的最佳方式是什么？

Answer 1

我强烈推荐使用内联 SVG。在我之前的工作中，我尝试使用嵌入在 Django 项目中的对象，但我同事的弹出窗口拦截器阻止了它们。

重命名 SVG 以使用 HTML 扩展将 SVG 放入您的模板目录之一，然后使用 include 标签。

{% include 'bar_chart.svg' %}

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

更多 SVG goodness checkout https://css-tricks.com/using-svg/