• 8 минут чтения

• Инструменты, SVG

• Поделись ТвиттерЛинкедин

Чтобы помочь вам наилучшим образом использовать этот потенциал и правильно работать с SVG, эта статья предоставит вам инструменты и ресурсы для упрощения редактирования, преобразования, оптимизации и доставки SVG. Мы рассмотрим, что вы можете сделать, чтобы сделать ваш SVG-код компактным и производительным, углубимся в работу с ошибками браузера и дадим советы по разработке системы значков.

Это ни в коем случае не исчерпывающее руководство по теме. Вместо этого в статье основные выводы из упомянутых ресурсов сведены к легко усваиваемым фрагментам, которые вы можете втиснуть в перерыв на кофе. промежуточное просветление SVG. Если вы хотите погрузиться глубже, Сара Суэйдан написала исчерпывающую главу по освоению SVG для адаптивного веб-дизайна и не только для Smashing Book 5. Приятного использования SVG!

Дальнейшее чтение на SmashingMag:

• Переосмысление адаптивного SVG
• Стилизация и анимация SVG с помощью CSS
• Несколько различных способов использования спрайтов SVG в анимации
• Создание анимаций Cel с помощью SVG

Бесплатные редакторы SVG

Быстрое редактирование SVG можно выполнять прямо в разметке, но если они более сложные, вам пригодится бесплатное редактирование SVG с открытым исходным кодом. Редактор SVG полностью основан на веб-интерфейсе и работает в любом современном браузере. Помимо функций просмотра и редактирования, он предлагает ряд параметров рисования и функций импорта. Удобный.

Более универсальной альтернативой является Inkscape. Бесплатный редактор векторной графики с открытым исходным кодом предоставляет ряд инструментов для рисования и управления объектами, а также импортирует и экспортирует не только SVG, но и AI, EPS, PS и PNG. Его вывод SVG является одним из самых чистых.

Еще один бесплатный редактор векторной графики — Boxy SVG. Он основан на веб-технологиях и, таким образом, не только работает в веб-браузерах на основе Chromium, как на вашем компьютере с Mac OS X, Windows, Linux и Chrome OS, но также выводит код, созданный с учетом браузеров.

Инструменты преобразования SVG

Если вы не хотите создавать свой SVG с нуля, ряд инструментов браузера поможет вам экспортировать существующие изображения в векторную графику — без трудоемкого процесса ручной трассировки. PicSVG, например, позволяет загружать изображение прямо на сайт, и SVG создается мгновенно. Он конвертирует из PNG, JPEG и GIF.

Vectormagic предлагает более сложные функции. Вывод становится более детализированным, а инструмент дает вам больше контроля, позволяя просматривать результат и настраивать такие параметры, как уровень детализации и цвет. Две конверсии бесплатны после регистрации на сайте, для дальнейшего использования доступны планы ежемесячной подписки, начиная с 7,95 долларов США.

Если вам нужно преобразовать растровое изображение в SVG, ознакомьтесь с px2svg Эрика Мейера. Сценарий PHP использует оптимизацию цветового исполнения и рисует заполненные прямоугольники, чтобы воссоздать 8-битный вид исходного изображения.

Оптимизация и доставка SVG

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

Учебник по оптимизации SVG для использования в Интернете

Хороший пример того, как это сделать, дал Андреас Ларсен. В его серии статей из трех частей вы узнаете, как уменьшить размер файла — уже при создании векторной графики, а также при работе с SVG от других авторов и с кодом, экспортированным из графического редактора. Ключевой вывод: оптимизация ваших путей за счет использования меньшего количества узлов и дескрипторов, целых чисел и сетки, которая настолько велика, насколько это необходимо, — это эффективные способы сэкономить вам байты.

Кроме того, инструменты оптимизации, такие как svgo, избавляют код SVG от излишнего раздувания (однако будьте осторожны при их использовании: ручная оптимизация может быть лучшим вариантом, когда вам нужно сохранить определенную структуру в SVG, например, для анимации). целей), и, как описывает Андреас Ларсен, вы также можете открыть SVG в Atom с предварительным просмотром SVG в реальном времени, чтобы вручную удалить лишнюю информацию, такую ​​как ненужные запятые и пробелы, прозрачные пути, которые вам не нужны, а также метаданные и классы, созданные редактор. Как показывает эксперимент с логотипом LinkedIn, сохранение более 85% размера файла без каких-либо видимых изменений во внешнем виде не является чем-то необычным.

Создание и экспорт улучшенных SVG для Интернета с помощью Illustrator

В своих «Советах по созданию и экспорту лучших SVG для Интернета» Сара Суэйдан предлагает девять основных советов по тому, как сделать экспортированный код SVG чище. Одним из них является использование простых элементов формы, таких как <circle>, <rect> или <line> вместо <path>s, так как они более удобочитаемы и редактируются вручную, поскольку их <path> аналоги.

Экспорт чистого кода SVG из Sketch

Если вы когда-либо экспортировали SVG-файл из Sketch, вы знаете, что полученный из него код беспорядочный и загроможденный, что в худшем случае может негативно сказаться на том, как действует SVG, если вы захотите манипулировать им в код позже. Чтобы решить эту проблему, Шон Кестерсон придумал четырехэтапный рабочий процесс.

Основные выводы: установите положение артборда на четные числа и не используйте половинные пиксели, иначе Sketch добавит ненужные transform к вашему коду. Удалите любую прозрачную ограничивающую рамку и используйте вместо этого CSS, иначе Sketch экспортирует рамку, что затруднит масштабирование вашего SVG. И последнее, но не менее важное: каждый раз, когда вы поворачиваете что-либо в Sketch, добавляется rotate атрибут, и, если вы попытаетесь удалить этот бит из кода, он автоматически повернет вашу графику обратно к исходному виду. Решение может быть обходным, но, похоже, это единственный способ обойти вращение: откройте SVG в Illustrator, поверните его там и перетащите обратно в Sketch.

Оптимизация доставки SVG

Конечно, так же важно для производительности вашего сайта, как и работа с чистым кодом, то, как вы доставите SVG в конце. Знаете ли вы, например, что вы можете сжать ваши файлы SVG и сэкономить в среднем 80% размера файла? Если вы планируете предоставить резервное изображение PNG для браузеров, не поддерживающих SVG, Сара Суэйдан также рекомендует установить резервное изображение в качестве фонового изображения на <div> впрыскивается между открытием и закрытием object тег вместо предоставления его в качестве переднего плана img. Поступая таким образом, вы не позволяете браузерам с поддержкой SVG запрашивать изображения SVG и PNG и тем самым избегаете одного ненужного HTTP-запроса.

Исправление масштабирования SVG в Internet Explorer

Ряд ошибок в Internet Explorer 9-11 препятствует правильному масштабированию встроенных SVG. Факт, который особенно проблематичен для SVG с переменной шириной. Николас Галлахер canvashack предлагает обходной путь. Идея, лежащая в основе этого: поскольку canvas элемент с width и height set сохраняет соотношение сторон даже при масштабировании одного измерения, вы можете использовать это поведение и использовать canvas в качестве масштабируемой рамки для сохранения соотношения сторон вашего SVG. Для этого вы размещаете SVG так, чтобы он заполнил пространство, созданное этим фреймом, и устанавливаете высоту canvas к 100%. Таким образом, canvas будет масштабироваться в зависимости от высоты корневого элемента компонента, как это делают SVG в поддерживающих браузерах. Умная.

Создание системы иконок SVG

Масштабируемость и гибкость SVG делают его отличной альтернативой традиционным иконочным шрифтам. И по сравнению с иконочными шрифтами, где пользователь ничего не видит в случае сбоя шрифта, SVG также имеет то преимущество, что изящно откатывается к PNG (то есть, если предоставляется запасной вариант). Чтобы создать систему значков с помощью SVG, сохраните все свои SVG в одной папке и объедините их в один файл SVG либо вручную — Крис Койер описывает, как это сделать, — либо вы можете позволить плагину Grunt grunt-svgstore или IcoMoon сделать это. работа. Теперь вам нужно только вставить SVG в верхнюю часть документа, и вы готовы использовать и стилизовать свои значки так, как вам нравится.

Какие ваши любимые инструменты и ресурсы для плавного рабочего процесса SVG? Дайте нам знать в комментариях ниже!

(иль)