Фон svg: Как svg изображению задать фон? Как применить z-index к ::before и ::after? — Хабр Q&A

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

Как изменить цвет svg (заливка) на основе текущего цвета фона? Мы знаем, что это работает для текста: https://css-tricks.com/reverse-text-color-mix-blend-mode / Так можно ли как-то сделать это для…

Я хотел бы изменить фон tabwidget в показанном на следующем изображении: Я хотел бы использовать другой цвет фона и изменить цвет шрифта на выбранную вкладку. Как я могу это сделать?

У меня есть фильтр размером 150 на 150 при использовании imagesc для построения фильтра фон зеленый minValue = -1.5; maxValue = +1.5; Индекс RGB нулей на изображении (зеленый цвет) равен 0.5,1,0.5 Я…

Я хочу изменить цвет фона среднего TabBarItem. На этом изображении выбрана главная страница, а средняя вкладка не выбрана.

У меня есть canvas & с помощью fabric js, при нажатии кнопки bg_img одно прозрачное изображение svg установлено на canvas в качестве фонового изображения успешно, также я могу легко изменить…

Я использовал иконки из проекта существительное. Мне нужно изменить цвет фона, а также его цвет. (измените цвет фона на ‘black’ и измените цвет изображения на белый. Есть ли там какой-нибудь css….

Я изо всех сил пытаюсь изменить цвет объекта svg с помощью css (svg в качестве фона css). У меня есть это span { display:block; width: 12px; background: url(‘data:image/svg+xml;utf-8,<?xml…

Как я могу изменить цвет фона svg места в элементе объекта html. Использование CSS ,Jquery или Javascript мое изображение svg собрано из расширенного источника в статическом файле django html. ..

Я пытаюсь изменить цвет фона отключенного текстового поля, но мобильная версия выглядит немного странно, есть идеи, какое свойство делает этот цвет? Смотрите первое изображение, я хотел бы иметь…

изображения — Растровая картинка как фон для path в SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
      <pattern patternUnits="userSpaceOnUse">
        <image x="0" y="0"   xlink:href="http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/10/Polygonal_Textures_2.jpg"></image>
      </pattern>
    </defs>
  
   <path fill="url(#image)" 
         
         d="M10.346,25.633c1.329-0.332,3.136-0.784,6.303-0.868c-0.087-0.175-0.167-0.356-0.237-0.543 c-1.232-0.01-5.027,0.165-6.327,0.486c-0.007,0.002-0.015,0.003-0.023,0.003c-0.043,0-0.083-0.03-0.094-0.074 c-0. 012-0.051,0.019-0.104,0.072-0.118c1.288-0.318,4.991-0.495,6.302-0.491c-0.295-0.869-0.425-1.863-0.425-2.973 c0-1.973,0.614-2.716,1.439-3.767c-0.631-2.248,0.226-3.784,0.226-3.784s1.326-0.275,3.833,1.52c1.359-0.582,4.98-0.63,6.694-0.129 c1.053-0.695,2.977-1.682,3.753-1.406c0.209,0.338,0.662,1.325,0.274,3.493c0.264,0.475,1.633,1.488,1.639,4.35 c-0.022,1.056-0.132,1.947-0.335,2.701c3.268-0.028,5.19,0.242,6.515,0.486c0.053,0.011,0.087,0.061,0.078,0.113 c-0.01,0.047-0.051,0.08-0.096,0.08c-0.006,0-0.012-0.001-0.019-0.001c-1.321-0.245-3.248-0.513-6.535-0.483 c-0.058,0.191-0.122,0.373-0.192,0.546c1.12,0.037,4.192,0.157,6.698,0.923c0.052,0.017,0.08,0.07,0.064,0.123 c-0.013,0.041-0.052,0.067-0.093,0.067c-0.009,0-0.019-0.001-0.028-0.005c-2.541-0.776-5.68-0.882-6.725-0.917 c-0.908,1.997-2.772,2.742-5.785,3.051c0.977,0.615,1.257,1.387,1.257,3.472c0,2.087-0.029,2.367-0.022,2.847 c0.011,0.787,1.164,1.164,1.121,1.417s-0.964,0.213-1.396,0.062c-1.222-0.425-1.099-1.44-1.099-1.44l-0.042-2.79 c0,0,0.085-1.502-0. 471-1.502c0,0.303,0,3.487,0,4.566c0,0.991,0.694,1.294,0.694,1.66c0,0.631-1.269-0.06-1.659-0.453 c-0.596-0.598-0.528-1.867-0.513-2.87c0.013-0.97-0.009-3.089-0.009-3.089L24.779,29.9c0,0,0.166,4.631-0.213,5.475 c-0.491,1.083-1.97,1.455-1.97,0.962c0-0.332,0.365-0.226,0.566-0.97c0.172-0.633,0.114-5.354,0.114-5.354s-0.475,0.28-0.475,1.165 c0,0.404-0.011,2.716-0.011,3.404c0,0.865-1.229,1.357-1.82,1.357c-0.298,0-0.671-0.015-0.671-0.174 c0-0.399,1.124-0.634,1.124-1.467c0-0.722-0.016-2.579-0.016-2.579s-0.566,0.097-1.375,0.097c-2.038,0-2.682-1.3-2.988-2.027 c-0.399-0.948-0.917-1.393-1.467-1.749c-0.337-0.219-0.415-0.477-0.024-0.55c1.804-0.34,2.265,2.046,3.469,2.426 c0.86,0.271,1.965,0.154,2.515-0.201c0.073-0.729,0.598-1.36,1.035-1.69c-3.063-0.294-4.88-1.359-5.821-3.069 c-3.205,0.077-5.023,0.532-6.357,0.865c-0.097,0.024-0.192,0.048-0.283,0.071c-0.008,0.002-0.016,0.002-0.024,0.002 c-0.043,0-0.083-0.029-0.094-0.073c-0.013-0.052,0.02-0.104,0.071-0.118C10.155,25.681,10.25,25.658,10.346,25.633z"/>
</svg>

Возможности оформления SVG • Про CSS

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

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

Из всех способов вставки SVG для этого подходят всего два: иконочный шрифт или инлайновый SVG в HTML (удобнее всего делать это через use).

Какие стили оформления можно использовать для иконочных шрифтов? Можно задать цвет, добавить тени и анимацию:

Не так уж и много, по сравнению с возможностями обычного SVG.

Для SVG-изображений можно использовать SVG-градиенты и фильтры, например, размытие или тени. Также можно использовать в качестве обводки и заливки паттерны и изображения, а ещё можно красить отдельные части картинок и таким образом получать разноцветные иконки.

При вставке SVG через use иконки становятся доступны для стилей страницы, и всеми этими прекрасными возможностями можно управлять через внешний CSS.

Вот пример иконок с паттернами в качестве фона:

Пример немного диковат, но он хорошо показывает, что фоном может быть любая картинка. Паттерны заданы в коде страницы и подключены с помощью CSS.

Вот код деревянного паттерна:

<pattern
  patternUnits="userSpaceOnUse">
  
  <image xlink:href="//img-fotki.yandex.ru/get/6447/5091629.86/0_74298_17a84446_L.jpg"
 >
</pattern>

В паттерн можно класть всё что угодно: комбинации фигур, объекты с градиентами, текст… Правда, есть подозрение, что сложные фоны могут плохо влиять на производительность страницы, но тестов не делала.

Подключаем паттерн:

.icons--wood {
  fill: url(#wood);
}

Чтобы при наведении менять местами обводку и заливку, нужно добавить ещё пару строчек:

.icons--wood {
  fill: url(#wood);
}
.icons--wood .icon:hover {
  fill: none;
  stroke: url(#wood);
}

Также можно делать интересные эффекты на основе обводки:

Обводки могут быть пунктирными, для них можно использовать градиент или паттерн.

.icons--stroke .icon {
  stroke: rgba(0, 0, 0, .5);
  stroke-width: 2;

  &:hover {
    stroke: skyblue;
  }
}


.icons--dasharray .icon {
  stroke: rgba(0, 0, 0, .5);
  stroke-width: 2;
  stroke-dasharray: 10 5;
  fill: rgba(0, 0, 0, .1);

  &:hover {
    stroke-dasharray: 10 0;
  }
}


.icons--gradient .icon {
  stroke-width: 3;
  stroke: url(#stripes);
}

Иконкам в последней строке в качестве обводки задан градиент, уходящий в прозрачность, почему-то не работает в последней опере.

С анимацией пуктирной обводки можно делать интересные штуки:

Нажмите Rerun если демо застыло.

Не уверена, что эта анимация подходит для иконок (будет не очень хорошо, если иконки будут шевелиться или исчезать), но она может быть использована для эффектно появляющихся иллюстраций.

Примерный код:

path {
  fill: none;
  
  stroke: url(#stripes);
  stroke-width: 2;
  
  stroke-dasharray: 550 0;
  animation: dasharray 5s infinite alternate;
}

@keyframes dasharray {
  100% {
  	
    stroke-dasharray: 0 500;
  }
}

Следующий пример демонстрирует иконки с SVG-фильтрами:

Размытие, тень, повторяющийся контур и внутренняя тень (её не очень хорошо видно).

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

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

UPD от 19 мая 2014: фильтры хорошо выглядят на ретине, при условии, что они задаются SVG-элементам, а не HTML. Прошу прощения за неточность.

В примере ниже SVG-изображение разделено на несколько путей, что дает возможность обращаться к ним поотдельности. Здесь это используется чтобы задать элементам разные цвета и задержки анимации. При этом в дальнейшем фигура (в данном случае это группа путей) может быть использована целиком — таким образом можно получить не только монохромные иконки, но и разноцветные. Правда, при вставке такого объекта через use в нем перестанет работать анимация, но раскраска сохранится.

В качестве заливки (или обводки) SVG-элементов удобно использовать сurrentColor. Это ключевое слово, обозначающее текущий цвет текста, и если задать его в качестве заливки (обводки) — элемент будет краситься вместе с окружающим текстом.

Задаем заливку:

.icon {
  fill: currentColor;
}

Если потом для родительского элемента задать цвет текста

фигура зальется этим же цветом. Очень удобно для ссылок по наведению и для страниц с несколькими темами оформления.

Пример:

Интересно, что в SVG можно использовать далеко не все CSS-свойства, относительно полный список можно найти вот тут. Можно использовать animation, но transition работает странно и не во всех браузерах. CSS-градиенты использовать, к сожалению, нельзя. Трансформации работают.

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

Из всего вышеизложенного можно сделать следующие выводы:

• самые широкие возможности для оформления дает инлайновый SVG;
• меньше возможностей, но более удобное подключение на страницу предоставляет иконочный шрифт. Существенный минус состоит в проблемах с поддержкой встраиваемых шрифтов в разных браузерах;
• если SVG-графика нужна только в одном стиле и нет необходимости управления через внешний CSS — лучше всего воспользоваться спрайтом.

Иконки «Svg» — скачивайте бесплатно в PNG, SVG, GIF

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Вектор

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Сердце Pokemon

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Анимированные

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Анимированные

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Half Heart

+ В коллекцию

Разбитое сердце

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Разбитое сердце

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Семинольский головной убор

+ В коллекцию

Разбитое сердце

+ В коллекцию

Разбитое сердце

+ В коллекцию

Формат SVG: особенности, преимущества и недостатки.

Сегодня речь пойдет о формате векторной графики SVG. Что такое векторная графика и чем отличается от растра можно посмотреть тут.

SVG — XML язык разметки на основе векторной графики. По сути это текстовый файл, который является открытым веб-стандартом для описания двухмерных векторных изображений без потери качества при масштабировании. Также поддерживает интерактивность и анимацию. Разрабатывается с 1999 года и используется для того, чтобы описать с помощью языка программирования графические элементы сайта.

Акроним: Scalable Vector Graphics.

Тип изображения: векторный. 

Тип сжатия: обычно не сжимается, но может быть сжат без потерь.

Особенности формата .

Формат SVG мы упоминали в этой статье, теперь разберем его особенности более подробно:

• размер SVG-файла не зависит от размера или глубины цвета. На вес влияет сложность точек и линий, с которых состоит изображение;
• во время масштабирования не теряет информацию, поэтому заменяет собой несколько вариантов растровых файлов для разных разрешений экрана;
• подходит для печати и индексации поисковыми системами;
• может быть встроен в html-код сайта, а значит, кешируется вместе с ним и загружается быстрее, чем изображения в .png или .jpeg.

Преимущества и недостатки формата .svg 

Плюсы:

• масштабируемость без изменения качества — один и тот же логотип будет хорошо выглядеть и на экране смартфона, и на большом экране Retina;
• простота создания: программисты пишут иконки с помощью xml-кода, веб-дизайнеры рисуют более сложные элементы в редакторах векторной графики Adobe Illustrator, Corel Draw, Sketch или Macromedia Freehand;
• малый размер: объекты . svg занимают гораздо меньше места, чем их близнецы, созданные как объекты растровой графики;
• гибкость: при помощи CSS можно изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице, а при помощи javascript задать анимацию элементов. Также можно отредактировать SVG-файл в графическом редакторе;
• четкая прорисовка деталей и лучший результат печати.

Минусы:

• не поддерживается старыми браузерами — Internet Explorer 8 и старше; 
• WordPress воспринимает .svg как вредоносный код, поэтому блокирует отображение. Обойти блокировку можно с помощью плагинов;
• подходит для создания примитивных объектов, которые могут быть описаны простыми фигурами или их частями: окружность, прямая, эллипс, прямоугольник и т.д.

Где использовать?

Обычно .svg используют в дизайне иконок, логотипов и элементов пользовательского интерфейса для веб-сайтов. Но область применения этого формата намного больше. С его помощью можно создавать графики и диаграммы, простую инфографику, масштабируемые дорожные карты, легкие игры вроде судоку или кроссвордов.

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

Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.

Описание и примеры стандартных функций SVG

Доминирующей причиной появления этого блога стало незаслуженное забвение на целых десять лет языка разметки масштабируемой векторной графики – SVG (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Анимация и интерактивность SVG.

Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
То есть всё находится в одном месте, внутри документа SVG, поэтому нет необходимости для подключения внешних библиотек.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Следующий пример анимации – плавная отрисовка картинки с нуля до полного изображения.

Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3.js, BonsaiJS, Svg.js, Snapsvg.js

Еще примеры анимации ⇛

Недостатки SVG формата

• С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
• Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
• В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
  Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.

UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛

SVG + CSS переменные. Делаем простое сложно | by Vladimir Shebarshov | Mad Devs — блог об IT

Всем привет. Это статья из разряда: “Решаем простые задачи сложным способом”, или “Для тех, кто не ищет легких путей”. Хотел бы уточнить заранее, что это не “Самое лучшее решение проблемы”, а всего лишь то, до чего я смог дойти исходя из собственного опыта. Поискав в интернете способы использования SVG и их изменения при помощи CSS переменных, вы точно наткнетесь на множество решений, но здесь хочу описать проблему, с которой столкнулся я. Задача в том, что необходимо добавлять на страницу SVG элементы при помощи CSS свойства background и менять их при помощи переменных CSS. Поехали!

Для начала хорошо было бы понять, что такое SVG и CSS variables:

SVG или Scalable Vector Graphics — язык разметки масштабируемой векторной графики, наиболее часто используемый для отображения иконок или небольших изображений на странице. Его прелесть в том, что по сути это набор координат, которые могут изменять размеры, не теряя четкости отображения.

CSS variables или пользовательские свойства — это объекты, содержащие конкретные значения, которые можно повторно использовать в документе. Отличный способ упрощения написания свойств для повторяющихся элементов в коде и да, их можно писать прямо в CSS без препроцессоров. Это ли не чудо!?

Вернемся к теме этой статьи. Есть задача: разместить все SVG иконки на странице в CSS и использовать их в дальнейшем как классы к блокам, а цвета для них задать через CSS переменные.
На мой взгляд, есть несколько способов реализации этой задачи:

• Использовать иконочные шрифты и задать SVG иконки через них;
• Добавить изображения, используя популярное CSS свойство background;
• Отказаться от добавления иконок в CSS и разместить их прямо внутри HTML код страницы;

Каждый из выбранных подходов так или иначе имеет возможность работы с CSS переменными. Для шрифтов и SVG, вставленных прямо в HTML, добавить переменные в значение цвета не вызовет сложности, но при использовании иконок, вставленных через background, возникают проблемы. В свойстве background, SVG имеет вид строки добавленной через URL и все, что внутри него не проходит обработку, а только отображается “напрямую”. К примеру, можно добавить значение цвета в виде HEX к атрибуту Fill и этот способ будет работать, но если прописать это же значение, используя CSS переменные — их значение не будет применено. Именно на решении этой проблемы я бы хотел остановиться.

Добавить SVG, используя свойство background очень просто. Пример подобного решения можно посмотреть тут:

При использовании этого подхода необходимо обратить внимание на:

1. Кавычки внутри тега background-image и кавычки внутри SVG должны отличаться.
2. Для добавления цвета лучше использовать значения в RGB(A), HSL(A) или названия цвета (например: red). Если нужно использовать цвет в HEX, то необходимо заменить # на %23, так как хеш-символ в URL-адресе зарезервирован для обозначения начала идентификатора фрагмента.
3. Можно добавить стили для самой SVG в атрибуту styles.

Явным плюсом этого подхода, на мой взгляд, является то, что можно продолжить изменять background так как захочется — даже добавить анимацию.

Добавление CSS переменных сводится к двум простым шагам — объявить ее и применить в нужном месте. В примере выше это выглядит так:

Здесь видно, что значения внутри переменных применяются для свойства background-color, но игнорируются для атрибута fill. Использование атрибута style внутри SVG также не принесет результатов.

Для того, чтобы продолжить использовать CSS переменные можно воспользоваться достаточно новым свойством — mask. Это CSS-свойство скрывает элемент (частично или полностью), маскируя или обрезая изображение в определенных точках, а это именно то, что нам нужно. Цвет для этого свойства определяется отдельно при помощи дополнительного свойства background-color, куда можно передать любой цвет, в том числе определенный при помощи переменной. Пример с использованием той же SVG:

При этом остаются все возможности, что были при использовании свойства background. Обратите внимание, что свойства атрибута Fill не учитываются при применении цвета заливки.

К сожалению, у этого свойства плохая поддержка браузеров Internet Explorer всех версий. Если вам необходимо поддерживать браузеры Internet Explorer, то лучше отказаться от этого способа в сторону добавления SVG инлайн и применения для него переменных.
Также для применения этого свойства в Chrome необходимо добавить префиксы.
Еще одним минусом этого подхода будет то, что он применим к одноцветным иконкам, по причине того, что используется свойство изменения фона.

Тут можно посмотреть на пример использования свойств background и mask в связке с CSS переменными:

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

Подписаться | SVG-фоны

Общие вопросы

Почему SVGBackgrounds.com?

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

Почему я должен использовать SVG?

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

Что входит в платные планы?

включают доступ к нашей премиальной фоновой коллекции и лицензию на использование фонов без указания авторства. Доступ ко всей коллекции предоставляется ежемесячным подписчикам сверхурочно, а годовые подписчики получают мгновенный доступ ко всем 200 фоновым изображениям.Ежемесячные подписчики получают 20 новых фонов за каждый платежный цикл, пока их коллекция не достигнет в общей сложности 200 фонов. Одиночные лицензии не считаются платным планом и не получают доступа к премиум-коллекции.

Где я могу использовать фоны?

Наши фоны можно использовать в качестве фона где угодно, включая веб-сайты, блоги, графику в социальных сетях, листовки, брошюры и т. Д., При условии, что фоны не распространяются повторно, а файлы изображений не распространяются или не продаются.Например, вы не можете включать наши фоны для загрузки на веб-сайты, предлагающие бесплатные или платные стоковые фотографии. Полную лицензию можно посмотреть здесь. Пожалуйста, не стесняйтесь обращаться к нам, чтобы запросить разъяснения по конкретным проектам.

Есть ли ограничения на количество используемых фонов?

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

Масштабирование фона SVG — CSS: каскадные таблицы стилей

Учитывая гибкость изображений SVG, нужно о многом помнить при их использовании в качестве фоновых изображений со свойством background-image , и даже больше, что нужно учитывать при их масштабировании с помощью свойства background-size .В этой статье описывается, как выполняется масштабирование изображений SVG при использовании этих свойств.

По большей части алгоритм можно описать этими четырьмя правилами. Есть некоторые крайние случаи, на которые не распространяются эти правила, но они охватывают большинство случаев.

1. Если background-size задает фиксированное измерение (то есть проценты и относительные единицы фиксируются их контекстом), это измерение выигрывает.
2. Если изображение имеет внутреннее соотношение (то есть его отношение ширины к высоте является постоянным, например 16: 9, 4: 3, 2.39: 1, 1: 1 и т. Д.), Размер визуализации сохраняет это соотношение.
3. Если изображение указывает размер, и размер не изменяется ограничением или обложкой, этот указанный размер выигрывает.
4. Если ни один из вышеперечисленных случаев не соблюден, изображение визуализируется с тем же размером, что и фоновая область.

Стоит отметить, что алгоритм изменения размера учитывает только размеры и пропорции изображения или их отсутствие. Изображение SVG с фиксированными размерами будет обрабатываться так же, как растровое изображение того же размера.

Примечание

Если вы пытаетесь растянуть свой SVG до другого соотношения сторон с помощью CSS — например, чтобы растянуть его по фону страницы — убедитесь, что ваш SVG включает preserveAspectRatio = "none" . Узнайте больше о preserveAspectRatio .

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

В каждом случае мы показываем, как выглядит исходное изображение, отрендеренное в блоке 150×150, и предоставляем ссылку на источник SVG.

Безразмерное и безразмерное

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

Источник SVG

Одно указанное измерение и непропорционально

Это изображение определяет ширину 100 пикселей, но не имеет высоты или внутреннего соотношения.Это, по сути, тонкая полоска обоев, которую можно растянуть на всю высоту блока.

Источник SVG

Одно указанное измерение с внутренним соотношением

Это изображение определяет высоту 100 пикселей, но не ширину. Он также определяет внутреннее соотношение сторон 3: 4. Это гарантирует, что его отношение ширины к высоте всегда равно 3: 4, если только оно не масштабируется намеренно до непропорционального размера (то есть путем явного указания ширины и высоты, которые не соответствуют этому соотношению).

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

Источник SVG

Без ширины или высоты с внутренним соотношением

Это изображение не указывает ни ширину, ни высоту; вместо этого он определяет внутреннее соотношение 1: 1. Думайте об этом как о значке программы. Он всегда квадратный и может использоваться любого размера, например 32×32, 128×128 или 512×512.

Исходный код SVG

Теперь давайте посмотрим на несколько примеров того, что происходит, когда мы применяем различное масштабирование к этим изображениям. В каждом из приведенных ниже примеров окружающие прямоугольники имеют ширину 300 пикселей и высоту 200 пикселей. Кроме того, для фонов background-repeat установлено на no-repeat для ясности.

Примечание: Скриншоты ниже показывают ожидаемый рендеринг . В настоящее время не все браузеры правильно их отображают.

Указание фиксированной длины для обоих измерений

Если вы используете background-size для указания фиксированной длины для обоих измерений, эти длины всегда используются в соответствии с правилом 1 выше.Другими словами, изображение всегда будет растягиваться до указанных вами размеров, независимо от того, указаны ли в исходном изображении его размеры и / или соотношение сторон.

Источник: Без размеров или внутреннего соотношения

С учетом этого CSS:

  фон: url (no-sizes-or-ratio.svg);
размер фона: 125 пикселей 175 пикселей;
  

Результат рендеринга будет выглядеть так:

Источник: одно указанное измерение, без внутреннего соотношения

С учетом этого CSS:

  фон: url (ширина 100 пикселей, высота или соотношение.svg);
размер фона: 250 пикселей 150 пикселей;
  

Результат рендеринга будет выглядеть так:

Источник: один указанный размер с внутренним соотношением

С учетом этого CSS:

  фон: url (100px-height-3x4-ratio.svg);
размер фона: 275 пикселей 125 пикселей;
  

Результат рендеринга будет выглядеть так:

Источник: не указана ширина или высота с внутренним соотношением

С учетом этого CSS:

  фон: url (no-sizes-1x1-ratio.svg);
размер фона: 250 пикселей 100 пикселей;
  

Результат рендеринга будет выглядеть так:

Использование contain или cover

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

Для изображения с внутренним соотношением ровно один размер соответствует обложке / только критерию соответствия.Но если внутреннее соотношение не указано, покрытия / подгонка недостаточно, поэтому ограничения большие / малые выбирают результирующий размер.

Источник: Без размеров или внутреннего соотношения

Если изображение не указывает ни размеры, ни внутреннее соотношение, не применяется ни правило 2, ни правило 3, поэтому правило 4 вступает во владение: фоновое изображение визуализируется, покрывая всю область фона. Это удовлетворяет наибольшему или наименьшему ограничению.

  фон: URL (без размеров или соотношения.svg);
размер фона: содержать;
  

Результат рендеринга выглядит так:

Источник: одно указанное измерение, без внутреннего соотношения

Аналогично, если для изображения задано одно измерение, но нет внутреннего соотношения, применяется правило 4, и изображение масштабируется, чтобы покрыть всю область фона.

  фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: содержать;
  

Результат рендеринга выглядит так:

Источник: один указанный размер с внутренним соотношением

Все меняется, когда вы указываете внутреннее соотношение.В этом случае правило 1 не актуально, поэтому применяется правило 2: мы стараемся сохранить любое внутреннее соотношение (при соблюдении содержится или охватывает ). Например, сохранение внутреннего соотношения сторон 3: 4 для блока 300×200 с содержит означает рисование фона 150×200.

содержать футляр

  фон: url (100px-height-3x4-ratio.svg);
размер фона: содержать;
  

Результат рендеринга выглядит так:

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

крышка футляра

  фон: url (100px-height-3x4-ratio.svg);
размер фона: обложка;
  

Результат рендеринга выглядит так:

Здесь соотношение 3: 4 сохраняется, при этом изображение растягивается до заполнения всего поля. Это приводит к обрезанию нижней части изображения.

Источник: Нет размеров с внутренним соотношением

При использовании изображения без внутренних размеров, но с внутренним соотношением, все работает аналогично.

содержать футляр

  фон: url (no-sizes-1x1-ratio.svg);
размер фона: содержать;
  

Результат рендеринга выглядит так:

Обратите внимание, что размер изображения соответствует наименьшему размеру при сохранении соотношения сторон 1: 1.

крышка футляра

  фон: url (no-sizes-1x1-ratio.svg);
размер фона: обложка;
  

Результат рендеринга выглядит так:

Здесь изображение имеет размер так, чтобы заполнять наибольшее измерение.Соотношение сторон 1: 1 было сохранено, хотя с этим исходным изображением это может быть трудно увидеть.

Автоматическое изменение размера с использованием «auto» для обоих измерений

Если для background-size установлено значение auto или auto auto , правило 2 гласит, что рендеринг должен сохранять любое внутреннее соотношение, которое предоставляется.

Источник: Без размеров или внутреннего соотношения

Когда исходное изображение не определяет собственное соотношение или размеры, вступает в силу правило 4, и изображение визуализируется для заполнения области фона.

  фон: url (no-sizes-or-ratio.svg);
размер фона: авто авто;
  

Результат рендеринга выглядит так:

Источник: Одно измерение, без внутреннего соотношения

Если внутреннее соотношение не указано, но указано хотя бы одно измерение, вступает в силу правило 3, и мы визуализируем изображение, подчиняющееся этим размерам.

  фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: авто авто;
  

Результат рендеринга выглядит так:

Обратите внимание, что ширина, которая указана в исходном SVG на уровне 100 пикселей, соблюдается, в то время как высота заполняет область фона, поскольку она не указана (явно или внутренним соотношением).

Источник: Одно измерение и внутреннее соотношение

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

  фон: url (100px-height-3x4-ratio.svg);
размер фона: авто авто;
  

Результат рендеринга выглядит так:

Поскольку это изображение имеет явную высоту 100 пикселей, соотношение 3: 4 явно устанавливает его ширину на уровне 75 пикселей, так что именно так оно отображается в случае auto .

Источник: Нет фиксированных размеров с внутренним соотношением

Если задано внутреннее соотношение, но нет размеров, применяется правило 4, за исключением того, что также применяется правило 2. Таким образом, изображение отображается так же, как для корпуса contain .

  фон: url (no-sizes-1x1-ratio.svg);
размер фона: авто авто;
  

Результат рендеринга выглядит так:

Использование «авто» и одной определенной длины

При правиле 1 всегда используются указанные размеры, поэтому нам нужно использовать наши правила только для определения второго измерения.

Источник: Без размеров или внутреннего соотношения

Если изображение не имеет размеров или внутреннего соотношения, применяется правило 4, и мы используем размер области фона для определения значения для размера auto .

  фон: url (no-sizes-or-ratio.svg);
размер фона: авто 150 пикселей;
  

Здесь ширина определяется с использованием ширины области фона в соответствии с правилом 4, а высота равна 140 пикселям, указанным в CSS.

Источник: одно указанное измерение без внутреннего соотношения

Если изображение имеет одно указанное измерение, но не имеет внутреннего соотношения, это указанное измерение используется в соответствии с правилом 3, если для этого размера установлено значение auto в CSS.

  фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: 200 пикселей автоматически;
  

Здесь 200 пикселей, указанные в CSS, переопределяют ширину 100 пикселей, указанную в SVG, по правилу 1. Поскольку не предусмотрено внутреннее соотношение или высота, auto выбирает высоту области фона в качестве высоты визуализированного изображения.

  фон: url (100px-wide-no-height-or-ratio.svg);
размер фона: авто 125 пикселей;
  

В этом случае ширина указана как auto в CSS, поэтому ширина 100 пикселей, указанная в SVG, выбирается согласно правилу 3. Высота установлена ​​на 125 пикселей в CSS, поэтому она выбирается согласно правилу 1.

Источник: один указанный размер с внутренним соотношением

Если размер указан, правило 1 применяет это измерение из SVG к визуализированному фону, если это специально не переопределено CSS.Когда также указывается внутреннее соотношение, оно используется для определения другого измерения.

  фон: url (100px-height-3x4-ratio.svg);
размер фона: 150 пикселей автоматически;
  

В этом случае мы используем ширину изображения, указанную в CSS, равную 150 пикселей, поэтому применяется правило 1. Внутреннее соотношение сторон 3: 4 определяет высоту корпуса auto .

Источник: Размеры с внутренним соотношением не указаны.

Если в SVG не указаны размеры, применяется размер, указанный в CSS, а затем внутреннее соотношение используется для выбора другого измерения согласно правилу 2.

  фон: url (no-sizes-1x1-ratio.svg);
размер фона: 150 пикселей автоматически;
  

Ширина устанавливается CSS равной 150 пикселей. Значение auto для высоты вычисляется с использованием этой ширины и соотношения сторон 1: 1, равного 150 пикселей, в результате получается изображение выше.

20+ бесплатных ресурсов фоновых шаблонов SVG и CSS — Bashooka

Фоновые узоры можно использовать в дизайне веб-сайтов или в любой другой форме работы, включая проектирование.Но создать собственный SVG и CSS с нуля — непростая задача. Итак, вот 15 ресурсов фоновых шаблонов SVG и CSS, которые позволят вам создавать и загружать изображения SVG для использования в фонах CSS для веб-сайтов и графического дизайна.

Генератор шаблонов

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

Patternico

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

Шаблон CSS

Только библиотека CSS для заполнения пустого фона красивыми узорами.

Тартанифай

Коллекция из более 5000 выкроек из тартана. Все готово к загрузке и использованию в качестве повторяющихся плиток в форматах SVG и PNG.

Paa Pattern

Бесплатная коллекция красивых шаблонов для всех векторных форматов.

Узоры героев

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

CSS-каракули

CSS-Doodle — отличная библиотека инструментов, которые помогают создавать красивые рисунки с помощью CSS.В сочетании с небольшим количеством javascript искусство оживает и даже становится интерактивным.

SVG фон

Создавайте привлекательные фоны и узоры для своего веб-сайта или блога с помощью этого бесплатного инструмента, который может управлять цветом, формой, размером и т. Д. На выходе получается CSS.

Галерея паттернов SVG

Галерея бесплатных фоновых узоров и дизайнов SVG.

Patterninja

Комбинируйте изображения из нашей бесплатной библиотеки или используйте свои собственные.Изготовленные выкройки можно скачать в высоком разрешении и использовать для печати и в Интернете.

Обычный узор

Создатель бесшовных узоров на основе SVG.

Trianglify

Это библиотека для создания красивых фоновых изображений SVG.

GeoPattern

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

Текстуры

Это библиотека javascript для создания шаблонов SVG. Созданный на основе d3.js, он предназначен для визуализации данных.

SV, поколение

Создание фоновой графики и узоров SVG.

Болт

Patternbolt — это прекрасный выбор фонового рисунка SVG, упакованный в один файл или файл SCSS (или CSS).

Барс

Индикаторы выполнения CSS, сделанные с помощью шаблонов SVG.

Классные фоны

Cool Backgrounds — это набор инструментов для создания привлекательных красочных изображений для блогов, социальных сетей и веб-сайтов.

Шаблонизатор

С Patternizer легко сделать что-нибудь потрясающее всего за несколько минут. Это требует всей работы по созданию сложных узоров, позволяя вам сосредоточиться на творчестве и игре. Выкройки можно сохранять и делиться ими с кем угодно, что дает возможность совместной работы и создания ремиксов.

Генератор фоновых узоров SVG

Веселый эксперимент с холстом, который экспортирует svgs.

Как установить цвет фона SVG?

Как установить цвет фона SVG?

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

• Растр: Изображения, в которых каждый пиксель представляет отдельный цвет внутри изображения. Поэтому, когда мы увеличиваем масштаб, пиксели начинают увеличиваться, и, следовательно, после определенного момента изображение начинает размываться.
• Вектор: Это изображения, в которых была сохранена информация о чертеже. Поэтому, когда они увеличиваются, изображение перерисовывается в соответствии с размером этой страницы. Следовательно, они не пикселизируются, и мы получаем четкие и резкие изображения. Поскольку эти изображения масштабируемы, они известны как SVG (масштабируемая векторная графика).

SVG означает Масштабируемая векторная графика . Фон SVG используется для рисования любых форм, задав любой цвет, который вы хотите, с помощью свойства set.Приведенные ниже примеры более конкретно иллюстрируют концепцию SVG set background-color. SVG позволяет изменять размер фона CSS, положение и гораздо более сложные свойства.

Пример: Атрибуты cx и cy определяют координаты x и y центра окружности. Если cx и cy опущены, тогда центр круга устанавливается в (0, 0). Атрибут r определяет радиус круга. Установить цвет фона для этого SVG можно двумя способами.