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

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

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

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

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

б64

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

СВГО

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

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

SVG ОМГ

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

Генератор слов Shapecloud

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

Чтобы загрузить SVG в Shapecloud, нажмите «Загрузить форму‘. Затем нажмите «Нажмите, чтобы выбрать файл» и выберите файл SVG, который хотите загрузить.

Когда вы закончите создание, вы можете мгновенно загрузить дизайн на свой компьютер, телефон или планшет. Дизайн можно скачать в формате PNG, SVG или PDF.

SVG сейчас

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

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

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

SVG Цирк

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

SVG-спрайт

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

Квази

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

Обычный узор

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

Генератор треугольников

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

Экспорт PSD в SVG

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

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

SVG-фильтры

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

SVG морфеус

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

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

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

Chartist.js

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

Генератор тире штрихов SVG

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

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

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