Xirux Nefer Xirux Nefer - 17 days ago 5
Python Question

How to stop Django from escaping the # symbol

I am trying to use SVG sprites for the icons in a site, like this:

<svg aria-hidden="true" class="icon">
<use xlink:href="{% static 'images/site-icons.svg#icon-twitter' %}"></use>
</svg>


However this doesn't work because the # gets escaped by Django and so I end up with:

<svg aria-hidden="true" class="icon">
<use xlink:href="{% static 'images/site-icons.svg%23icon-twitter' %}"></use>
</svg>


So no icons are rendered.
I have isolated that the problem is the escaping, since it works if I paste the contents of
site-icons.svg
in the template, and do

<svg aria-hidden="true" class="icon">
<use xlink:href="#icon-twitter"></use>
</svg>


so the problem is in the escaping.

Does anybody know how to avoid this escaping from happening?

Answer

You need to move the id after the static tag

{% static 'images/site-icons.svg#icon-twitter' %}

should be

{% static 'images/site-icons.svg' %}#icon-twitter

The reason behind this is that the static tag's job is to find the path to a static file, so all it needs is the file's location, anything extra needs to be added after so that when the template is rendered, it appears as a single (concatenated?) link