Background image svg: How to add SVGs with CSS (background-image)

Содержание

Анализ применения SVG в качестве background-image / Хабр

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

И вот в один прекрасный день, открыв одно веб-приложение, я заметил, что мой браузер безумно «пожирает» память — одна вкладка «ела» около 600 МиБ. На МacBook с ретиной дела обстояли еще хуже. С этого момента началось расследование, куда же течет память. Кому интересно, добро пожаловать под кат.

Первым, на что я обратил внимание, был рост памяти при открытии одного попапа, в котором отрисовывались всего 20 элементов с иконками. Сделав профайлинг в chrome, я сделал вывод, что дело не в javaScript, не в CSS, и не в HTML.

Однако я заметил, что чем меньше присутствует элементов с иконками, тем меньше памяти расходуется. Посмотрев, откуда берутся иконки, я увидел, что они взяты из спрайта размером 2000px х 500px. После подмены SVG спрайта на PNG спрайт с такими же размерами, случилось чудо — использование памяти вернулось в разумные рамки. Порассуждав, легко прийти к выводу, что на каждую маленькую иконку отрисовывался большой битмап, на который и расходовалась память.

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

Ниже приведена таблица потребления памяти в chromium на моей машине при отрисовке 16 иконок:

SVG, размеры заданы в em	9 216k	демо
SVG, размеры заданы в px	101 600k	демо
PNG, малый размер холста	7 748к	демо
PNG, большой размер холста	10 060k	демо

Какие же выводы можно сделать? Возможны два варианта. Первый — использовать два спрайта PNG, в обычном и ретиновском качестве. Если же вы используете SVG-спрайты, задавайте размер в относительных единицах, например в em.
Список статей, которые рекомендую почитать на тему SVG:

coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg
habrahabr.ru/post/141654

www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers
www.w3.org/TR/SVG
smus.com/canvas-vs-svg-performance

UPD: И так, в ходе общих исследований было выяснено, что такое поведение присутствует в chromium-based браузерах. В браузерах firefox, opera, ie похожий эффект не наблюдается. В комментариях верно указано, что объем памяти зависит от размера холста, а не от единиц измерения. Но единицы измерения могут повлиять на маштабируемость SVG, так что выбирайте единицы под вашу задачу. Спасибо всем за замечания и проведенные тесты в других браузерах.
UPD: code.google.com/p/chromium/issues/detail?id=196524 добавлен баг в багтрекер.
UPD: Баг закрыт, исправлен в canary build.

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

Улучшить статью

Сохранить статью

Последнее обновление: 07 Дек, 2021

Читать

Обсудить

Улучшить статью

Сохранить статью

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

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

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

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

html

< html >

< head >

< title >

SVG set Background Color

title >

голова >

< корпус >

 0    <   центр   > 
             <   h2   стиль   ""  > Geeksforgeeks   H2  > 
    <  H5  > SVG. SVG   Высота   =   "100"   Ширина   =   "100"  > 
    <  
    <       <       < .   =   "50"   R   =   "40"   HUSго0050  "3"   fill   =   "red"   /> 
               svg   > 
           center   > 
    Body  > 
  
    HTML  >

915898915898 19158
. 0003
Чтобы установить цвет фона тела SVG, фон можно сделать двумя способами:
Способ 1: Вы можете добавить цвет фона к самому телу SVG.
html

< html >

< head >
     < title >
         SVG set Background Color
     title >
head >

< корпус >
     < центр >
       5        00050 h2 стиль = "цвет:зеленый;" > Geeksforgeeks H2 >
< H5 > SVG. svg высота = "100" ширина = "100" style = "background-color:green" >
             < circle cx = "50" cy = "50" R = "40" HUST = "черный"
.0049 = "red" />
         svg >
     center >
body >

HTML >

Выход:
9 0008 9007 MEATH. ширину и высоту 100% и установите цвет желаемого цвета фона, а затем мы можем начать рисовать фигуру.
html

< html >

< head >
     < title >
         Набор SVG Цвет фона
     > заголовок
00003 head > < body >      < center >          < h2 стиль = "цвет:зеленый;" >GeeksforGeeks h2 >          < h5 >SVG set Background Color h5 >          < svg height = "100" width = "100" > < Прямо Ширина = "100%" Высота = "100%" . 0050 fill = "green" />              < circle cx = "50" cy = "50" r = "40" ход = "черный" "red" />          svg >      center > body > HTML >

Выход:
html. HTML с нуля, следуя этому руководству по HTML и примерам HTML.

Статьи по теме
5 ошибок, которых следует избегать, и несколько полезных советов
Если есть одна область цифрового визуального дизайна, которая развивается без особых усилий, то это, безусловно, дизайн фона. Казалось, что все относительно быстро пришли к единому мнению, особенно до того, как услуги высокоскоростного Интернета стали доступны во всем мире. Фон SVG был самым простым переключением, чтобы избежать использования тяжелых фоновых изображений, которые медленно загружаются.
Фоновая графика SVG, созданная с помощью бесплатных инструментов для создания SVG, таких как SVGator, или сгенерированная с помощью таких инструментов, как SVGBackgrounds Мэтта Визивига, позволяет дизайнерам без труда получить фон для быстрой загрузки в Интернете и на мобильных устройствах всего за несколько кликов. .
Как бы просто это ни звучало, есть несколько распространенных ошибок, которые могут свести на нет преимущества использования фонового изображения SVG. Давайте разберемся с этими перегибами и посмотрим, какую тактику вы можете применить, чтобы каждый раз делать все правильно!
Автор: SVGator
Что такое фон SVG?
Какими бы культовыми (и ностальгическими!) фоновые изображения веб-сайтов 90-х годов ни были, их было очень трудно загрузить, хотя впервые увидеть на ЭЛТ-экранах было радостью! Мы должны поблагодарить их за то, что они испытали наше терпение, потому что с тех пор мы не прекращаем искать способы ускорить загрузку цифровых данных!
Взрыв из прошлого: веб-дизайн, вдохновленный 90-ми, от CameronsWorld
Фоновое изображение SVG имеет те же функции, что и любая другая масштабируемая векторная графика, с точки зрения производительности. Он значительно меньше по размеру (по сравнению с любым из своих растровых аналогов), бесконечно масштабируем и полностью адаптивен. Он никогда не потеряет резкость или четкость независимо от размера экрана или разрешения устройства, на котором он отображается.
Использование SVG в качестве фонового изображения технически ничем не отличается от использования других форматов (например, PNG или JPG). Просто векторный формат имеет неоспоримое преимущество, когда дело доходит до скорости загрузки. Размер статического полноэкранного фонового SVG-файла может быть меньше 5 КБ, и даже фоновая анимация SVG может иметь размер файла всего 8 КБ.
By SVGator
5 ошибок фона SVG, которых следует избегать

Как и в случае любой другой формы цифрового дизайна, фон SVG не освобождается от следования своду правил (хотя и разрешающим). Это не означает, что существует определенный правильный или неправильный способ создания фоновой масштабируемой векторной графики. Но есть несколько ошибок, которые могут помешать вам создать действительно выдающиеся векторные фоны.
Не волнуйтесь; мы здесь не только для того, чтобы показывать пальцем! Мы также поделимся несколькими простыми советами, которые вы можете применить в своем рабочем процессе создания фона SVG и больше никогда не сомневаться!
Ограничьтесь статическим фоновым изображением SVG
Мало что можно сделать проще или быстрее, чем просто остановиться на цвете фона SVG и перейти к более актуальным вариантам дизайна. Конечно, вам нужно больше подумать о том, какой стиль дизайна пользовательского интерфейса выбрать, или какой тип иконографии сделает пользовательский интерфейс более интуитивно понятным. Но в этом случае вы на 100 % продаете себя за счет гораздо более увлекательного дизайна.
Создание анимированного фона SVG, привлекающего внимание пользователя, имеет тот же эффект, что и настройка окружения в соответствии с «событием». Зачем ужинать при свечах в комнате с неоновым освещением, если можно повесить гирлянду и любоваться тускло освещенным ночным небом? Включив векторную анимацию в процесс проектирования, вы в десять раз увеличиваете свои возможности настройки навигации пользователя.
By SVGator
Ключевые указатели
Создайте свой собственный анимированный фон SVG, не написав ни одной строки кода, с помощью онлайн-инструмента анимации SVG. Изучите все способы, с помощью которых векторная графика движения может улучшить ваши проекты, от базовой анимации градиентного фона до плавающих геометрических фигур, неоморфных цветовых капель, небесных частиц и всего остального между ними.
Как только вы освоитесь с анимацией фона SVG, который соответствует настроению, к которому вы стремитесь, вы можете перейти прямо на следующий уровень: интерактивные фоны SVG с эффектом присутствия! С помощью интерактивной SVG-анимации без кода вы можете анимировать свои фоны по мере их прокрутки в окне просмотра и даже включить захватывающий (и запоминающийся!) эффект параллакса. Нет необходимости ограничивать себя статическим фоном, когда динамическую фоновую анимацию теперь создавать проще, чем когда-либо прежде.
By SVGator
Вмешательство в визуальную иерархию и доступность
Помимо развлечений и визуального магнетизма, фон SVG не должен мешать вам установить логическую визуальную иерархию, будь то на целевой странице веб-сайта или в пользовательском интерфейсе мобильного приложения. Визуальная иерархия по определению требует, чтобы элементы графического дизайна располагались в порядке их важности. Дизайнер несет ответственность за то, чтобы направить внимание пользователя и облегчить умственную нагрузку, связанную с принятием решения о том, на чем сосредоточиться и в каком порядке.
В целях удержания взгляда зрителя в нужном месте необходимо убедиться, что дизайн фона соответствует Руководству по обеспечению доступности веб-контента. Вы бы не хотели тратить время и усилия на проект только для того, чтобы понять, что вы непреднамеренно ограничиваете размер аудитории, которая может успешно и комфортно ориентироваться в ваших проектах.
По SVGator

Ключевые указатели
Принимать во внимание принципы Z-шаблона и F-шаблона цифровой визуальной иерархии. Убедитесь, что ваш фон SVG не отвлекает и не затеняет какую-либо важную часть контента. То, что мы, как дизайнеры, считаем совершенно различимым, может показаться некоторым пользователям размытым. В этом случае рекомендуется периодически проводить тестирование удобства использования и постоянно обновлять критерии доступности, в частности 1.4.3 Контрастность (минимум).
By SVGator
Не оптимизируется ваш фон SVG
Хотя по умолчанию ваш фон SVG является легким конкурентом в области размера файла, мы стремимся к молниеносной скорости загрузки в наши дни. Каждая секунда, сокращенная со времени загрузки этой страницы, делает нас на один шаг ближе к тому, чтобы предложить лучший пользовательский опыт.
Анимированный фон SVG, дополненный несколькими классными анимационными эффектами, может легко увеличить число и снизить оптимальную производительность вашего дизайна. Например, если вы начинаете свой фоновый дизайн SVG в такой программе, как Illustrator, а затем переходите к SVGator, чтобы вдохнуть жизнь в проект, вы можете перенести довольно много «раздувания». Но, к счастью, есть способы обрезать лишнее!
By SVGator
Ключевые указатели
В случае импорта Illustrator даже небольшие изменения, такие как использование упрощенного пути для рисования элементов фона и избегание настройки инструментов «Карандаш» или «Кисть» на «Точный», могут иметь огромное значение в том, насколько велик конец. -файл оказывается.
Следуйте советам из нашего блога «Оптимизируйте анимацию SVG для повышения скорости страницы» и оптимизируйте фон SVG, чтобы получить сложные результаты, как в примере ниже, с размером файла всего 50 КБ!
By SVGator
Не прототипирование с фоном SVG
Учитывая тот факт, что фон SVG, который вы выберете, задаст тон всему вашему проекту, эта ошибка может дорого стоить вам с точки зрения последовательного дизайна. Подобно тому, как художник смазывает холст краской, а затем использует этот базовый слой для создания бликов и теней, прототипирование с анимированным фоном SVG облегчает вам выбор идеального интервала, выравнивания, использования отрицательного пространства, контраста. и т. д.
Обработка фонового изображения SVG в качестве второстепенной задачи может сэкономить вам время в краткосрочной перспективе, но чаще всего позже вы обнаружите, что либо идете на компромисс с ультра-базовым фоновым цветом SVG, либо излишне удлиняете итерационный процесс.
Ключевые указатели
Используйте инструменты прототипирования, такие как Figma, Penpot или Protopie, чтобы концептуализировать процесс проектирования, начиная с фонового дизайна SVG. Вместо того, чтобы ударять по этому первому творческому блоку, глядя на совершенно белую чертежную доску, вы можете строить поверх уже очерченного фона.
Хотя некоторые инструменты прототипирования в настоящее время не поддерживают анимированный SVG, существуют обходные пути, которые могут помочь вам в этом процессе, например, использование GIF того же дизайна в качестве заполнителя. Вы также можете предварительно просмотреть свой дизайн с помощью конструкторов веб-сайтов, таких как Squarespace, Wix или Webflow. Какой бы инструмент вы в конечном итоге ни использовали, ваше визуальное повествование будет разворачиваться гораздо более плавно с фоновым SVG.
By SVGator
Неиспользование фонового SVG в полной мере

Давайте посмотрим на эту ошибку объективно и посмотрим, какие преимущества по умолчанию дает использование фона SVG:
- Маленький размер файла (даже для анимированного фона SVG)? ☑️Проверьте.
— Решены проблемы с визуальной иерархией и доступностью? ☑️Проверьте.
- Оптимальная производительность благодаря быстрому времени загрузки? ☑️Проверьте.
- Обеспечивает сплоченный процесс итерации с самого начала? ☑️Проверьте.
Итак, что еще может предложить фоновый SVG?
Вы можете сделать свой анимированный фон SVG настолько простым или сложным, насколько вам хочется, не беспокоясь о том, что время загрузки страницы или мобильного приложения увеличится на несколько секунд.
Он такой универсальный! Вы можете сделать его частью своих усилий по брендингу, использовать его, чтобы следить за тенденциями в дизайне пользовательского интерфейса, сделать верхнюю часть целевой страницы похожей на иммерсивный портал — и делать все это с адаптивным дизайном по умолчанию!
Мы собрали небольшую коллекцию великолепных анимированных SVG-фонов, чтобы дать толчок творчеству:
Милый анимированный шаблон

— Маргарита Иванчикова
Анимированные фоновые шаблоны SVG не требуют равномерного повторения, чтобы работать должным образом. Тонкие анимационные эффекты на геометрическом плоском искусстве, даже с различным смягчением, создают очень симпатичный узор.
Автор Маргарита Иванчикова
Круги, переливающиеся цветами - Автор ILLO
С оптимизацией SVG очень броский и запоминающийся анимированный фон SVG, подобный этому, может загружаться очень быстро. Максимальный потенциал вовлечения, без каких-либо (страниц) лежачих полицейских на пути!
By ILLO

Мозаичный анимированный узор - By Domaso
Мозаичный анимированный фон SVG, который заставляет нас думать о вернувшемся в моду стиле Баухаус — в комплекте с ультраплавными переходами и возможностью персонализации с любым брендом цвета.

By Domaso

Геометрический город - ILLO
Придание объема кажущимся плоским элементам — так иллюстратор Кристина Паскуале и аниматор Дэйв Кубитт описывают эту энергичную анимацию. Прекрасный пример задания тона страницы еще до того, как будет написан единственный заголовок!
By ILLO

Геометрическая анимация - By Aleksei Vasileika
Изометрические элементы на анимированном фоне SVG никогда не перестанут быть впечатляющими! Вы можете создавать их с помощью изометрических геометрических фигур и получать потрясающие результаты.
Автор Алексей Василейка

Connection - Автор ILLO
Хотите использовать фон SVG, чтобы не отставать от тенденций графического дизайна? Нет ничего проще! Анимированные тонкие линии, рисующие себя сами, могут сделать любой фон бодрящим и создать настроение для очень оптимистичного контента.
Автор ILLO
Анимированный эффект частиц
- Автор SVGator
Используя всего четыре пути, мы создали этот анимированный фон SVG с эффектом боке частиц с небольшим размером файла всего 8 КБ. Сделано от начала до конца в интуитивно понятном интерфейсе SVGator!
Посмотреть эту публикацию в Instagram
Пост, опубликованный SVGator | Инструмент анимации SVG (@svgatorapp)

Shooting Star - By Yusuke Nakaya
Стремитесь к звездам в своем следующем дизайн-проекте? Поместите световое шоу прямо на фон SVG!
By Yusuke Nakaya

Окружающий фон - By Dimitra Vasilopoulou
Ничто так не говорит «заходи и останься», как холодный анимированный окружающий фон. Именно то сообщение, которое вы хотели бы донести до посетителя сайта!
By Dimitra Vasilopoulou
Infinite SVG Triangle Fusion - By Rob DiMarzo
Мы не могли отвести взгляд от этого гипнотического фона SVG! Именно та энергия, которую вы ищете, добавляя интересные элементы в свой дизайн-проект.