1. Главная страница » Компьютеры » Css background image svg

Css background image svg

Автор: | 16.12.2019

Содержание

vladimir вс, 03/10/2013 — 18:47 HTML5

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

  • Маленький размер файла, который хорошо сжимается
  • Масштабирование до любого размера без потери качества
  • Отлично смотрится на дисплеях retina
  • Полный контроль дизайна при интерактивности и в фильтрах

Создание SVG для дальнейшей работы

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

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

Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

Если сохранить SVG как обычный файл, то можно использовать его в обычном теге img:

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

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

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

Если у вас нет опыта работы с Modernizr, почитайте статью “Что такое Modernizr и как с ним работать”

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

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

Использование SVG в качестве фона background-image

По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:

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

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

Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:

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

Читайте также:  Asus z170 pro gaming bios

Использование “inline” SVG

Выше упоминалось, что при сохранении картинки в формате SVG, с помощью редактора Illustrator можно получить правильный SVG код (также можно отрыть файл с помощью текстового редактора и скопировать этот код). Вы можете скопировать этот код в ваш HTML и SVG будет отображаться абсолютно также, как при использовании img.

Это может быть полезным, так как образ изображения приходит вместе с кодом в документ и при этом не осуществляется HTTP запрос. Другими словами, преимущества такие же, как при использовании данных Data URI. Однако, недостатки тоже есть. Из-за вставки вставки прямого кода SVG, документ начинает быть похож на большой раздутый кусок дерьма.

Также есть вариант для вставки SVG на стороне сервера:

Оптимизация SVG

Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.

Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например :hover.

В SVG имеются забавные фильтры. Например размытие:

Затем вы можете при необходимости применить это в css:

Вот, что получилось:

Поддержка “inline” SVG браузерами

Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.

Один из вариантов фолбэка для такого типа SVG:

Затем снова используем Modernizr:

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

Для кроссбраузерной поддержки используем Modernizr:

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами, чем все вышеперечисленные. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

Data URI для SVG

Использование Data URI вялется способом уменьшения веса SVG. Mobilefish.com предоствляет онлайн инструмент оптимизации для этой цели. Достаточно вставить содержимое вашего SVG файла и заполнить форму, далее результат будет отображён в текстовом поле, который можно скопировать. Выглядит это так:

Вы можете использовать этот код где угодно! Нпример:

И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!

I can’t seem to get this to work as desired. My page changes height based on what content is loaded and if it requires a scroll, the svg doesn’t seem to be stretching.

Is it possible to do this with just CSS3? I’d like to not have to load ANOTHER JS library or call. Any ideas? Thanks!

4 Answers 4

With my solution you’re able to get something similar:

Here is bulletproff solution:

Your html:

Your SVG: i used fa-calendar-alt

(any IDE may open svg image as shown below)

To use it at css background-image you gotta encode the svg to address valid string. I used this tool

As far as you got all stuff you need, you’re coming to css

Note: these styling wont have any effect on encoded svg image

because all changes over the image must be applied directly to its svg code

To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:

SVG — формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

Зачем вообще нужен SVG?

  • Небольшие размеры файлов, отличное сжатие;
  • Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
  • Хорошо выглядит на ретине;
  • Широкие возможности, которые предоставляют фильтры и интерактивность.
Читайте также:  Asus p5b разгон процессора

Создадим изображение SVG, с которым будем работать дальше

Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.

Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.

Adobe Illustrator умеет сохранять в SVG.

При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG. Меня вполне устраивает SVG 1.1.

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.

Добавляем SVG на страницу с помощью тега

Если сохранить изображение SVG в файл, то его можно вставить с помощью тега .

В Illustrator рабочая область была размером 612px ✕ 502px.

Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример:

Поддержка браузерами

SVG по-разному поддерживается браузерами. Он работает везде, кроме IE до 8 версии и браузерах на Android до версии 2.3.

Если вы хотели бы использовать SVG, но проект поддерживает браузеры, которые не могут вставлять его через img , есть разные варианты. Я описал некоторые приемы в нескольких своих мастер-классах.

Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:

Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант, если вы не имеете ничего против JavaScript в разметке:

Еще можно использовать SVGeezy. Далее мы рассмотрим другие способы деградации.

Добавляем SVG через background-image

Использовать SVG в качестве фона c помощью CSS-свойства background-image так же просто, как и вставка с помощью тега img .

Обратите внимание, что для селектора .logo задан размер background-size . Это необходимо, иначе будет видна только верхняя левая часть изображения SVG, у которого исходный размер намного больше. Эти размеры прописаны с учётом соотношения сторон изображения в оригинале. Можно также использовать для background-size значение contain , чтобы убедиться в том, что изображение поместится в родительский контейнер, если вам не известно какого размера оно должно быть.

Поддержка браузерами

Вставка SVG через свойство background-image по-разному поддерживается браузерами, но в общем дела обстоят так же, как и с img . Проблемой являются IE до 8 версии и браузеры на Android до версии 2.3.

В этом случае нам может помочь Modernizr, даже более эффективно, чем при использовании img . Если заменить background-image на изображение, формат которого поддерживается, на сервер будет отправлен один HTTP-запрос, а не два. Modernizr добавляет класс “no-svg” для html-элемента, если SVG не поддерживается:

Общая проблема при использовании и background-image …

Проблема состоит в том, что вы не можете управлять внутренностями SVG с помощью CSS так, как сможете при использовании двух приёмов описанных ниже. Читайте дальше!

Добавляем SVG непосредственно в документ

Помните, как при необходимости можно получить SVG-код прямо при сохранении изображения в Illustrator? Ещё можно просто открыть SVG-файл в текстовом редакторе и скопировать его код. Этот код можно вставить прямо в HTML-документ, и SVG-изображение будет отображаться точно так же, как если бы его вставили с помощью тега img .

Этот приём может быть полезным, так как изображение встроено прямо в документ, и для его загрузки не происходит дополнительный HTTP-запрос. У этого метода те же преимущества, как и у использования Data URI. И недостатки у него те же, не обольщайтесь. Среди них: вероятность получения очень тяжелого документа, наличие блоков SVG-кода в нем и невозможность кэширования.

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

Сначала оптимизируем

Без сомнений, для вас не станет сюрпризом то, что SVG, полученные в Adobe Illustrator, не самые оптимальные. Они содержат DOCTYPE, примечания генератора и прочий мусор. У SVG, в общем, и так небольшой размер, но почему бы не уменьшить его еще больше, если есть возможность? Питер Коллингридж (Peter Collingridge) создал SVG Optimiser, инструмент для онлайн-оптимизации SVG. Загружаете старый файл, скачиваете новый. В своём видео Кайл Фостер заходит ещё дальше и удаляет даже переносы строки в процессе оптимизации.

Если вы еще более суровы, вот вам инструмент на Node JS, с помощью которого можно оптимизировать изображения самостоятельно.

Читайте также:  Nokia 5130 xpressmusic защитный код

Затем управляем с помощью CSS

Видите, насколько сильно теперь SVG похоже на HTML? Это потому, что они оба не что иное, как XML (теги и всякая всячина внутри). В нашем проекте есть два составляющих элемента, и

. Можно просто открыть код и присвоить им классы, как любому другому элементу HTML.

Теперь эти отдельные элементы можно контролировать с помощью специального CSS для SVG. Необязательно добавлять CSS в сам SVG, его можно разместить где угодно, даже в файле с глобальными стилями. Обратите внимание, что для элементов SVG есть специальный набор свойств CSS. Например, нельзя использовать background-color , вместо него есть fill . Однако кое-что стандартное тоже можно использовать, например, :hover .

Более того, в SVG можно использовать фильтры, например размытие:

И его можно применить из CSS:

Пример того, что может получиться:

Поддержка браузерами

Добавление SVG непосредственно в документ по-разному поддерживается браузерами, однако все сводится к отсутствию поддержки IE младше 8 и браузерам на Android до версии 2.3 1.

Для этого способа вставки SVG можно использовать следующие приемы деградации:

И снова используем Modernizr:

Добавляем SVG на страницу с помощью тега

Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя и сохранить возможность управлять его частями посредством CSS.

На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:

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

Внешние файлы со стилями для SVG, вставленного с помощью

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

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

Использование Data URI для SVG

SVG-файл можно уменьшить еще сильнее, если конвертировать его в Data URI. На Mobilefish.com для этого есть онлайн-конвертер. Просто скопируйте содержимое SVG-файла и заполните форму, результат конвертирования можно будет скопировать с текстового поля. Не забудьте удалить переносы строки в полученном коде. Выглядеть он будет как полнейшая тарабарщина:

Его можно использовать в любом из приёмов, которые мы рассмотрели (кроме вставки непосредственно в документ, поскольку это попросту нелогично). Просто скопируйте всю полученную тарабарщину вместо [data] в следующих примерах.

Добавление на страницу с использованием тега

Добавление на страницу в качестве фона с использованием CSS

Добавление на страницу с использованием тега

Кстати, если добавить в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.

Консольные штучки для перекодирования SVG в base64:

@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

Используйте openssl base64 или cat path/to/file.png | openssl base64 | tr -d ‘
‘ | pbcopy чтобы пропустить запись в файл и просто скопировать выходные данные в кодировке base64 в буфер без переносов строки.

Материалы для дальнейшего чтения

  • Дэвид Бушел: Букварь фронтендера по SVG-хакерству
  • Дэвид Бушел: Независимость от разрешения с SVG
  • MDN про SVG
  • Поддержка браузеров для всяких всячин повязанных с SVG.
  • Питер Гестон (Peter Gasston): Создание лучших SVG-спрайтов при помощи анкерных идентификаторов
  • simuari: SVG стеки
  • SVG.js — «Упрощённая библиотека для манипуляции и анимации SVG»
  • В Emmet есть отличный способ генерировать data URI для SVG прямо в редакторе кода
  • В Compass также есть вспомогательное средство для data URI
  • Adobe: Стилизация SVG
  • Эндрю Дж. Бейкер (Andrew J. Baker): Приручаем зверя SVG
  • Альтернатива Illustrator: Inkscape, Sketch
  • Кристер Кари (Krister Kari): Использование SVG-изображений для мобильных браузеров

Нельзя не упомянуть видео Кайла Фостера «Последовательность оптимизации SVG»:

Примечания

1. Говоря о браузере Android 2.3, вот. Но если вам никак не обойтись без поддержки родного браузера, вот.

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

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

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