Background svg image: 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

  • Главная
  • Фоны
  • SVG
  • Инструменты
  • Цены
  • ДаВГ
  • Блог
  • Войти
  • Разблокировать Pro

The Background Blog охватывает темы, связанные с веб-дизайном, предпринимательством и всем, что связано с SVG.

10 новых фонов: капли, глубина и градиенты

Обновление продукта:

ПРОЧИТАТЬ Matt Visiwig | 27 июня 2023 г.

Новое: 64 дудла со стрелками

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

ПРОЧИТАТЬ Мэтт Визивиг | 15 июня 2023 г.

Новое: 48 подчеркнутых рисунков

Обновление продукта: Я разработал и добавил новую коллекцию в раздел элементов SVG на сайте. Члены Pro получают доступ ко всем 48 подчеркиваниям SVG.

ПРОЧИТАТЬ Мэтт Визивиг | 1 июня 2023 г.

Data URI крайне редко используются для оптимизации скорости веб-сайта

Использование SVG Data URI сокращает HTTP-запросы, повышает скорость загрузки, позволяет динамически манипулировать SVG и обеспечивает преимущества для рабочего процесса веб-разработки,

ПРОЧИТАТЬ Мэтт Визивиг | 22 мая 2023 г.

Новые элементы SVG: маркеры элементов списка

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

ПРОЧИТАТЬ Мэтт Визивиг | 15 мая 2023 г.

Пользовательские маркеры CSS с маркером ::marker

Легко добавить собственный маркер SVG, объявить list-style-image: с вашим изображением, и вы готовы на 80%. Проблема заключается в корректировке размера и положения.

ПРОЧИТАТЬ Мэтт Визивиг | 5 мая 2023 г.

Добавлен поиск для помощи в поиске фонов

Обновление продукта: Добавлена ​​возможность поиска фонов. Вы можете найти страницу поиска в разделе «Фон» > «Поиск фона» или на странице svgbackgrounds.com/search 9.0025

ПРОЧИТАТЬ Мэтт Визивиг | 1 мая 2023 г.

3 способа использования BLOB-объектов SVG на вашем веб-сайте (CSS)

Мы продемонстрируем три практических способа использования BLOB-объектов SVG в дизайне вашего веб-сайта с помощью CSS: в качестве фона, разделителя формы и маска.

ПРОЧИТАТЬ Мэтт Визивиг | 27 апреля 2023 г.

Как создавать большие двоичные объекты SVG

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

ПРОЧИТАТЬ Мэтт Визивиг | 25 апреля 2023 г.

Введение элементов SVG

Обновление продукта: На сайте произошли важные изменения, я добавил новый раздел, который позволяет SVG Backgrounds предлагать больше, чем фоны. Теперь сайт будет предлагать различные типы SVG

ПРОЧИТАТЬ Matt Visiwig | 19 апреля 2023 г.

Основы SVG: стилизация элементов формы

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

ПРОЧИТАТЬ Мэтт Визивиг | 7 марта 2023 г.

Улучшен конвертер SVG в CSS

Обновление продукта: Когда я запускал браузер в 2018 году, поддержка старых браузеров означала, что нам приходилось кодировать URL-адреса большинства специальных символов, но теперь появился более современный подход.

ПРОЧИТАТЬ Мэтт Визивиг | 17 января 2023 г.

Основы SVG: рисование кругов и овалов

Изучите основы элементов CIRCLE и ELLIPSE в SVG. Мы анализируем их сходства и различия и то, как стилизовать эти круглые элементы SVG.

ПРОЧИТАТЬ Мэтт Визивиг | 31 октября 2022 г.

Добавлено 10 новых геометрических узоров

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

ПРОЧИТАТЬ Мэтт Визивиг | 20 октября 2022 г.

Смил умер в 2022 году? Нет

Перенесемся в 2022 год, и единственные браузеры, которые не поддерживают SMIL, — это Internet Explorer (официально прекращенный) и Opera Mini. Означает ли это, что SMIL жив?

ПРОЧИТАТЬ Мэтт Визивиг | 29 сентября 2022 г.

Сохраняйте свои собственные цвета с помощью этой новой функции

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

ПРОЧИТАТЬ Мэтт Визивиг | 20 сентября 2022 г.

reactjs — Как сделать изображение svg в качестве фонового изображения с помощью реакции и Tailwind css?

спросил

Изменено 1 год, 1 месяц назад

Просмотрено 6к раз

Я создаю адаптивный веб-сайт с реакцией и попутным ветром, у меня есть изображение SVG, которое я хочу сделать фоновым изображением для основного тега, но оно не работает. Я следил за документацией попутного ветра и добавил этот код в мою тему taliwind.config.js

: {
   продлевать: {
      изображение на заднем плане: {
                         'шаблон героя': "url('/public/background.svg)"
                        }
            }
         }

и использование bg-hero-pattern ничего не отображает. Я попробовал другой вариант, который является атрибутом стиля в моем теге, он отображает изображение, но не охватывает весь родительский тег, хотя я использую bg-cover и bg-no-repeat это мой код:

 

  

    

      {/* Содержание */}
      
      

        

     

      

      {/*  */}

кто-нибудь может мне помочь?

  • reactjs
  • svg
  • адаптивный дизайн
  • background-image
  • tailwind-css
1

Самым простым и лучшим решением может быть использование произвольного значения. Вы можете сделать что-то вроде этого

 
 svg')]">

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

2

Если вы определили его в файле tailwind.config.js , как вы упомянули как тему

: {
   продлевать: {
      изображение на заднем плане:
         {
           'hero_pattern': "url('/public/background.svg)"
         }
     }
 }

Вы можете просто использовать его как

 

   ...
   ...

Я изменил имя с hero-pattern на hero_pattern

6

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

https://play.tailwindcss.com/gOFytBrc4G

 

  Игра с попутным ветром
  <дел>
     
Это мой заголовок

Вы можете обернуть img в div , если это даст вам больше контроля.

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

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

No related posts.

Автор записи

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

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