Добавление SVG кода в HTML

Question

Мне на сайт нужно добавить кнопку с анимацией (Переход на канал YT).

Стили я подключил, всё отлично, но проблема заключается в том, что здесь используется svg код, я с ним не знаком, и не знаю куда его добавить (для главной страницы магазина нужно).

Возможно, вопрос слишком странный, но я только начал разбирать html, и это моя первая работа.

Сама кнопка выглядит так - https://codepen.io/OfigenusMaximus/pen/VwXvVey

   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="gooey">
                <!-- in="sourceGraphic" -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
                <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="highContrastGraphic" />
                <feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop" />
            </filter>
        </defs>
    </svg>

    <button id="gooey-button">
        Subscribe
        <span class="bubbles">
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
        </span>
    </button>

Часть кода главной страницы сайта:

......
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS -->
      <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,800" rel="stylesheet">
      <link href="/engine/assets/css/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
      <link href="/engine/assets/css/f-all.css" rel="stylesheet" type="text/css">
      <link href="/engine/assets/css/main.css" rel="stylesheet" type="text/css">
      <link href="/engine/assets/css/mobile.css" rel="stylesheet" type="text/css">
      <link rel="shortcut icon" href="/uploads/tda.jpg" type="image/png">
      <!-- CSS -->
      <!-- JS -->

      <!-- JS -->

</head>
   <body>
      <header>
         <nav class="topbar container">
            <div class="logo">
               <div class="img"><img src="uploads/tda.jpg"><img id="logo-yt" src="/engine/assets/img/icons/yt_small.png"></div>
               <div class="text">
                  <b>Магазин ......</b>
                  <small>......</small>
               </div>
               <a href="index.php" class="a-ghost"></a>
            </div>
            <div class="navbar-open" id="navbar-open">
                <i class="far fa-bars"></i>
            </div>
            <div class="menu">
               <div class="navbar-close" id="navbar-close">
                   <i class="far fa-times"></i>
               </div>
               <a href="garant"><img id="icon-menu" src="/engine/assets/img/icons/star2.png">Гарантии</a>
               <a href="buy"><img id="icon-menu" src="/engine/assets/img/icons/heart.png">Как купить?</a>
               <a href="contacts"><img id="icon-menu" src="/engine/assets/img/icons/man-user.png">Контакты</a>
               <a href="confirm"><img id="icon-menu">Правила и гарантии</a>
               <a href="https://oplata.info/"><img id="icon-menu">Мои покупки</a>
            </div>
         </nav>
         <div class="background" style="background-image: url('/engine/assets/img/bg.jpg');"></div>
         <div class="area-info container">
            <div class="about-shop">
               <div class="img"><img src="/uploads/tda.jpg"></div>
               <h1>Магазин ......</h1>
               <h4>Надёжный магазин от ......</h4>
            </div>
            <div class="subcribers">
               <a href="https://www.youtube.com/channel/......" class="button">Канал YouTube</a>

Answer 1

Вы можете вставить svg изображение несколькими способами.

<button id="gooey-button">
    Subscribe
    <span class="bubbles">
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
    </span>
    <img src="file.svg" alt="svg"/>
</button>

Вы можете вписать его непосредственно в верстку
Вы можете создать отдельный файл с svg кодом и подключить через тег img точно так же как обычное изображение png.
или тот же файл подключить на фон для изображения через css

Answer 2

Возможно у вас не получалось, потому что в коде по вашей ссылке используется препроцессор для css под название sass.

Если скомпилировать sass код в css то всё будет работать как надо

Желательно создайте отдельный css файл для подобных стилей, только не забудьте его подключить.
Запишите туда код css, и добавляйте html код кнопки где вам это нужно.

body,
html {
  align-items: center;
  background-color: #000;
  display: flex;
  font-family: "Roboto";
  font-size: 10px;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  top: -4000px;
  left: -4000px;
}

#gooey-button {
  padding: 1rem 1.5rem;
  font-size: 2rem;
  border: none;
  color: #0c1016;
  filter: url("#gooey");
  position: relative;
  background-color: #ff5722;
}

#gooey-button:focus {
  outline: none;
}

#gooey-button .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#gooey-button .bubbles .bubble {
  background-color: #ff5722;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
}

#gooey-button .bubbles .bubble:nth-child(1) {
  left: 15px;
  width: 25px;
  height: 25px;
  animation: move-1 3.02s infinite;
  animation-delay: 0.2s;
}

#gooey-button .bubbles .bubble:nth-child(2) {
  left: 50px;
  width: 25px;
  height: 25px;
  animation: move-2 3.04s infinite;
  animation-delay: 0.4s;
}

#gooey-button .bubbles .bubble:nth-child(3) {
  left: 17px;
  width: 25px;
  height: 25px;
  animation: move-3 3.06s infinite;
  animation-delay: 0.6s;
}

#gooey-button .bubbles .bubble:nth-child(4) {
  left: 40px;
  width: 25px;
  height: 25px;
  animation: move-4 3.08s infinite;
  animation-delay: 0.8s;
}

#gooey-button .bubbles .bubble:nth-child(5) {
  left: 41px;
  width: 25px;
  height: 25px;
  animation: move-5 3.1s infinite;
  animation-delay: 1s;
}

#gooey-button .bubbles .bubble:nth-child(6) {
  left: 36px;
  width: 25px;
  height: 25px;
  animation: move-6 3.12s infinite;
  animation-delay: 1.2s;
}

#gooey-button .bubbles .bubble:nth-child(7) {
  left: 23px;
  width: 25px;
  height: 25px;
  animation: move-7 3.14s infinite;
  animation-delay: 1.4s;
}

#gooey-button .bubbles .bubble:nth-child(8) {
  left: 59px;
  width: 25px;
  height: 25px;
  animation: move-8 3.16s infinite;
  animation-delay: 1.6s;
}

#gooey-button .bubbles .bubble:nth-child(9) {
  left: 84px;
  width: 25px;
  height: 25px;
  animation: move-9 3.18s infinite;
  animation-delay: 1.8s;
}

#gooey-button .bubbles .bubble:nth-child(10) {
  left: 44px;
  width: 25px;
  height: 25px;
  animation: move-10 3.2s infinite;
  animation-delay: 2s;
}

@keyframes move-1 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -60px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-2 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -102px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-3 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -121px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-4 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -114px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-5 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -110px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-6 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -61px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-7 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -51px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-8 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -118px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-9 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -91px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes move-10 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -114px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

<div style="display: grid; gap: 20px">
  Кнопка номер 1
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="gooey">
                <!-- in="sourceGraphic" -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
                <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="highContrastGraphic" />
                <feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop" />
            </filter>
        </defs>
    </svg>

  <button id="gooey-button">
        Subscribe
        <span class="bubbles">
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
        </span>
    </button>
</div>




<div style="display: grid; gap: 20px">
  Кнопка номер 2
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="gooey">
                <!-- in="sourceGraphic" -->
                <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
                <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="highContrastGraphic" />
                <feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop" />
            </filter>
        </defs>
    </svg>

  <button id="gooey-button">
        Subscribe
        <span class="bubbles">
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
            <span class="bubble"></span>
        </span>
    </button>
</div>

Answer 3

Можно так:

Скопировать скомпилированные стили в отдельный файл, подключить в <head></head> ниже остальных стилей (чтобы перебить основные стили для кнопки,возможно надо будет закомментировать стили для html и добавить свой класс тэгу <button>)

скриншот "как скопировать скомпилированный css c codepen"

скриншот "пример где разместить подключение своего файла со стилями (sub.css)"

вставить html-код кнопки в нужном месте на сайте

<div class="subscribe disable-bs-important">

            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                    <filter id="gooey">
                        <!-- in="sourceGraphic" -->
                        <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
                        <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
                                       result="highContrastGraphic"/>
                        <feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop"/>
                    </filter>
                </defs>
            </svg>

            <button id="gooey-button" class="disable-bs-important">
                Subscribe
                 <span class="bubbles">
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                        <span class="bubble"></span>
                </span>
            </button>
</div>

добавить на страницу обработчик нажатия кнопки, что-то типа такого

    <script>
        let sb = document.getElementById("gooey-button");
        sb.addEventListener("click", function (e) {
            window.location = "https://www.youtube.com/watch?v=UehilhnMt5Y";
        });
    </script>

у меня в тестовой среде получилось что-то типа такого:

p.s. есть неплохие сайты по данной теме

сайт1 сайт2 сайт3 сайт4

Answer 4

Похожий вопрос возник и у меня, я получил самый простой ответ от Alexandr_TT:

При добавлении svg изображения с помощью или c помощью CSS свойства background-image вы не только лишаетесь всех преимуществ формата SVG, как-то, - адаптивность, интерактивность, но и не сможете стилизовать своё лого. Изменять цвет SVG можно будет, только с помощью CSS или SVG фильтров. Что не очень удобно.

То есть, при этом способе добавления забудьте об обычных и привычных способах стилизации изображений с помощью правил CSS

Для использования всех преимуществ SVG формата, можно добавлять его инлайн способом, то есть непосредственным копирование в HTML Если есть необходимость добавлять, отдельно лежащий файл SVG, то лучше использовать тег <object>

<object type="image/svg+xml" data="images/test.svg">
    Your  browser does not support SVG
</object>

Далее вызываете иконки по ID

<svg class="inline-svg-icon"> 
<use  xlink:href="test.svg#cloud"></use> 
</svg>

Но не думаю, что такой ответ вам подходит. Как я понял вы не понимаете куда и как вставить svg, вам нужно просто "запихнуть" вашу кнопку в тег <a> блока subcribers, и если вы не используете препроцессор SASS скомпилировать его в CSS, как указал в своем ответе Nikita Kalitin

body,
html {
  align-items: center;
  background-color: #000;
  display: flex;
  font-family: "Roboto";
  font-size: 10px;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

* {
  box-sizing: border-box;
}

.subscribers > a > svg {
  position: absolute;
  top: -4000px;
  left: -4000px;
}

#gooey-button {
  padding: 1rem 1.5rem;
  font-size: 2rem;
  border: none;
  color: #0c1016;
  filter: url("#gooey");
  position: relative;
  background-color: #ff5722;
}
#gooey-button:focus {
  outline: none;
}
#gooey-button .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#gooey-button .bubbles .bubble {
  background-color: #ff5722;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
}
#gooey-button .bubbles .bubble:nth-child(1) {
  left: 36px;
  width: 25px;
  height: 25px;
  animation: move-1 3.02s infinite;
  animation-delay: 0.2s;
}
#gooey-button .bubbles .bubble:nth-child(2) {
  left: 73px;
  width: 25px;
  height: 25px;
  animation: move-2 3.04s infinite;
  animation-delay: 0.4s;
}
#gooey-button .bubbles .bubble:nth-child(3) {
  left: 92px;
  width: 25px;
  height: 25px;
  animation: move-3 3.06s infinite;
  animation-delay: 0.6s;
}
#gooey-button .bubbles .bubble:nth-child(4) {
  left: 22px;
  width: 25px;
  height: 25px;
  animation: move-4 3.08s infinite;
  animation-delay: 0.8s;
}
#gooey-button .bubbles .bubble:nth-child(5) {
  left: 58px;
  width: 25px;
  height: 25px;
  animation: move-5 3.1s infinite;
  animation-delay: 1s;
}
#gooey-button .bubbles .bubble:nth-child(6) {
  left: 76px;
  width: 25px;
  height: 25px;
  animation: move-6 3.12s infinite;
  animation-delay: 1.2s;
}
#gooey-button .bubbles .bubble:nth-child(7) {
  left: 84px;
  width: 25px;
  height: 25px;
  animation: move-7 3.14s infinite;
  animation-delay: 1.4s;
}
#gooey-button .bubbles .bubble:nth-child(8) {
  left: 80px;
  width: 25px;
  height: 25px;
  animation: move-8 3.16s infinite;
  animation-delay: 1.6s;
}
#gooey-button .bubbles .bubble:nth-child(9) {
  left: 67px;
  width: 25px;
  height: 25px;
  animation: move-9 3.18s infinite;
  animation-delay: 1.8s;
}
#gooey-button .bubbles .bubble:nth-child(10) {
  left: 40px;
  width: 25px;
  height: 25px;
  animation: move-10 3.2s infinite;
  animation-delay: 2s;
}

@keyframes move-1 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -54px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-2 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -124px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-3 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -108px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-4 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -130px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-5 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -106px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-6 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -68px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-7 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -56px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-8 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -84px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-9 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -126px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes move-10 {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(0, -81px);
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

<div class="subcribers">
  <a href="https://www.youtube.com/channel/324342jdf" class="button">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="gooey">
          <!-- in="sourceGraphic" -->
          <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
          <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="highContrastGraphic" />
          <feComposite in="SourceGraphic" in2="highContrastGraphic" operator="atop" />
        </filter>
      </defs>
    </svg>
    <button id="gooey-button">
      Канал YouTube
      <span class="bubbles">
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
        <span class="bubble"></span>
      </span>
    </button>
  </a>
</div>

Дополнительно про svg можете почитать в этих источниках:

https://svg-art.ru/?page_id=1047 - про способы добавления svg
https://habr.com/ru/company/htmlacademy/blog/337284/
https://habr.com/ru/post/157087/
https://habr.com/ru/post/450924/
https://habr.com/ru/post/260645/

БЛОГ НА HUSL

Добавление SVG кода в HTML

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