20 Корисні інструменти SVG для кращої графіки
SVG набирає популярність у веб-дизайні в ці дні, і ви можете використовувати інструменти, такі як Illustrator або Inkscape для створення графіки SVG. Але коли справа доходить до веб-дизайну, ми завжди повинні оптимізувати для більш легких результатів.
Ось те 20 інструментів, які можна використовувати для роботи з SVG швидко і ефективно. Ми маємо в основному онлайн-інструменти, які можуть допомогти в оптимізації, перетворення, створення шаблонів, і багато іншого.
Інтерактивна система координат SVG
Коли ви працюєте з SVG, ви не можете залишити його координати. Це відмінний інтерактивний інструмент Сари Суїден, щоб допомогти вам дізнатися, як координує роботу SVG. Використання viewBox і preserveAspectRatio на SVG, керуючись оранжевими і фіолетовими лініями і зручною лінійкою, ви можете грати під час навчання функції SVG.
b64
b64 - це простий інструмент оптимізуйте зображення, потім перетворіть їх у формат base64. Ви можете скинути ваші зображення SVG (інші формати, такі як JPG і PNG працювати теж), а потім захопити CSS з base64 фон-зображення в результаті.
SVGO
SVG, що експортується, може містити непотрібної інформації які можуть бути видалені без впливу на результат візуалізації. Якщо ти хочеш видалити метадані редактора, коментарі або приховані елементи, ви можете використовувати SVGO.
Ви можете встановити SVGO через npm, $ [sudo] npm install -g svgo або скористайтеся графічною версією, яка дозволяє перетягувати оптимізацію SVG.
SVG OMG
SVG OMG повертає командний рядок SVGO (попередній інструмент) в a Версія GUI що більш інтуїтивно зрозумілий і простий у використанні. Просто перемикання кнопок , щоб активувати або деактивувати кожну функцію. Зрештою ви можете отримати результат як файли зображень і код.
SVG Now
Коли ви працюєте в Illustrator, експортований SVG містить деяку інформацію, яка не потрібна. За допомогою цього інструменту ви будете отримати оптимізовану версію експортованого SVG прямо з робочого простору Illustrator. Цей інструмент додає панель з деякими опціями для оптимізації SVG. Ви можете отримати SVG Now зі сторінки Creative Add-ons.
Конвертор SVG в PNG
Хочу експортувати файли SVG у форму PNG? Не відкриваючи таких програм, як Illustrator? Використовуйте цей інструмент конвертера SVG для PNG, щоб отримати виводи зображення у форматі PNG, а також URI даних PNG Base64, якщо вам це потрібно.
SVG Цирк
Якщо ви вважаєте, що анімація завантажувача прохолодна, тепер її можна легко створити за допомогою SVG SVG Цирк. Інструменти дозволяють зробіть свій власний завантажувач, лічильник або що-небудь подібне, використовуючи петельну анімацію. Встановіть "Актор", позицію, розмір, колір та інші з панелі, а потім експортуйте, щоб отримати результати.
SVG Sprite
SVG Sprite - це модуль Node.js, який оптимізує роботу купу файлів SVG, і випікає їх у SVG-спрайт-типи включаючи традиційні CSS-спрайти для фонових та / або переднього плану, SVG-стеків тощо.
Квазі
З квази можна генерують квазікристалічні зображення подобається те, що ви бачите нижче. Цей генератор є експериментальним, але результати, безумовно, прохолодні. Ви можете грати, змінюючи значення параметрів, а потім завантажуйте результати за допомогою кнопки "Зберегти SVG".
Звичайний малюнок
Створення шаблонів за допомогою SVG ніколи не було простіше або веселіше. Завантажте зображення, зменшіть або зменшіть інтервал, обертайте та змінюйте колір, поки не отримаєте гарний малюнок. Перед завантаженням можна переглянути результат.
Генератор Trianglify
Створюйте красиві геометричні візерунки SVG с Генератор Trianglify. Ви можете встановити колір / варіант, колір деталізації та вибрати колірну палітру для роботи. Цей інструмент являє собою GUI версію Trianglify.
Градієнт SVG
Ви знаєте, що ви можете зробити градієнти з CSS, але чи знаєте ви, що ви можете зробити те ж саме з SVG? Найпростіший спосіб генерувати градієнт на SVG це за допомогою цього інструменту. Просто введіть початковий і стоп-колір, після чого ви отримаєте код для отриманого результату. Також включено резервне копіювання на CSS.
Експортувати PSD у SVG
Якщо ви використовуєте Photoshop як редактор зображень для вашої роботи, іноді вам може знадобитися конвертувати ваш дизайн у робочу область Photoshop у SVG, формат, який не підтримується у Photoshop. Завантажте скрипт до цього інструменту, а потім скопіюйте його на Adobe Photoshop / пресети / сценарії папки.
Перейменувати назву векторного шару з розширенням SVG (наприклад, layer1 стає layer1.svg) і тепер можна запускати сценарій з Файл> Сценарії> PS до SVG.
Фільтри SVG
Чи знаєте ви, що з SVG ви можете додавати ефекти, такі як відтінок, насиченість, розмиття, лінійне накладання кольорів і багато інших зображень? Ось такий інструмент візуалізує ці ефекти, а потім дає вам фрагмент щоб зробити його легким вбудувати ефект у ваш проект.
SVG Morpheous
SVG Morpheous - це бібліотека JavaScript, яка дозволяє перетворити піктограму SVG з однієї форми на іншу. Можна встановити ефект ослаблення, тривалість анімації переходу, а також напрямок обертання.
Генератор шляху кліпу
SVG дозволяє вам натискати на кліп зображення за допомогою Shape. Це досить просто, якщо форма має форму квадрата або кола. Але що якщо форма одна з великою кількістю точок або є багатокутною формою? Ось де вам потрібен цей інструмент генератора шляхів.
Chartist.js
Chartist.js - це бібліотека для створювати настроювані реагуючі діаграми. Він використовує SVG для відображення діаграм, які також можуть бути анімовані за допомогою SMIL. За допомогою цієї бібліотеки ви зможете створювати лінійну діаграму, кругову діаграму, гістограму та інші типи діаграм і навіть додавати до них анімацію..
Генератор штрихів SVG
Це простий інструмент генерувати пунктирні лінії використання SVG обведення. Спочатку виберіть один тип тире зі списку, а потім налаштуйте його з точки зору ширини, висоти, обертання або кольору. Після цього ви можете взяти HTML-код і CSS, щоб застосувати цю лінію тире у вашому проекті.
Метод Draw: Простий редактор SVG
Метод Draw - це веб-редактор SVG з інтуїтивно зрозумілий інтерфейс, який поставляється з інструментами по обидві сторони полотна. Можна малювати лінії, фігури, вводити текст або використовувати вбудовані форми, а потім редагувати властивості намальованих об'єктів. Експортуйте зображення у форматі SVG (також у форматі SVG base64) або збережіть його безпосередньо в PNG.
Експортувати Flash у анімаційний SVG
Незважаючи на те, що це не дуже популярне, є ймовірність того, що деякі з вас важко відпустити Flash. Якщо так, то можна перетворіть вашу флеш-анімацію на SVG, щоб вона працювала сумісно з новими технологіями. Цей інструмент формує розширення до програми Flash і може працювати на CS5, CS6 і CC.
Ви можете експортувати в SVG, коли мова йде про Фігури, Символи растрових зображень, Класичні рухи Tweens, Фігури форми (для інших, є спірний успіх).
