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 ID? — WebBeaver.ru

May 03, 2017

Перевод статьи «How SVG Fragment Identifiers Work» от Криса Койера.

Я много рассказывал о теге <use> в SVG и использовал его для вывода иконок. Прелесть в том, что с помощью <use> можно ссылаться на часть SVG и выводить только её. Это позволяет использовать схему «много изображений за один запрос, потому что это суперэффективно», которую раньше решали с помощью CSS-спрайтов и иконочных шрифтов.

Но <use> — это инлайновый SVG. Он не поможет, если вы хотите использовать часть SVG в теге <IMG> или в background-image. Вот тут и появляются идентификаторы фрагментов.

Подготовка SVG-спрайта

Один из способов — привести SVG (давайте называть его просто «спрайт») к виду обычного CSS-спрайта.

Мы специально делаем это именно так, чтобы потом быть в состоянии использовать значения viewBox, для вывода отдельных фрагментов, как мы привыкли это делать в обычных спрайтах.

В этом небольшом демо-спрайте используется три иконки. Каждая иконка имеет размер 32×32. Весь спрайт — 32×96. Давайте посмотрим, каким будет viewBox для отдельных частей спрайта:

ViewBox всего спрайта	0 0 32 96
ViewBox первой иконки	0 0 32 32
ViewBox второй иконки	0 32 32 32
ViewBox третьей иконки	0 64 32 32

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

Добавление viewBox в сам SVG

Вы можете указать эти значения viewBox для каждого элемента <view>, внутри SVG.

<view viewBox="0 0 32 32" />
<view viewBox="0 32 32 32" />
<view viewBox="0 64 32 32" />

Теперь мы можем использовать эти части в других местах. Элементы <view> могут быть самостоятельными, как в примере выше, или могут оборачивать другие элементы. В этом случае viewBox отобразится, если совпадает ID.

<!-- Этот viewBox отобразится, если идентификатор будет #match-me. -->
<view viewBox="0 64 32 32">
  <rect ...>
</view>

Демо в спецификации.

Синтаксис в HTML

Применять значения viewBox в SVG-вставленном-как-IMG вы можете следующим образом:

<!-- top icon -->
<img src="sprite.svg#svgView(viewBox(0, 0, 32, 32))" alt="">

Или, если вы уже настроили view-элементы, то можете ссылаться на них по ID:

<!-- middle icon -->
<img src="sprite.svg#icon-heart-view" alt="">

Синтаксис в CSS

Вы можете указывать требуемое значение viewBox прямо в пути к изображению в CSS

.icon-clock {
  background: url("sprite.svg#svgView(viewBox(0, 0, 32, 32))") no-repeat;
}

Или, опять же, ссылаться на них по ID:

. icon-clock {
  background: url(sprite.svg#icon-clock-view) no-repeat;
}

Хотя… Если вы используете SVG-спрайт таким образом и у вас пошло что-то не так, то вы можете просто использовать способ из обычных спрайтов:

.icon-heart {
  background: url("sprite.svg") no-repeat;
  background-size: 32px 96px;
  background-position: 0 -32px;
}

Я хочу складывать иконки друг на друга

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

Поместите их все в одно место (или используйте какой-нибудь сборщик). Вот, я кладу каждую иконку в группу и указывают уникальный ID.

Трюк с отображением нужной иконки заключается в том, чтобы скрыть все иконки и отобразить ту, чей ID совпадает с указанным. Это всё можно сделать на CSS, потому что у нас есть псевдокласс :target.

SVG со всем этим будет выглядеть так:

<defs>
  <style>
    g {
      display: none;
    }
    g:target {
      display: inline;
    }
  </style>
</defs>

<g>
  <path d="M20. 6,23.3L14,16.7V7.9h5v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
		 M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
</g>
<g>
  <path d="M32,11.2c0,2.7-1.2,5.1-3,6.8l0,0L19,28c-1,1-2,2-3,2s-2-1-3-2L3,18c-1.9-1.7-3-4.1-3-6.8C0,6.1,4.1,2,9.2,2
		c2.7,0,5.1,1.2,6.8,3c1.7-1.9,4.1-3,6.8-3C27.9,1.9,32,6.1,32,11.2z"/>
</g>
<g>
  <path d="M32,15.9l-16-16v10H0v12h26v10L32,15.9z"/>
</g>

Поддержка браузеров

Можно посмотреть поддержку в Can I Use, но не всё так просто, потому что некоторые браузеры поддерживают только использование идентификаторов в HTML, а у некоторых какие-то проблемы.

Это моя тестовая страница:

See the Pen SVG Fragment Identifiers in HTML and CSS by Chris Coyier (@chriscoyier) on CodePen.

Вот основные моменты поддержки браузеров, которые я могу отметить:

• В Firefox всё работает правильно.
• В IE11 тоже. У IE 9 и 10 небольшие проблемы с background-position, но, в целом, всё неплохо.
• В последних Chrome/Opera всё работает.
• Единственное что работает в iOS 8.1 — это ссылка на view внутри img.
• Для Android 4.4 подходит только background-position (который вообще не использует идентификаторы). В Android 5 всё нормально.

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

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

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

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

 

    

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

        

     
      
      {/*  */}
    
  
 

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

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

1

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

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

2

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

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

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

 

   ...
   ...

 

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

6

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

https://play. tailwindcss.com/gOFytBrc4G

 

  
  <дел>
     
Это мой заголовок
 
  

 
Медведь
 

 .bear-icon::before {
  background: url(images/bear.svg) 0 0 без повторов;
  размер фона: 22px;
  содержание: '';
  отступ: 0 0 0 28 пикселей;
  положение: родственник;
  верх: 3px;
} 

 <дел>
  

    
    Lorem ipsum dolor [...]
  
 

 .bear-изображение {
   ясно: верно;
   поплавок: справа;
   ширина: 40%;
} 

 <дел>