20 полезных инструментов SVG для лучшей графики

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

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

Интерактивная система координат SVG

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

B64

B64 это простой инструмент для оптимизировать изображения, а затем превратить их в формат base64. Вы можете удалить ваши изображения SVG (другие форматы, такие как JPG и PNG тоже работают), а затем получить CSS с base64 background-image в результате.

SVGO

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

Вы можете ввести SVGO через npm, $ [sudo] npm install -g svgo или используйте версию GUI, которая предлагает перетаскивание, чтобы обработать вашу оценку SVG.

SVG OMG

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

SVG сейчас

Когда вы работаете в Illustrator, экспортированный SVG содержит некоторую информацию, которая не является необходимой. С этим инструментом вы будете получить оптимизированную версию вашего экспортированного SVG прямо из рабочего пространства Illustrator. Этот инструмент добавляет панель с некоторыми опциями для оптимизации SVG. Вы можете получить SVG Now на странице дополнений Creative Cloud..

Конвертер SVG в PNG

Хочу экспортировать файлы SVG в форму PNG? Не открывая такие приложения, как Illustrator, сделать это? Используйте этот конвертер SVG в PNG для получения выходных изображений в формате PNG, а также URI данных PNG Base64, если вам это нужно.

SVG Circus

Если вы думаете, что анимация загрузчика хороша, теперь вы можете легко ее создать, используя SVG с SVG Circus. Инструменты позволяют вам сделать свой собственный загрузчик, спиннер или что-то подобное, используя петлевую анимацию. Установите «Актер», положение, размер, цвет и другие параметры на панели, затем экспортируйте, чтобы получить результаты.

SVG Sprite

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

квази

С квази вы можете генерировать квазикристаллические изображения как то, что вы видите ниже. Этот генератор является экспериментальным, но результаты, безусловно, классные. Вы можете поиграть, изменив значение параметров, а затем загрузить результаты с помощью кнопки «Сохранить SVG».

Простой шаблон

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

Генератор Trianglify

Создавайте красивые геометрические узоры SVG с Генератор Trianglify. Вы можете установить случайность / вариант цвета, размер гранулярности и выбрать цветовую палитру для работы. Этот инструмент представляет собой версию Trianglify с графическим интерфейсом.

SVG Градиент

Вы знаете, что вы можете создавать градиенты с помощью CSS, но знаете ли вы, что вы можете сделать то же самое с SVG? Самый простой способ генерировать градиент на SVG с помощью этого инструмента. Просто введите start и stop color, и вы получите код для сгенерированного результата. Откат на CSS также включен.

Экспорт PSD в SVG

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

Переименуйте имя векторного слоя с расширением SVG (например, layer1 становиться layer1.svg), и теперь вы можете запустить скрипт из Файл> Сценарии> PS в SVG.

SVG Filters

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

SVG Morpheous

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

Генератор пути клипа

SVG позволяет щелкать изображение клипа с помощью Shape. Это довольно легко, если форма имеет форму квадрата или круга. Но что если форма с множеством точек или многоугольная? Вот где вам нужен этот инструмент Clip Path Generator.

Chartist.js

Chartist.js это библиотека для создавать настраиваемые адаптивные графики. Он использует SVG для отображения графиков, которые также можно анимировать с помощью SMIL. С помощью этой библиотеки вы можете создавать линейные диаграммы, круговые диаграммы, гистограммы и другие типы диаграмм и даже добавлять к ним анимацию.

Штрих-генератор SVG

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

Метод Draw: Простой редактор SVG

Метод Draw - это веб-редактор SVG с интуитивно понятный интерфейс, который поставляется с инструментами на обеих сторонах холста. Вы можете рисовать линии, фигуры, вводить текст или использовать встроенные фигуры, а затем редактировать свойства нарисованных объектов. Экспорт изображения в формате SVG (также поставляется в формате SVG base64) или сохранение непосредственно в формате PNG.

Экспорт Flash в анимированный SVG

Хотя он уже не очень популярен, есть шанс, что некоторым из вас будет трудно избавиться от Flash. Если это так, вы можете превратите вашу флеш-анимацию в SVG, чтобы она работала совместимо с новыми технологиями. Этот инструмент является расширением приложения Flash и может работать на CS5, CS6 и CC.

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