如何使用 Django 对象显示 SVG？

Question

我在使用 Django 对象时遇到问题，每当我在模板上显示我的 svg 文件时，它都不会显示为图像而是标签。所以我的问题是如何通过模板显示 SVG 图像？

template.html

{% for icon in icons %}
     <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100px" height="auto" viewBox="0 0 208.000000 300.000000" preserveAspectRatio="xMidYMid meet">
         {{ icon.icons }}
     </svg>
{% endfor %}

icon.icons 数据之一：

<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#161616" stroke="none">
<path class="node" id="node1" d="M1523 2911 c-30  ..."></path>
</g>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#FFFFFF" stroke="none">
</g>

我使用TextField 来包含这些数据。我认为数据是“字符串”，所以我想知道如何在我的网页上将其显示为 SVG？

Answer 1

如何使用safe 模板过滤器，如下所示：

{{ icon.icons|safe }}

[更新]：我试过你的问题，确实TextField 是用双引号 ("<g>...</g>") 呈现的。我试图剥离它们，但没有运气。然后我想，为什么不直接使用出色的django-ckeditor 包。如果是这样，那么您可以像这样声明您的“丰富”模型字段：

from ckeditor.fields import RichTextField

class MyIcon(models.Model):

    icon = RichTextField('Text', help_text='Now text will be stored as a rich text field!')

然后，在您的模板中呈现如下：

<!-- template.html -->

{% for icon in icons %}
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100px" height="auto" viewBox="0 0 208.000000 300.000000" preserveAspectRatio="xMidYMid meet">
         {{ icon.icon|safe }}
     </svg>
{% endfor %}