Почему не отображается SVG, добавленное с помощью тега <img>

#html #css #css3 #svg #анимация

Это код svg-ки, у меня она названа как 3.svg.








так ее вставляю в html страницу.







Если вставлять код svg, то все отображается, а если другим способом, то что-то не
хочет, в чем может быть дело? 
    

Ответы

Ответ 1

Лучше не брать svg изображения формата base64 по многим причинам:


Это не 100% svg, а формат png обернутый в оболочку svg, поэтому не
будет адаптивности, которую ожидаем от формата SVG 
Изображение не будет стилизоваться (менять цвет)  
Посмотрите, как выглядит ваша иконка при небольшом увеличении


  

Проще скачать нужную иконку в формате svg с любого векторного клипарта

Я взял иконку user  

На первых порах освоения svg добавляйте иконки инлайн, то есть непосредственным копированием
кода в HTML 






  

Теперь легко применить стили из внешней css, к нашей иконке, например при наведении.
(не забудьте удалить стили внутри svg, чтобы они не мешали)



#icon {
fill:black;
stroke:black;
transition: .5s ease-out all;
}
#icon:hover {
fill:skyblue;
stroke:dodgerblue;

}





Чтобы сделать иконку адаптивной

Необходимо убрать width="70",  height="70" из шапки svg файла. Обернуть иконку в
контейнер  и задать в процентах ширину и высоту контейнера  



.container {
width:10%;
height:10%;
}
#icon {
fill:black;
stroke:black;
transition: .5s ease-out all;
}
#icon:hover {
fill:skyblue;
stroke:dodgerblue;

}