/ Адаптивность / Иконки svg

Иконки svg

HIT

Изображения svg дают бОльшую гибкость оформления сайта, чем обычные изображения. По-умолчанию wordpress, в целях безопасности, запрещает загрузку svg файлов. Чтобы разрешить закачивать файлы svg — нужно вставить следующий код в funсtions.php

// Разрешить загрузку svg файлов

function cc_mime_types( $mimes ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

Данная функция не срабатывает, пробовал немного изменить:

function cc_mime_types( $mime_types ){
    $mime_types['svg'] = 'image/svg+xml';
    return $mime_types;
}
add_filter( 'upload_mimes', 'cc_mime_types', 1, 1 );

Результат тот же. Плагины SVG Support (200 000) не справился, а вот Safe SVG (100 000) дал возможность загружать svg. Что примечательно настроек у плагина вовсе нет.

Сервисы по подбору иконок

Клоны svg

Недавно столкнулся с технологией, когда мы подгружаем на сайт svg с несколькими объектами внутри, а в верстке вызываем копии объектов. Пример:

<svg style="display: none">
<symbol id="circle" viewBox="0 0 76 76"><g><path id="Up_Arrow" d="M55.9,45.4c-0.8,0.8-2,0.8-2.8,0L38.4,30.7L22.9,46.2c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8L37,26.5	c0.8-0.8,2.1-0.8,2.8,0l16.1,16.1C56.7,43.4,56.7,44.6,55.9,45.4z M76,38c0,21-17,38-38,38S0,59,0,38S17,0,38,0S76,17,76,38z M72,38C72,19.2,56.7,4,38,4C19.2,4,4,19.2,4,38s15.2,34,34,34C56.7,72,72,56.8,72,38z"/></g></symbol>
<symbol id="triangle"</strong> viewBox="0 0 294.951 294.951"><g><path d="m147.475,103.102c-5.22,0-8.701,3.48-8.701,8.701v62.644c0,5.22 3.48,8.701 8.701,8.701 5.22,0 8.701-3.48 8.701-8.701v-62.644c0-5.221-3.481-8.701-8.701-8.701z"/><path d="m152.695,212.73c-3.48-3.48-8.701-3.48-12.181,0-1.74,1.74-1.74,5.22-1.74,6.96 0,3.48 0,5.22 1.74,6.96 1.74,1.74 5.22,1.74 6.96,1.74 1.74,0 5.22,0 3.48-1.74 1.74-1.74 3.48-5.22 3.48-6.96 0.002-3.48 0.002-5.22-1.739-6.96z"/><path d="m288.425,214.47l-102.667-179.232c-6.96-13.921-22.621-22.621-38.283-22.621-15.661,0-29.582,8.701-38.283,22.621l-102.667,179.232c-8.701,13.921-8.701,31.322-5.32907e-15,45.243 6.96,13.921 22.621,22.621 38.283,22.621h205.334c17.401,0 31.322-8.701 38.283-22.621 8.701-13.921 8.701-31.322 0-45.243zm-13.921,38.283c-3.48,8.701-12.181,13.921-22.621,13.921h-207.075c-8.701,0-17.401-5.22-22.621-13.921-5.22-8.701-5.22-19.141 0-27.842l102.667-179.233c3.48-8.701 12.181-13.921 22.621-13.921 10.441,0 19.141,5.22 24.362,13.921l102.667,179.232c5.221,8.701 5.221,19.142 0,27.843z"/></g></symbol>
</svg>

Выводим иконки svg

<div class="item_icon">
	<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
	<use xlink:href="#circle"/></use>
	</svg>
</div>
	
<div class="item_icon">
	<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon">
	<use xlink:href="#triangle"/></use>
	</svg>
</div>

Чтобы SVG был не конкретного размера, а растягивался на ширину контейнера нужно у оригинала svg прописать высоту и ширину:

<svg id="logo-svg" width="100%" height="100%"

CSS

.item_icon {
    display: inline-block;
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #47341b;
  transition: all 0.3s ease;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s ease 0s;	
}

.svg-icon {
    display: inline-block;
    margin: 0;
    width: 100px;
    height: 100px;
	fill: #47341b;
  transition: all 0.3s ease;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s ease 0s;	
}

.item_icon:hover {
	background: #8BC34A;
	border-color: #8BC34A;
	transform: scale(1.1);
    box-shadow: 0 20px 50px rgba(65,49,27,0.5);	
}

.item_icon:hover svg {fill: #fff;}

HTML

<a href="/"><svg width="50px" height="50px" viewBox="0 0 50 50">
  
 <defs>
  <style type="text/css">
	
	.fil0 {fill:coral; transition:fill 0.2s linear;}
	.fil0:hover {fill:yellow; stroke:red;}
	.fil1 {fill:green; transition:fill 0.2s linear;}
	.fil1:hover {fill:blue; stroke:white;}

  </style>
 </defs>
  
  <g id="icon1">
   <rect class="fil0" x="0" y="0" width="50" height="50"/>
   <rect class="fil1" x="15" y="15" width="20" height="20"/>
   
 </g>
  
</svg></a>

Примеры

Корректность отображения SVG

Делать SVG лучше в Illustrator, Corel увеличивает viewBox в 1000 раз. И из-за этого SVG не корректно отображаются в Firefox и Safari. Значение viewBox должно быть адекватным, примерно таким:

viewBox="0 0 1000 493"

Вывод иконок svg из общего файла svg

Способ похож на аналогичный описанный выше, но в каком-то плане еще проще. Загружаем в медиабиблиотеку или в файлы сайта svg (sprite.svg) с набором иконок, пример:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="marker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256,0C150.112,0,64,86.112,64,192c0,133.088,173.312,307.936,180.672,315.328C247.808,510.432,251.904,512,256,512s8.192-1.568,11.328-4.672C274.688,499.936,448,325.088,448,192C448,86.112,361.888,0,256,0z M256,472.864C217.792,431.968,96,293.664,96,192c0-88.224,71.776-160,160-160s160,71.776,160,160C416,293.568,294.208,431.968,256,472.864z"/><path d="M256,96c-52.928,0-96,43.072-96,96s43.072,96,96,96c52.928,0,96-43.072,96-96C352,139.072,308.928,96,256,96z M256,256c-35.296,0-64-28.704-64-64s28.704-64,64-64s64,28.704,64,64S291.296,256,256,256z"/></symbol>
<symbol id="phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 473.806 473.806"><path d="M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1C420.456,377.706,420.456,388.206,410.256,398.806z"/><path d="M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11S248.656,111.506,256.056,112.706z"/><path d="M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z"/></symbol>
</svg>

И подключаем их таким образом:

<svg class="user"><use xlink:href="/wp-content/uploads/2022/02/sprite.svg#marker"></use></svg>

При этом иконки можно окрашивать стилями css.

Изменение иконки SVG

Изменение иконки меню

<div class="menu-btn"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="#000">
	<path d="M0 6h50v5H0V0z"></path>
	<path d="M0 26h50v5H0v-4z"></path>
	<path d="M0 44h50v5H0v-4z"></path>
</svg></div>

Интересный способ открытия меню с присвоением атрибутов тегу html

$('.menu-btn').on('click', function(){
	
	var value = $('html').attr('menu');
	
	if ( value == 'close' ) {
		$('html').attr('menu','open');
		$('html').attr('overlay','open');
	} else {
		$('html').attr('menu','close');
		$('html').attr('overlay','close');			
	}
});

Стили при открытии меню

.menu-btn path {
    -webkit-transform: none;
    transform: none;
    will-change: transform;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
}

[menu=open] .menu-btn path:first-child {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

[menu=open] .menu-btn path:last-child {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Иконки svg
Вложение файла при отправке формы
Рекомендации для васВложение файла при отправке формыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.