如何在 Django 模板中正确包含 SVG 精灵表答案

【问题标题】：How to correctly include SVG sprite sheets in Django templates如何在 Django 模板中正确包含 SVG 精灵表
【发布时间】：2020-03-02 08:59:24
【问题描述】：

我创建了一个 SVG 精灵表，现在正在研究在我的 Django 模板中使用它的各种方法。

最简单的方法是：

这对我有用。但这种方法存在操作上的缺陷。

例如：我通常将我的静态资产停放在{{ STATIC_URL }}。这对组织目的更好。其次，我对{{ STATIC_URL }} 中的资产使用了网络服务器级别的缓存。但是，我没有为我的/templates 文件夹使用这种缓存。

因此，在我看来，如果我将 SVG spritesheets 停在{{ STATIC_URL }} 会更好。但是一旦我这样做了，我如何将它包含在我的 Django 模板中？

以下方法均无效：

{% include 'static/svg_spritesheet.svg' %}
{% include '{{ STATIC_URL }}svg_spritesheet.svg' %}
<object type="image/svg+xml" data="{{ STATIC_URL }}svg_spritesheet.svg"></object>
<link type="image/svg+xml" href="{{ STATIC_URL }}svg_spritesheet.svg">

专家能否举例说明如何使用位于{{ STATIC_URL }} 的 SVG 精灵表？在此先感谢（如果有必要，我将Django 1.8.19 用于相关项目）。

注意：如果您错过了 - 这个问题涉及 SVG 精灵表，而不是单个 SVG。单个精灵表包含多个 SVG 图像 - 可以在需要时（以及何时）选择性地调用。

【问题讨论】：

标签： django svg

【解决方案1】：

答案就在我的眼皮底下。

在从 spritesheet 渲染 SVG 时只需插入所需的位置：

{% load static %}
<svg>
  <use 
    href="{% static "svg_spritesheet.svg" %}#my_image"
  >
  </use>
</svg>

这样，您可以将 SVG 精灵表保存在 static 文件夹中 - 因此所有/任何缓存基础架构都完全适用。编码愉快！

【讨论】：

【解决方案2】：

我不确定我是否理解您的问题，但在 Django 中，load static files 的正确方法是使用 staic 标签。

下面我展示一个基本的例子：

template.html

{% load static %}
<img src="{% static "svg_spritesheet.svg" %}" alt="My svg">

这样，django负责管理url并提供svg，使用对应的存储StaticFilesStorage，如果手动生成url就不会调用了

【讨论】：

你确定我可以使用<img> 标签来加载一个SVG spritesheet吗？
是的，您可以在link 中看到许多使用 svg 的方法。但是，如果您愿意，可以将其作为背景加载到 Div 或其他带有此 css 的标签中：background: url({% static "svg_spritesheet.svg" %});。
澄清一下，我指的是 SVG spritesheet。所以它包含 20 个单独的 SVG，我会在需要时选择性地渲染它们。此链接：24ways.org/2014/an-overview-of-svg-sprite-creation-techniques
好的，会是这样的吗？ django-svg-icons，whitch 允许您通过 SVG Sprite 中的符号 id 加载 svg。
嗯，理想情况下我正在寻找一个不需要整个插件的解决方案

【解决方案3】：

{{ STATIC_URL }} 对我不起作用，所以我将其修改为

<svg><use xlink:href="{% static 'svg_spritesheet.svg' %}#my_image"></use></svg>

【讨论】：