Что такое SVG? Поддержка старых браузеров.

Содержание

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

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

Поддержка браузера .SVG

SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотрите на этот пример!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте дальше!

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

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

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

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

Вот так:

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

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

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

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

Видите, насколько сильно теперь SVG похоже на HTML?

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

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

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

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

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

Check out this Pen!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Или же Матиас Биненс (Mathias Bynens) предлагает свои приёмы:

Используйте или чтобы пропустить запись в файл и просто скопировать выходные данные в кодировке base64 в буфер без переносов строки.

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

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

… взгляните также на это видео + слайды.


Примечания

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

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

Что такое SVG? Поддержка старых браузеров.

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

Теперь давайте более подробно рассмотрим эту технику.

Адаптивная SVG: метод «человека, ищущего работу».

Веб-сайт адаптивных иконок Харрисона реализован довольно просто. Из него вытекает хорошо известная техника изображений-спрайтов (легко перемещаемый по экрану растровый графический элемент, часто реализуемый с помощью аппаратных средств, широко используются в анимации). Если вы не знакомы со спрайтами, то позвольте мне немного рассказать о них. Создание изображения-спрайта – это метод, который ранее использовался только для растровых изображений с целью борьбы с плохой производительностью сети. Идея заключается в том, чтобы объединить множество мелких изображений в единый файл. Как следствие, клиент должен будет скачивать с сервера только одно изображение.

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

Техника Харрисона позволяет выполнять то же самое, за исключением того, что вместо формата PNG (переносимая сетевая графика, реализация метода эффективного сжатия изображений, альтернатива формату GIF) используется SVG (масштабируемая векторная графика, формат основан на XML). Все его иконки, объединенные в одном файле, будут выглядеть следующим образом:


Все иконки объединены в одном SVG файле. Увеличенная версия изображения.

Затем этот файл будет установлен в качестве фона контейнера, в котором необходимо будет отображать один из этих значков:

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

Адаптивный SVG: метод «бедного человека».

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

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

Смотрите Pen inxym Ильи Пукальского (@pukhalski) на CodePen.

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

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

В результате, иконка теперь будет адаптироваться к размеру области просмотра — только теперь, CSS правила, информационные запросы и SVG формы будут размещаться в самом SVG файле. Измените размер браузера, и вы сможете увидеть, как работает этот пример:

Смотрите Pen uxIKB Ильи Пукальского (@pukhalski) на CodePen.

Адаптивная SVG: метод «человека с пистолетом».

Приведенный выше пример выглядит лучше, чем первый, но по-прежнему остаются некоторые вопросы:

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

Глядя на хореографию контента …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by Newsbot

Метки:coding.smashingmagazine.com, редакторский перевод

.

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

Закрыть меню