20 Полезни SVG инструменти за по-добра графика
SVG набира популярност в уеб дизайна в наши дни и можете да използвате инструменти като Illustrator или Inkscape за създаване на SVG графики. Но когато става въпрос за уеб дизайн, ние винаги трябва да оптимизираме за по-леки резултати.
Ето 20 инструменти, които можете да използвате за работа с SVG бързо и ефективно. Ние имаме предимно онлайн инструменти, които могат да помогнат за оптимизиране, преобразуване, създаване на модели и др.
Интерактивна SVG координатна система
Когато работите с SVG, не можете да оставите координатите си. Това е чудесен интерактивен инструмент от Сара Суиден, за да ви помогне научете как SVG координира работата. Използвайки viewBox и preserveAspectRatio В SVG, ръководен от оранжеви и лилави линии и удобен владетел, можете да играете, докато научавате как функционира SVG.
В64
В64 е прост инструмент за оптимизирайте изображенията, след което ги превърнете в 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 (предишния инструмент) в a GUI версия по-интуитивен и лесен за използване. Просто превключвате бутоните за да активирате или деактивирате всяка функция. В крайна сметка можете да вземете резултата като файлове с изображения и код.
SVG Сега
Когато работите в Illustrator, експортираният SVG съдържа информация, която не е необходима. С този инструмент ще го направите получите оптимизираната версия на експортирания ви SVG направо от работното пространство на Illustrator. Този инструмент добавя панел с някои опции за оптимизиране на SVG. Можете да получите SVG Now от страницата за добавки на Creative Cloud.
SVG към PNG конвертор
Искам да експортиране на SVG файлове в PNG форма? Без да се отварят приложения като Illustrator? Използвайте този инструмент за конвертиране на SVG към PNG, за да получите изходни изображения в PNG формат, както и в PNG Base64 URI данни, ако имате нужда от.
SVG Цирк
Ако смятате, че анимациите за зареждане са страхотни, сега можете да ги създадете лесно чрез използване на SVG SVG Цирк. Инструментите ви позволяват направете свой собствен товарач, ротатор или нещо подобно, използвайки анимация с примка. Задайте "Актьор", позиция, размер, цвят и други от панела, след това експортирайте, за да получите резултатите.
SVG Sprite
SVG Sprite е модул Node.js, който оптимизира куп SVG файлове, и ги пече в SVG sprite-типове включително традиционни CSS спрайтове за фон и / или преден план, SVG стекове и др.
Квази
С квази можете генериране на квазикристални изображения харесва това, което виждате по-долу. Този генератор е експериментален, но резултатите със сигурност са готини. Можете да играете, като промените стойността на опциите, след това изтеглете резултатите с бутона „Save SVG“.
Обикновен шаблон
Създаване на шаблони с SVG никога не е било по-лесно или по-забавно. Качете изображението, намалете или променете разстоянието, завъртете и прецъфте, докато получите красив модел. Можете да прегледате резултата преди да го изтеглите.
Trianglify Generator
Създавайте красиви SVG геометрични модели с Trianglify Generator. Можете да зададете цветовата случайност / вариант, размера на детайлност и да изберете цветова палитра, с която да работите. Този инструмент е GUI версия на Trianglify.
SVG Gradient
Знаете, че можете да правите градиенти с 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. Това е доста лесно, ако формата е във формата на квадрат или кръг. Но какво ако формата е с много точки или е многоъгълна форма? Това е, когато имате нужда от този инструмент Clip Path Generator.
Chartist.js
Chartist.js е библиотека на създаване на адаптивни графики с висока степен на адаптация. Той използва SVG за показване на графиките, които също могат да бъдат анимирани с помощта на SMIL. С тази библиотека можете да създавате линейна диаграма, кръгова диаграма, бар диаграма и други типове графики и дори да добавяте анимация към тях.
SVG генератор на черта
Това е прост инструмент за генерират пунктирани линии използване на SVG инсулт-dasharray. Първо изберете един тип тире от списъка, след което го персонализирайте по отношение на ширина, височина, ротация или цвят. След това можете да вземете HTML кода и CSS, за да приложите тази тире в проекта си.
Метод Draw: Обикновен SVG редактор
Method Draw е уеб-базиран SVG редактор с интуитивен интерфейс, който идва с инструменти от двете страни на платното. Можете да рисувате линии, форми, да въвеждате текст или да използвате вградени форми, след това да редактирате свойствата на изтеглените обекти. Експортирайте изображението във формат SVG (също и във формат SVG base64) или запишете директно в PNG.
Експортирайте Flash в анимирани SVG
Въпреки, че вече не е много популярна, има шанс някои от вас да се откажат от Flash. Ако е така, можете превърнете вашата флаш анимация в SVG, за да я поддържате съвместима с по-новите технологии. Този инструмент представлява разширение на приложението Flash и може да работи с CS5, CS6 и CC.
Можете да експортирате в SVG, когато става въпрос за фигури, символи на растерни изображения, класически движещи се Tweens, Shape tweens (за други има спорен успех).
