J'ai créé une feuille de sprite SVG et j'étudie maintenant différentes manières de l'utiliser dans mes modèles Django.
Le moyen le plus simple est:
templates/ (par exemple templates/svg_spritesheet.svg ){% include "svg_spritesheet.svg" %}<svg><use xlink:href="#my_svg"></use></svg>Cela a fonctionné pour moi. Mais cette méthode présente des imperfections opérationnelles.
Par exemple: je gare normalement mes actifs statiques à {{ STATIC_URL }} . C'est mieux à des fins d'organisation. Deuxièmement, j'emploie la mise en cache au niveau du serveur Web pour les actifs dans {{ STATIC_URL }} . Cependant, je n'emploie pas une telle mise en cache pour mon dossier /templates .
Alors naturellement, il me semble que ce serait mieux si je garais mes spritesheets SVG à {{ STATIC_URL }} . Mais une fois que j'ai fait cela, comment puis-je l'inclure dans mon modèle Django?
Aucune des méthodes suivantes ne fonctionne:
{% 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"> Un expert peut-il donner un exemple illustratif de la manière d'utiliser les feuilles de sprite SVG placées à {{ STATIC_URL }} ? Merci d'avance (au cas où cela se justifie, j'utilise Django 1.8.19 pour le projet en question).
Remarque: au cas où vous le manqueriez, cette question concerne les feuilles de sprite SVG , pas les SVG individuels. Une seule feuille de sprite contient plusieurs images SVG - qui peuvent être appelées sélectivement au fur et à mesure des besoins.
3 Réponses :
Je ne suis pas sûr d'avoir compris votre question, mais dans Django, la bonne façon de charger des fichiers statiques est d'utiliser la balise staic.
Ci-dessous, je montre un exemple de base:
template.html
{% load static %}
<img src="{% static "svg_spritesheet.svg" %}" alt="My svg">
De cette façon, Django se charge de gérer l'url et de servir le svg, en utilisant le stockage correspondant StaticFilesStorage , qui n'est pas appelé si vous générez l'url manuellement
Êtes-vous certain que je peux utiliser la <img> pour charger une feuille de sprites SVG?
Oui, vous pouvez voir de nombreuses façons d'utiliser svg dans ce lien . Mais si vous préférez, vous pouvez le charger en arrière-plan dans une balise Div ou autre avec ce css: background: url({% static "svg_spritesheet.svg" %}); .
Juste pour clarifier, je fais référence à la feuille de sprites SVG. Cela contient donc 20 SVG individuels, que je rend de manière sélective chaque fois que nécessaire. Ce lien: 24ways.org/2014/an-overview-of-svg-sprite-creation-technique s
Ok, ce serait quelque chose comme ça? django-svg-icons , qui vous permet de charger svg par identifiant de symbole depuis SVG Sprite.
Eh bien, idéalement, je recherche une solution qui ne nécessite pas un plugin complet
La réponse était juste sous mon nez.
Insérez simplement l'emplacement requis lors du rendu d'un SVG à partir de la feuille de sprites. Ergo:
<svg><use xlink:href="{{ STATIC_URL }}svg_spritesheet.svg#my_image"></use></svg>
Pas besoin d'utiliser une balise include . De cette façon, on peut garder ses spritesheets SVG dans le dossier static - ainsi toute / toute infrastructure de mise en cache s'applique pleinement. Bon codage!
{{ STATIC_URL } ne fonctionnait pas pour moi, je l'ai donc modifié en
<svg><use xlink:href="{% static 'svg_spritesheet.svg' %}#my_image"></use></svg>