Страницы

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

вторник, 24 декабря 2019 г.

Каким способом лучше добавлять SVG код в HTML

#html #css #svg 


Есть например вот такой svg:








Как лучше поступать, когда иконке при наведении нужно поменять цвет?
Вставлять стену кода и описывать, как обычный html-элемент или например, - задавать
какому-нибудь span'у в различных состояниях разные svg на задний фон?Или же есть какие-то
другие способы?


Ответы

Ответ 1


Если код svg небольшой, то проще всего вставлять его в HTML инлайн. В
этом случае можно стилизовать иконки или непосредственно в SVG
коде fill="purple" stroke="red" или стилизовать, как обычно через
CSS. 
Если кода svg много и он часто повторяется, то конечно его лучше
вынести в отдельный файл *.svg и подключать его к HTML с помощью
background или  или   
При выборе способа подключения нужно определиться какую роль играет
svg.   Если используется как картинка или фон, то background или
  Если нужна анимация, то подключать нужно через 
Спрайты с наборами иконок, тоже нужно добавлять в разметку HTML   с
помощью  c многократным использованием 


Другие способы подключения их достоинства и недостатки можно посмотреть здесь

Пока опыта работы с SVG маловато, лучше использовать инлайн способ. Так как при других
способах подключения возникает много нюансов.



path {
fill:silver;
transition: fill 0.4s;
}
path:hover {
fill:dodgerblue;

}



   

Пример добавления социальных иконок со ссылками



a path {
  fill:var(--c,#444142);
  stroke:none;
  pointer-events:all;
  transition:0.5s;
}
a circle {
  fill:none;
  stroke:var(--c,#444142);
  pointer-events:all;
  stroke-width: 1;
  transition:0.5s;
}


.fb__icon:hover { --c:#3c589a; } 
.t__icon:hover  { --c:#68acd2; }  
.g__icon:hover { --c:#d54133; } 
.yt__icon:hover { --c:#e72c2e; } 

  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  





Источник











Автор:



на






















Ярлыки:
,
,
,

















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















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

















        
      








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