Обзор SVG Sprite Techniques Creation | Максим Егоров
УА   РУ   EN   FR
 


  • Арт-директор
    Максим Егоров

    Дизайнер
    Генадий Степаненко

    Менеджер
    Екатерина Устинова


Обзор SVG Sprite Techniques Creation

25.10.2014

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

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

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

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

ПРЕДПОСЫЛКИ
Содержание этой статьи предполагает, что вы знакомы с SVG . Если вы никогда не работали с SVG и прежде, вы можете взглянуть на некоторые из вводных практических занятий, охватывающих SVG синтаксиса, структура и вложения методы. Я рекомендую следующее:

SVG основы: Использование SVG .
Структура: структурирование, группировка и ссылок на них SVG - <г> , <использование> , <DEFS> и <символ> Элементы . Мы упомянем <использование> и <символ> совсем немного в этой статье.
Вложения методы: Styling и анимации SVG с с CSS . Статья охватывает несколько тем, но раздел связан фокусируется на вложение методы.
Сборник SVG ресурсов , составленный Крис Койьер - содержит ресурсы для почти каждый аспект SVG вы могли бы быть заинтересованы в.
И если вы новичок в концепции spriting, Крис Койьер в CSS спрайты объясняет все о них.

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

С предпосылок на месте, давайте перейдем к spriting SVG с!

ПЕРЕД ТЕМ, КАК СПРАЙТ ...
Для того, чтобы создать SVG спрайт со своими иконами, вы, конечно, нужно, чтобы эти иконки готов к использованию.

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

Каждая иконка индивидуальный .svg файлов.

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

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

HTML ВСТРОЕННЫЙ SVG СПРАЙТЫ
С SVG является XML код, он может быть встроен встроенный в HTML документ в виде кода острова с помощью <SVG> элемент. Крис Койьер писал о этой технологии в первую очередь на CSS -Tricks.

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

:
БЕЗ ГМО
© 1999 — 2017 Студия Максима Егорова

Электронная почта: maxim@google.com
Телефон: +380 44 389-78-22