I have been trying to add an svg image to my django website for awhile now. However, I keep getting this error: GET http://localhost:8000/images/enter.svg 404 (Not Found)

This is what I wrote <img src='/images/enter.svg'>

and my folder structure is as such

index.html
- images
-- enter.svg

I've been googling around but I can't find a solution. I hear people copying and pasting the 'data' of the svg instead, but I haven't been able to find an example. Just in case it's actually useful, here's the data of the svg image I'm trying to attach to my page:

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
  <!--Unicode Character 'DOWNWARDS ARROW WITH CORNER LEFTWARDS' (U+21B5)-->
  <defs id="genericDefs" />
  <g>
    <g>
      <path d="M159.3281 330.8906 L76.6406 330.8906 Q92.5312 348.75 99.4219 368.8594 L89.2969 368.8594 Q69.6094 340.1719 34.5938 327.375 L34.5938 320.4844 Q69.6094 307.6875 89.2969 279 L99.4219 279 Q92.5312 299.25 76.6406 317.1094 L145.4062 317.1094 L145.4062 215.7188 L159.3281 215.7188 L159.3281 330.8906 Z" stroke="none" />
    </g>
  </g>
</svg>

1 Answers

1
Yilmaz Tut On

Hi your svg code didnt seem to work so i think if you put this piece of code in wherever you want you svg placed it should work:

<svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14">
<g>
    <g>
        <path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89
            c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/>
    </g>
</g>
</svg>

It ofcourse can be turned into an svg file and then linked into your code as you were trying. But you could also just put the code above into your code. example:

<html>
<body>
<h1> some content or whatever </h1>
    <svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14">
    <g>
        <g>
            <path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89
                c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/>
        </g>
    </g>
    </svg>
</body>
</html>

like this it should show up on your page without having the linking problem. You can style your svg like this aswell now by giving your path an id. https://css-tricks.com/lodge/svg/ there are plenty tutorials on this page that helped me a lot with svg.

Hope this works!