Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 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 | демо |
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-performanceUPD: И так, в ходе общих исследований было выяснено, что такое поведение присутствует в 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 обрабатывается при использовании этих свойств.
Алгоритм может быть в основном обобщен этими четырьмя правилами. Существуют некоторые краевые случаи, которые не охватываются этими правилами, но это касается большинства случаев.
- Если background-size задает фиксированный размер (то есть проценты и относительные единицы фиксируются по их контексту), это измерение выигрывает.
- Если изображение имеет внутреннее соотношение (то есть его отношение ширины: высота постоянное, например 16: 9, 4: 3, 2.39: 1, 1: 1 и т. Д.), То размер рендеринга сохраняет это отношение.
- Если изображение указывает размер, и размер не изменяется с помощью ограничения или обложки, выигрывает указанный размер.
- Если ни один из вышеперечисленных случаев не выполняется, изображение отображается в том же размере, что и область фона.
Стоит отметить, что алгоритм калибровки учитывает только размеры и пропорции изображения или их отсутствие. Изображение 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
- 2
- 3
- 3.5
- 3.6
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 3.1
- 3.2
- 4
- 5
- 5.1
- 6
- 6.1
- 7
- 7.1
- 8
- 9
- 9.1
- 10
- 10.1
- 11
- 11.1
- 12
- TP
- 9
- 9.5-9.6
- 10.0-10.1
- 10.5
- 10.6
- 11
- 11.1
- 11.5
- 11.6
- 12
- 12.1
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 3.2
- 4.0-4.1
- 4.2-4.3
- 5.0-5.1
- 6.0-6.1
- 7.0-7.1
- 8
- 8.1-8.4
- 9.0-9.2
- 9.3
- 10.0-10.2
- 10.3
- 11.0-11.2
- 11.3-11.4
- 12.0-12.1
- 2.1
- 2.2
- 2.3
- 3
- 4
- 4.1
- 4.2-4.3
- 4.4
- 4.4.3-4.4.4
- 67