Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. SVG
Webdesign

Реализация кросс-браузерных спрайтов в формате SVG

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

В этом руководстве мы разберем основы реализации некоторых иконок в формате SVG (* Scalable Vector Graphics – масштабируемая векторная графика; открытый стандарт на язык разметки масштабируемой векторной графики; основанный на XML формат отображения векторной графики в Web-страницах, одобренный W3C . Использование в Web-страницах векторной графики вместо растровой позволяет уменьшить размер файла, содержащего рисунок, выводить изображение одинаково вне зависимости от разрешения экрана, а также упростить создание анимированных изображений. Специально для мобильных устройств, которые не обладают значительными вычислительными мощностями, были разработаны два варианта стандарта: SVG Tiny (SVGT) и SVG Basic (SVGB)), как предоставить запасной вариант и как их преобразовать в спрайт (* легко перемещаемый по экрану графический элемент (например, пуля или ракета), часто реализуемый с помощью аппаратных средств. Спрайты широко используются в анимации) в формате SVG.

Основы реализации иконок в формате SVG

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

иконки взяты с flaticon

На скриншоте выше вы видите, что я использую иконки (для Twitter, Dribbble и GitHub), чтобы предоставить ссылки на мои профили в сети. Я скачал эти иконки с сайта flaticon, который предоставляет широкий выбор иконок и символов как в векторном, так и в растровом форматах.

PNG и SVG

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

Я воспользовался Sketch (* редактор векторной графики для macOS) для вывода моих иконок в формате PNG, так что я воспользуюсь им снова для приготовления моих иконок к использованию в формате SVG.

My chosen icons in Sketch with named layers groups

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

Экспортирование изображений в формате SVG

Теперь экспортируем иконки в формате SVG, что легко выполняется при помощи инструмента Sketch для вырезания слоев. За подробностями о том, как это работает, обращайтесь к Understanding Sketch’s Export Options. Я буду экспортировать их в качестве отдельных файлов и помещать в папку images моего проекта.

Обычно, для того чтобы отобразить изображение на вашем сайте, вы бы добавили ссылку на ресурс при помощи элемента с атрибутом src или каким-то подобным образом:

Однако в случае с SVG имеется множество различных способов добавления их в HTML-документ. Например, мы можем встроить в документ собственно код SVG; ниже показан, как мог бы выглядеть подобный код:

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

Добавление иконок в формате SVG в документ HTML

Давайте начнем с базовой разметки HTML-страницы, включающей иконки в формат PNG вместе с их соответствующими якорными элементами и контейнер:

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

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

Очищенный код SVG

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

Обратите внимание на элементы, которые я удалил. Сейчас элементы , <desc> и <defs> нам не нужны, однако возможно, что они нам пригодятся позже в этом руководстве. Также имеется пара элементов , которые используются для указания групп и соответствуют группам, созданным в моем документе Sketch. По умолчанию Sketch помещает все внутри страницы, поэтому у нас имеется элемент Вы можете удалить этот элемент, поскольку он нам не нужен (группа, расположенная внутри него, более важна для нас). Sketch действительно предоставляет опцию для получения очищенного кода SVG при экспортировании, однако нет ничего плохого, если мы очищаем его самостоятельно.

Последнее, что нужно выполнить на данном этапе, – удалить атрибуты height и width в самом элементе SVG. Этот момент необходимо будет скомпенсировать в моем файле CSS, как показано ниже:

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

Совет: Удостоверьтесь, что изображение действительно является изображением в формате SVG, увеличивая его масштаб при помощи комбинации клавиш Command-+ при просмотре его в браузере. Изображение должно оставаться отчетливым, независимо от того, насколько вы его увеличили.

Предоставление запасного варианта

Если вы используете код SVG для выполнения на клиентской стороне, то вас, возможно, интересует, как обстоят дела с поддержкой браузерами этой технологии. Встроенные изображения в формате SVG отображаются корректно во всех браузерах за исключением Internet Explorer 8 (и более ранних версий) и Opera Mini. Сервис Can I Use в данный момент (* октябрь 2014 на момент опубликования оригинального руководства) сообщает, что IE8 используют около 4% всех пользователей, а Opera Mini – около 3%. Так что в вашем случае, возможно, и нет необходимости в предоставлении запасного варианта, однако я покажу вам решение.

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

Удаление комментариев

Для начала я удалю комментарии. Нам теперь необходимо переместить элемент img> вверх в сам элемент svg>, сразу после группы, содержащей собственно иконку.

Далее я оберну в характерный для языка SVG элемент под названием foreignObject. Если браузер не может интерпретировать векторную информацию SVG, то он обратится вместо этого к «нехарактерному объекту» и перейдет к использованию расположенного в нем элемента . Также мы должны дать знать браузеру о том, что он должен сделать выбор в пользу векторной версии изображения, если он ее поддерживает. Именно для этого и необходим элемент , в который я поместил и группу, и foreignObject.

Ниже приводится обновленная разметка:

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

Создание спрайта в формате SVG

Спрайты SVG работают подобно традиционным спрайтам. Простейший вариант спрайта – коллекция графических элементов, скомбинированных в одно изображение. Далее каждое изображение выбирается при помощи CSS и HTML, обычно за счет указания координат и «окна» просмотра.

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

Для начала я добавлю новый элемент svg> внутри элемента head> на моей странице, сразу перед закрывающим тегом. В этом элементе svg> будут содержаться все добавленные мною ранее на странице иконки.

Далее мне нужно переместить мои иконки в него. Мне не нужно перемещать весь элемент <svg>, а только элемент для добавления группы и его содержимое. Я могу собрать иконки в элементе <svg> в заголовке.

Обратите внимание: Если вы умеете работать с Grunt, то для вас имеется плагин, который автоматически объединит все ваши отдельные SVG-файлы.

Скрываем!

Теперь, когда у нас имеются все наши иконки в заголовке, нам нужно их скрыть; если мы добавим атрибут display=”none” к svg>, то все иконки не будут появляться вверху страницы.

Определение каждой иконки

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

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

Теперь иконки определены, однако нам необходим метод для их использования, для чего и нужен элемент use. Благодаря элементу мы можем выбрать какой-либо элемент из элемента и добавить его в любом месте страницы. Мы выбираем элемент при помощи его ID, почему нам и важно было дать имена нашим иконкам в изначальном документе Sketch.

Обратите внимание на использованные в примере выше ID и затем взгляните, как я использую их при помощи элемента use, например так: use xlink:href="#twitter-icon">/use>.

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

Совершенствование ваших спрайтов в формате SVG

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

В коде ниже я заменил элементы в моем SVG-спрайте на элемент symbol, а также переместил атрибут viewbox из элементов svg> на странице в новые элементы symbol.

При использовании symbol> мы не только поступаем семантически более правильно, как минимум в моем примере, но и избавляемся от необходимости повторения атрибута viewbox в наших элементах svg> и use>. Мы можем вернуть удаленные нами ранее элементы title и desc и воспользоваться ими для улучшения удобства использования наших иконок.

Обратите внимание: Учтите, что содержимое элементов по умолчанию отображается в IE7.

За счет замены элементов g на symbol мы смогли добавить все эти улучшения. Также мы можем удалить элемент из спрайта SVG, благодаря чему наш код станет чище.

Заключение

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.