Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Svg в css background


Анализ применения 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 performance
  • background-image

Масштабирование фона SVG

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

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

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

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

Примеры исходных изображений

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

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

Безразмерный и беспристрастный

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

Источник SVG

Один заданный размер и безразмерный

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

Источник SVG

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

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

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

Источник SVG

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

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

Источник SVG

Примеры масштабирования

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

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

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

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

Источник: без измерений или собственного отношения

Учитывая этот CSS:

background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px;

Полученный вывод будет выглядеть так:

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

Учитывая этот CSS:

background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px;

Полученный вывод будет выглядеть так:

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

Учитывая этот CSS:

background: url(100px-height-3x4-ratio.svg); background-size: 275px 125px;

Полученный вывод будет выглядеть так:

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

Учитывая этот CSS:

background: url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px;

Полученный вывод будет выглядеть так:

Использование содержимого или обложки

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

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

Источник: без измерений или собственного отношения

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

background: url(no-dimensions-or-ratio.svg); background-size: contain;

Полученный вывод выглядит следующим образом:

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

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

background: url(100px-wide-no-height-or-ratio.svg); background-size: contain;

Полученный вывод выглядит следующим образом:

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

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

содержать случай
background: url(100px-height-3x4-ratio.svg); background-size: contain;

Полученный вывод выглядит следующим образом:

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

чехол
background: url(100px-height-3x4-ratio.svg); background-size: cover;

Полученный вывод выглядит следующим образом:

Здесь соотношение 3: 4 сохраняется при растяжении изображения для заполнения всего поля. Это заставляет снизу снижать изображение.

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

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

содержать случай
background: url(no-dimensions-1x1-ratio.svg); background-size: contain;

Полученный вывод выглядит следующим образом:

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

чехол
background: url(no-dimensions-1x1-ratio.svg); background-size: cover;

Полученный вывод выглядит следующим образом:

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

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

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

Источник: без измерений или собственного отношения

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

background: url(no-dimensions-or-ratio.svg); background-size: auto auto;

Полученный вывод выглядит следующим образом:

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

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

background: url(100px-wide-no-height-or-ratio.svg); background-size: auto auto;

Полученный вывод выглядит следующим образом:

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

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

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

background: url(100px-height-3x4-ratio.svg); background-size: auto auto;

Полученный вывод выглядит следующим образом:

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

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

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

background: url(no-dimensions-1x1-ratio.svg); background-size: auto auto;

Полученный вывод выглядит следующим образом:

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

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

Источник: без измерений или собственного отношения

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

background: url(no-dimensions-or-ratio.svg); background-size: auto 150px;

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

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

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

background: url(100px-wide-no-height-or-ratio.svg); background-size: 200px auto;

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

background: url(100px-wide-no-height-or-ratio.svg); background-size: auto 125px;

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

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

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

background: url(100px-height-3x4-ratio.svg); background-size: 150px auto;

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

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

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

background: url(no-dimensions-1x1-ratio.svg); background-size: 150px auto;

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

Смотрите также

Can I use SVG in CSS backgrounds?

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

Method of using SVG images as CSS backgrounds

  1. 2
  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  1. 4
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. TP
  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 67
Resources:Tutorial for advanced effects


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!