Почему не отображается svg картинка?

В футер на кнопке "Сохранить на память" меня есть svg картинка https://svgur.com/i/10Br.svg Но она не отображается. Подскажите почему?

:root {
  --main-font: 'InterVariable', sans-serif;
  --font-for-decoration: 'PressStart2P', monospace;
  --header-background-color: #fff;
  --header-color: #000;
  --background-gradient-color: repeating-linear-gradient(#d3d3d3 0 2px, transparent 2px 4px),
  repeating-linear-gradient(90deg, #d3d3d3 0 2px, transparent 2px 4px),
  linear-gradient(#e7e7e7, #1a1a1a); 
  
}

.page {
  display: flex;
  flex-direction: column;
  align-items:center;
  gap: 100px;
  background-image: var(--background-gradient-color);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  min-inline-size: 320px;
  min-block-size: 100dvb;
}

/* Хидер */

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 700px;
  margin-top: 100px;
  border: 2px solid var(--header-color);
  padding-bottom: 20px;
  color: var(--header-color);
  font-family: var(--font-for-decoration);
  background-color: var(--header-background-color);
}

.width-content {
  width:clamp(376px, 50%, 700px);
}

.header__logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px; 
  padding-top: 138px;
  font-weight: 400;
  text-transform: uppercase;
}

.header__logo-group__title {
  font-size: clamp(3.0625rem, 2.7104rem + 1.5023vw, 4.0625rem);
}

.header__logo-group__subtitile {
  font-size: clamp(0.875rem, 0.6762rem + 0.8459vw, 1.4375rem);
}

.theme-menu {
  
}

.header__theme-menu {

}

.theme-menu__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-menu__item {

}

.theme-menu__button {
  border: 0;
  font-size: 14px;
  text-transform: uppercase;
  background-color: transparent;
  transition: opacity .3s ease;
}

.theme-menu__button:hover {
  opacity: 0.6;
}

.theme-menu__button::after {
  content: '';
  display: block;
  width: 0%;
  height: 2px;
  transition: width 300ms;
}

.theme-menu__button:hover::after {
  width: 100%;
  background-color: var(--header-color);
}

.theme-menu__button:focus {
  opacity: 0.6;
  outline: none;
}

.theme-menu__button:disabled  {
  opacity: 0.6;
  pointer-events: none;
}

.theme-menu__button:disabled::before  {
  content: '▶';
  position: absolute;
  left: -13px;
  animation: left-shift-4px 0.5s infinite ease-in-out alternate-reverse;
}

/* Посты */

.content {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.post {
  font-family: var(--main-font);
  font-weight: 400;  
  font-size: 18px;
  background-color: #fff;
  color: #000;
  border: 2px solid var(--header-color)
}

.post_title {
  font-weight: 700;
  padding: 5px 10px;
}

.post_image {
  position: relative;
}

.post_image__file {
  inline-size: 100%;
}

.post_image__watermark {
  position: absolute;
  right: 25px;
  top: 25px;
  color: var(--header-color);
  font-family: var(--font-for-decoration);
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0.5;
  mix-blend-mode: hard-light;
  text-shadow:
    -1px 0 var(--header-background-color),
    0 1px var(--header-background-color),
    1px 0 var(--header-background-color),
    0 -1px var(--header-background-color);
}

.post_text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.post_buttom {
  display: flex;
  justify-content:end;
}

/* Футер */

.footer {
  display: flex;
  justify-content: center;
}

.footer_button {
  display: flex;
  align-items:center;
  gap: 8px;
  padding: 15px 20px; 
}

.button__text {
  position: relative;
  z-index: 5;
  font-family: var(--font-for-decoration);
  font-size: 14px;
  color: var(--header-color)
}

.footer_button__icon {
  inline-size: 28px;
  mix-blend-mode: difference;
  height: 20px;
    width: 20px;
}

.footer_button__icon:hover {
  fill: var(--header-background-color);
}

/* Диалоговое окно */

.dialog {
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 357px;
  background-color: var(--header-background-color);
  color: var(--header-color);
  padding: 30px 40px;  
  font-family: var(--font-for-decoration);
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
}

.dialog[open] {
  display: flex;
}

.dialog::backdrop {
  opacity: 0.75;
  background-color: var(--header-color);
}

.dialog_content {
  display: flex;
  gap: 20px;
  
}

.dialog_button {
  padding: 9px 17px;
  border: 2px solid var(--header-color);
  background-color:transparent;
}

/* Общие стили */

.button__common_style {  
  color: var(--header-color);
  position: relative;
  border: 2px solid var(--header-color);
  background-color: var(--header-background-color);
  transition: box-shadow .3s ease;
}

/* Потому что mix-blend-mode: difference не работает */

.button__common_style:hover {
  color:var(--header-background-color);
}

.button__common_style::after {
  content: '';
  position: absolute;
  inset: 0;
  inline-size: 0%;
  background-color: var(--header-color);
  transition: inline-size 0.5s ease-in-out;
}

.button__common_style:hover::after {
  inline-size: 100%;
}

.button__common_style:focus {
  outline: none;
}

.button__common_style:focus-visible {
  box-shadow: 4px 4px 0 0 var(--header-color);
}




/* Мобильный вид */

@media(width<=375px) {

    .width-content {
      width: 100%;
    }

    .dialog {      
      width: 341px;
    }

}
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <title>Закрывающий тег</title>
    <link rel="icon" href="./images/favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./styles/variables.css" />
    <link rel="stylesheet" href="./styles/globals.css" />
    <link rel="stylesheet" href="./styles/style.css" />
    <link rel="stylesheet" href="./styles/animations.css" />
    <link rel="stylesheet" href="./styles/themes.css" />
    <script src="./scripts/set-theme.js"></script>
  </head>
  <body class="page">
    <header class="header width-content">
      <div class="header__logo-group">
        <h1 class="header__logo-group__title">&lt;/HTML&gt;</h1>
        <h2 clsas="header__logo-group__subtitile">закрывающий тег</h2>
      </div>
      <nav class="theme-menu header__theme-menu">
        <!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
        <ul class="theme-menu__list">
          <li class="theme-menu__item">
            <button type="button" data-theme="dark" class="theme-menu__button">
              Темно
            </button>
          </li>
          <li class="theme-menu__item">
            <button
              type="button"
              data-theme="auto"
              disabled
              class="theme-menu__button"
            >
              Авто
            </button>
          </li>
          <li class="theme-menu__item">
            <button type="button" data-theme="light" class="theme-menu__button">
              Светло
            </button>
          </li>
        </ul>
      </nav>
    </header>
    <main class="width-content content">

      <article class="post">
        <h2 class="post_title">Фритрек и нулевой спринт: Подготовка к работе</h2>
        <div class="post_image">
          <img class="post_image__file" src="images/image.png">
          <span class="post_image__watermark">&lt;/HTML&gt;</span>
        </div>      
        <div class="post_text" >
          <p>Это было самое начало пути. На этом этапе важно было проникнуться основами и настроиться на учёбу. И, возможно, подумать, как новые знания могут повлиять на ваше будущее.</p>
          <p>Место для ваших воспоминаний о начале обучения.</p>
        </div>
        <div class="post_buttom">
          <button class="post_buttom__heart">heart</button>
          <button class="post_buttom__like button__common_style">Like</button>
        </div>
      </article>

      <footer class="footer">
        <button
          class="footer_button button__common_style"
          type="button" 
          onclick="window['dialog-id'].show()"
          aria-controls="dialog-id"
        >
        <svg viewBox="0 0 40 40" class="footer_button__icon">
          <use href="https://svgur.com/i/10Br.svg"/>
        </svg>
          <span class="footer_button__text  button__text">Сохранить на память</span>
        </button>
      </footer>
      
      <dialog class="dialog" id="dialog-id">
        <div class="dialog_content">
          <img src="https://svgur.com/i/10Br.svg">
          <p>Вставьте дискету, чтобы продолжить</p>
        </div>
        <form action="#0" method="dialog">
          <button 
            class="dialog_button button__common_style"
            type="submit"
            onclick="window['dialog'].close()">
            OK
          </button>
        </form>
      </dialog>

    </main>
    <script src="./scripts/like.js"></script>
  </body>
</html>


Ответы (0 шт):