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 с помощью CSS

При создании веб-сайта дизайнеры часто используют изображения PNG или JPEG в качестве фона. Однако изменить цвет этих изображений может быть сложно, особенно если изображение маленькое или имеет много деталей. Одним из решений является использование фонового изображения SVG. Изображения SVG состоят из векторной графики, что означает, что их размер можно легко изменить, а их цвета можно изменить с помощью CSS. В этой статье мы покажем вам, как изменить цвет фонового изображения SVG с помощью CSS. Мы также дадим несколько советов по созданию собственных изображений SVG.

В этой статье я покажу вам, как изменить цвет изображения SVG с помощью CSS или Javascript. Для каждого SVG существует файл XML, структура которого показана ниже. Свойство CSS fill можно использовать для непосредственного нацеливания на элемент пути или элемент многоугольника структуры SVG; другой способ — использовать файл в качестве фонового изображения.

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

В процессе редактирования заполните [fill=currentColor] тегом svg и убедитесь, что к нему не добавлены другие свойства заливки. Ключевое слово

currentColor (не фиксированный цвет) следует использовать вместо цвета по умолчанию. После этого вы можете изменить цвет с помощью CSS, установив свойство цвета элемента или его родителя.

Источник изображения: https://www.finelinefx.com/products/distressed-american-flag-with-blue-line-for-police-support-vinyl-decal-sticker-finelinefx

Изображение SVG можно использовать в качестве фонового изображения в CSS точно так же, как изображение PNG, JPG или GIF. Магия SVG усиливается, что позволяет сохранить четкость, а также обеспечивает гибкость.

Кроме того, растровая графика может делать все, что захочет, например, повторять.

I и звездочка — это класс иконок и звездочек, которые нужно добавить в наш HTML, написав I и создав класс иконок и звездочки. Поскольку внутри этих элементов I нет содержимого, нам нужно добавить ширину и высоту, чтобы они поместились в любом месте. Таким образом, мы также можем включить встроенный блок. Все специальные символы в этом файле должны быть закодированы, чтобы сделать его более совместимым с разными браузерами. Вместо копирования и вставки я собираюсь использовать этот декодер URL-адресов для создания URL-адреса. Разметка будет вставлена ​​в мой файл, и я смогу закодировать. Теперь я могу использовать разметку в своем CSS благодаря этой новой разметке. На следующем шаге я буду использовать закодированные

Разметка SVG для замены предыдущей разметки SVG. Значки продолжают появляться, как вы можете видеть на изображении.

Однако прозрачные фоны не требуются стандартом SVG; они могут быть полезны для создания более полированного изображения. Вы можете использовать любые ПА с прозрачным фоном, если они вам подходят; Firefox, например, их поддерживает. Если вы хотите, чтобы ваши методы использовались другими, обязательно включите их в свою документацию.

Плюсы и минусы файлов Svg

Если изображение не слишком детализировано, файл можно более эффективно преобразовать в векторный формат. Изображения можно отображать в любом масштабе с помощью файлов векторной графики, тогда как растровые изображения требуют файлов большего размера для уменьшенных версий, тогда как файлы векторной графики содержат достаточно информации для их отображения в любом масштабе. Поскольку форматы PNG и SVG поддерживают прозрачность, они прекрасно подходят для создания логотипов и графики для Интернета. Несмотря на это, растровый прозрачный файл может выиграть от PNG. Если вы работаете с пикселями и прозрачностью, PNG — лучший вариант. Хотя Skia может декодировать и отображать изображения с помощью

Протокол SVG , он не может декодировать или отображать изображения с использованием формата . JPG.

SVG в фоновом режиме CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

SVG в фонах CSS

— CR

  • Глобальное использование
    98,68% + 1,12% знак равно 99,8%

Метод использования изображений SVG в качестве фона CSS

Chrome
  1. 4: Частичная поддержка
  2. 5 — 107: поддержано
  3. 108: поддержан
  4. 109 — 111: поддержано
99933. Частичная поддержка
  • 16–107: поддерживается
  • 108: поддерживается
    • Safari
    1. 00% — Not supported»> 3.1: не поддерживается
    2. 3.2–4: частичная поддержка
      3. 9009 5 0–4: поддерживается0 16.1: Supported
    3. 16.2 — TP: Supported
    Firefox
    1. 2 — 3.6: Not supported
    2. 4 — 23: Partial support
    3. 24 — 106: Supported
    4. 107: Supported
    5. 108 — 109: Поддерживается
    Opera
    1. 9: не поддерживается
    2. 9,5 — 91: Поддержано
    3. 92: Поддержано
    IE
    1. 5.5 — 8: Не поддерживает
    2. 10% — Supported»>
      1. 5.5 — 8: Не поддерживает
        2. 9005 9001 9001 9001 9001 9001 9001 9001 9005 9005 9. 9005 9005 9005 9001 9005 9005 9005 9005 9005 9005 9005 9001 9001 9001 9001 9001

          1112.

            2. 9005 4.

            1222.5.5 — 8: не поддерживает0055
          Chrome for Android
          1. 108: Supported
          Safari on iOS
          1. 3.2 — 4.1: Partial support
          2. 4.2 — 16.0: Supported
          3. 16.1: Supported
          Samsung Internet
          1. 4 — 18.0 : Поддерживается
          2. 19.0: Поддерживается
          Opera Mini
          1. все: Частичная поддержка
          Opera Mobile
          1. 00% — Partial support»> 10 — 12.1: Частичная поддержка 9:10055 7 200055
          UC Browser для Android
          1. 13,4: поддержан
          Browser Android
          1. 2,1 — 2,3: не поддерживается
          2. 3 — 4.4.4: поддерживает
          3. : 70055
          4. 3 — 4.4.4: поддержал
          5. : 70055
          6. 3 — 4.4.4: поддержал
          7. : 70055
          8. 3 — 4.4.4: поддержал
          9. : 70055
          10. 3 — 4.4.4: поддержал
          11. : 70055
          12. 3 — 4.4.4: поддержал

          13. No related posts.

    Автор записи

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

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