С помощью какого тега лучше всего добавлять svg

Question

Также хотелось бы уточнить, если логотипа нет в svg, то что использовать как альтернативу?

Answer 1

Лучше всего в теге img (если речь о логотипе), потому что 1) так он будет кэшироваться как отдельный ресурс на разных страницах сайта, и 2) к отдельным элементам логотипа вряд ли нужен доступ, и использовать тег svg поэтому не обязательно.

Img потом можно обернуть в ссылку <a href="/">...</a>, чтобы с других страниц сайта был переход на главную страницу кликом по логотипу.

Также у этой ссылки можно прописать логотип фоном background: url(...) no-repeat вместо тега картинки внутри.

Если нет лого в формате svg, то для лого обычно используют png.

Answer 2

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

То есть, при этом способе добавления <img src="https://"> забудьте об обычных и привычных способах стилизации изображений с помощью правил CSS

Зачем тогда SVG формат, проще добавить PNG картинку

Для использования всех преимуществ 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>

Answer 3

Добавление примеров по комментариям

@Pavel Grishaev
у svg очень много применений, и лучший способ в каждой ситуации разный. Например инлайновый svg не кэшируется, а object не может быть фоном элемента

Согласен, в каждом конкретном проекте нужно выбирать наиболее оптимальный вариант добавления SVG в HTML страничку

Вот наиболее распространенные способы добавления SVG

@Leks

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

это как?

Инлайн способ

.container {
width:7vw;
height: auto;
}

<div class="container">
<svg  viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg> 
</div>

<img>

Сохраняем код в файл *.svg и вызываем его

<img src="https://svg-art.ru/files/menubutton.svg" />

Пример стилизации SVG, добавленного с помощью тега <img>

с помощью CSS фильтров

.twa-arrow {
  background-image: url("https://twemoji.maxcdn.com/svg/1f500.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

<body>
  <span class="twa-arrow"></span>
  <span class="twa-arrow grey-out"></span>
  <span class="twa-arrow hue-rotate"></span>
  <span class="twa-arrow invert"></span>
</body>

SVG фильтры

.icon {
width:25vw; 
filter:url(#solid);
}
.icon:hover {
filter:url(#solid2);
}

<div class="container">
 <img class="icon" src="https://image.flaticon.com/icons/svg/32/32441.svg">
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1" height="1" > 

	<defs>
   <filter id="solid" x="0" y="0" width="1" height="1" >
     <feFlood result="flood" flood-color="dodgerblue" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter> 
    <!-- Фильтр работает при наведении-->
   <filter id="solid2" x="0" y="0" width="1" height="1" >
     <feFlood result="flood" flood-color="crimson" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter>
    
     </defs>
  
</svg>

БЛОГ НА HUSL

С помощью какого тега лучше всего добавлять svg

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