Страницы

Поиск по вопросам

среда, 5 февраля 2020 г.

Почему не работает подключение SVG через тег img

#html #css #svg 


Экспортировал логотип в svg из фотошопа, вот его код:




  

   
      
   
                          







Подключаю к HTML с помощью  



bbbbb




Путь правильный, имя файла тоже, но не отображается на странице


Ответы

Ответ 1


Всё вы сделали правильно, за исключением того, что рисовали svg в растровом редакторе.
 Получается, что вы растровую картинку обернули в формат base64. 
А это на самом деле не чисто векторный формат, поэтому масштабироваться будет, как
картинка png.
 Кроме того такой формат не стилизуется. И если вы захотите поменять цвет иконки,
то через стили это не получится, только применяя фильтры SVG.     

Вывод один,- векторные изображения нужно рисовать в векторных редакторах.  

Я загрузил ваш файл logo.svg на сервер и пробовал добавить его в HTML     



 




Работает в Firefox, Chrome, Opera, IE11, Edge, но стилизация, интерактивность  будет
не доступна.      

Подключайте с помощью тега  работает во всех браузерах:  




   Your browser does not support SVG



Ответ 2


Google Material Icons

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

Во многих случаях можно использовать символьный шрифт svg иконок от Google, состоящий
из 900 иконок.  И ваша иконка андроида тоже есть в этом наборе. 

Подключение и использование шрифта от Google не составит труда 


Подключение шрифта:


 


Выбирать иконки по названиям можно здесь
Пример использования гугловского символьного шрифта:




i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i:hover {
  transform: scale(10);
}

.red{color:red}
.green{color:yellowgreen}
.blue{color: dodgerblue}

android 
android
stars











Автор:



на






















Ярлыки:
,
,
,

















Комментариев нет:















Отправить комментарий

















        
      








Подписаться на:
Комментарии к сообщению (Atom)