Не появляется иконка svg

183

21 июня 2019, 04:00

Не отображается иконка в svg формате. Прописал так:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve"> 
	<symbol> 
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0 
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096 
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476 
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/> 
  </symbol> 
</svg> 
 
 
<div class="modalRecall__close"> 
  <svg> 
    <use xlink:href="#Capa_1" class="capa_1"/> 
  </svg> 
</div>

Файл close.svg - это одна единственная иконка, не спрайт. Всё уже перепробовал. ПО id помоему определение делаю - это уже лишнее? Через стили появляется, бекграундом.

А мне нужно именно через разметку выводить её. В мозилле стала отображаться, а в остальных браузерах нет(

В инспекторе смотрю DOM - различий нет абсолютно в разных браузерах, но иконки появляются лишь в firefox.

Chrome пишет: Error: attribute width: Expected length, "auto". Хотя width="auto" и стоит.

Answer 1

Код добавления svg иконки в HTML у вас абсолютно верный для случая, когда изображение svg сохранено в отдельный файл и находится в папке или на сетевом ресурсе с указанием естественно полного URL

<div> 
  <object type="image/svg+xml" data="images/check.svg" class="icon-after"></object> 
  <svg id="iconsvg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.626 511.627" xml:space="preserve"> 
    <use xlink:href="img/check.svg#iconsvg1"/> 
  </svg> 
</div>

Без кода иконки, а в ней часто бывают причины отказа, догадаться трудно, почему её не видно.

Поэтому только предположения:

В браузере Chrome при запуске кода на localhost иконки не будет видно при добавлении с помощью <object>, только в сетевом размещении иконки работают. Либо локально тестируйте в Firefox у него иконку будет видно.
Если со стилями непорядок,- иконка не будет видна.
С масштабированием, позиционированием, что-то не так. viewBox="0 0 511.626 511.627" Иконка может находиться за пределами области видимости.

update 19.12.2018

Попробуйте добавить иконку svg самым надёжным способом - инлайн, то есть непосредственно в Html разметку.

Код иконки, исключая шапку, нужно обернуть тегами <symbol id="facebook">...</symbol> которые скроют содержание иконки до её вызова командой <use> и полностью скопировать код иконки в HTML
Теперь в любом месте HTML можно многократно вызвать иконку

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.626 511.627" > <use xlink:href="#facebook" width="100%" height="100%"/> </svg>

Update 21.12.2018

Теперь с кодом стали понятны причины

У вас код иконки обернут тегами <symbol>, которые скрывают содержание Вызов содержания должен идти не через id svg, а через id <symbol id="Capa_1">

(Присвойте ID <symbol="Capa_1">, а у SVG уберите)

.container { 
width:25%; 
height:25%; 
}

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve"> 
	<symbol id="Capa_1"> 
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0 
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096 
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476 
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/> 
  </symbol>    
   
   <use xlink:href="#Capa_1" /> 
   
</svg>  
 
</div>

Добавление SVG (инлайн способ) непосредственно в HTML без тегов <symbol>

.container { 
width:25%; 
height:25%; 
}

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve"> 
	 
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0 
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096 
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476 
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/> 
  
   
</svg>  
 
</div>