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.
SVGO
Экспортируемый SVG может содержать ненужную информацию, которую можно удалить, не влияя на результат рендеринга. Если вы хотите удалить метаданные редактора, комментарии или скрытые элементы, вы можете использовать SVGO.

Вы можете ввести SVGO через npm, $ [sudo] npm установить -g svgo или использовать Версия с графическим интерфейсом который предлагает перетаскивание, чтобы обработать вашу оценку SVG.
SVG OMG
SVG OMG превращает командную строку SVGO (предыдущий инструмент) в версию с графическим интерфейсом, которая более интуитивно понятна и проста в использовании. Просто переключайте кнопки, чтобы активировать или деактивировать каждую функцию. В конце вы можете получить результат в виде файлов изображений и кода.
SVG сейчас
Когда вы работаете в Illustrator, экспортированный SVG содержит некоторую информацию, которая не является необходимой. С помощью этого инструмента вы получите оптимизированную версию экспортированного SVG прямо из рабочего пространства Illustrator. Этот инструмент добавляет панель с некоторыми опциями для оптимизации SVG. Вы можете получить SVG сейчас из Страница дополнений к 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 Generator. Вы можете установить случайность / вариант цвета, размер гранулярности и выбрать цветовую палитру для работы. Этот инструмент является версией GUI Trianglify,
SVG Градиент
Вы знаете, что вы можете создавать градиенты с помощью CSS, но знаете ли вы, что вы можете сделать то же самое с SVG? Самый простой способ создать градиент в SVG — использовать этот инструмент. Просто введите start и stop color, и вы получите код для сгенерированного результата. Откат на CSS также включен.
Экспорт PSD в SVG
Если вы используете Photoshop в качестве редактора изображений для своей работы, иногда вам может потребоваться преобразовать ваш дизайн в рабочей области Photoshop в SVG, который не поддерживается в Photoshop. Загрузите Script для этого инструмента, затем скопируйте в папку Adobe Photoshop / presets / scripts.

Переименуйте имя векторного слоя с расширением SVG (например, layer1 становиться layer1.svg), и теперь вы можете запустить скрипт из File> Scripts> PS в SVG.
SVG Filters
Знаете ли вы, что с помощью SVG вы можете добавлять такие эффекты, как оттенок, насыщенность, размытие, линейное наложение цветов и многие другие, к изображениям? Вот инструмент, который визуализирует эти эффекты, а затем дает вам фрагмент, чтобы облегчить внедрение эффекта в ваш проект.
SVG Morpheous
SVG Morpheous — это библиотека JavaScript, которая позволяет изменять значок SVG из одной фигуры в другую. Вы можете установить эффект замедления, продолжительность анимации перехода, а также направление вращения.
Генератор пути клипа
SVG позволяет щелкать изображение клипа с помощью Shape. Это довольно легко, если форма имеет форму квадрата или круга. Но что, если форма имеет много точек или многоугольную форму? Вот где вам нужен этот инструмент Clip Path Generator.
Chartist.js
Chartist.js — это библиотека для создания настраиваемых адаптивных диаграмм. Он использует SVG для отображения графиков, которые также можно анимировать с помощью SMIL. С помощью этой библиотеки вы можете создавать линейные диаграммы, круговые диаграммы, гистограммы и другие типы диаграмм и даже добавлять анимация им.
Штрих-генератор SVG
Это простой инструмент для создания пунктирных линий с использованием SVG stroke-dasharray. Сначала выберите один тип тире из списка, затем настройте его с точки зрения ширины, высоты, поворота или цвета. После этого вы можете взять HTML-код и CSS, чтобы применить эту черту в вашем проекте.
Метод Draw: Простой редактор SVG
Метод Draw — это веб-редактор SVG с интуитивно понятным интерфейсом, который поставляется с инструментами на обеих сторонах холста. Вы можете рисовать линии, фигуры, вводить текст или использовать встроенные фигуры, а затем редактировать свойства нарисованных объектов. Экспорт изображения в формате SVG (также поставляется в формате SVG base64) или сохранение непосредственно в формате PNG.
Экспорт Flash в анимированный SVG
Хотя он уже не очень популярен, есть шанс, что некоторым из вас будет трудно избавиться от Flash. Если это так, вы можете превратить вашу флеш-анимацию в SVG, чтобы она работала совместимо с новыми технологиями. Этот инструмент является расширением приложения Flash и может работать на CS5, CS6 и CC.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *