Инструменты и ресурсы для редактирования, преобразования и оптимизации SVG

⭐
- 1 Дальнейшее чтение на SmashingMag:
- 2 Бесплатные редакторы SVG
- 3 Инструменты преобразования SVG
-
4
Оптимизация и доставка SVG
- 4.1 Учебник по оптимизации SVG для использования в Интернете
- 4.2 Создание и экспорт улучшенных SVG для Интернета с помощью Illustrator
- 4.3 Экспорт чистого кода SVG из Sketch
- 4.4 Оптимизация доставки SVG
- 4.5 Исправление масштабирования SVG в Internet Explorer
- 4.6 Создание системы иконок SVG
- 4.7 Заключение
Инструменты и ресурсы для редактирования, преобразования и оптимизации SVG
Сила 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 с переменной шириной. Николас Галлахер canvas
hack предлагает обходной путь. Идея, лежащая в основе этого: поскольку canvas
элемент с width
и height
set сохраняет соотношение сторон даже при масштабировании одного измерения, вы можете использовать это поведение и использовать canvas
в качестве масштабируемой рамки для сохранения соотношения сторон вашего SVG. Для этого вы размещаете SVG так, чтобы он заполнил пространство, созданное этим фреймом, и устанавливаете высоту canvas
к 100%
. Таким образом, canvas
будет масштабироваться в зависимости от высоты корневого элемента компонента, как это делают SVG в поддерживающих браузерах. Умная.
Создание системы иконок SVG
Масштабируемость и гибкость SVG делают его отличной альтернативой традиционным иконочным шрифтам. И по сравнению с иконочными шрифтами, где пользователь ничего не видит в случае сбоя шрифта, SVG также имеет то преимущество, что изящно откатывается к PNG (то есть, если предоставляется запасной вариант). Чтобы создать систему значков с помощью SVG, сохраните все свои SVG в одной папке и объедините их в один файл SVG либо вручную — Крис Койер описывает, как это сделать, — либо вы можете позволить плагину Grunt grunt-svgstore или IcoMoon сделать это. работа. Теперь вам нужно только вставить SVG в верхнюю часть документа, и вы готовы использовать и стилизовать свои значки так, как вам нравится.
Какие ваши любимые инструменты и ресурсы для плавного рабочего процесса SVG? Дайте нам знать в комментариях ниже!

(иль)
Source: https://smashingmagazine.com
Заключение
Вы ознакомились с статьей — Инструменты и ресурсы для редактирования, преобразования и оптимизации SVG
Пожалуйста оцените статью, и напишите комментарий.