20 Przydatne narzędzia SVG dla lepszej grafiki
SVG zyskuje coraz większą popularność w projektowaniu stron internetowych, a do tworzenia grafiki SVG można użyć narzędzi takich jak Illustrator lub Inkscape. Ale jeśli chodzi o projektowanie stron internetowych, zawsze powinniśmy optymalizować, aby uzyskać lżejsze wyniki.
Tutaj 20 narzędzi, których możesz użyć do szybkiej i efektywnej pracy z SVG. Mamy głównie narzędzia online, które mogą pomóc w optymalizacji, konwersji, tworzeniu wzorów i nie tylko.
Interaktywny układ współrzędnych SVG
Podczas pracy z SVG nie można opuścić jego współrzędnych. To świetne narzędzie interaktywne, które Sara Souiden Ci pomoże dowiedz się, jak działają współrzędne SVG. Używając viewBox i zachowaj proporcje na SVG, prowadzony pomarańczowymi i fioletowymi liniami oraz poręczną linijką, możesz grać podczas uczenia się, jak działają współrzędne SVG.
b64
b64 to proste narzędzie do optymalizuj obrazy, a następnie przekształć je w format base64. Możesz upuszczać swoje obrazy SVG (inne formaty, takie jak JPG i PNG też działają), a następnie pobrać CSS z obrazem tła base64 jako wynikiem.
SVGO
Eksportowany SVG może zawierać niepotrzebne informacje które można usunąć bez wpływu na wynik renderowania. Jeśli chcesz usuń metadane edytora, komentarze lub ukryte elementy, możesz użyć SVGO.
Możesz dołączyć SVGO za pośrednictwem npm, $ [sudo] npm install -g svgo lub użyj wersji GUI, która oferuje przeciągnij i upuść, aby przyspieszyć optymalizację SVG.
SVG OMG
SVG OMG włącza linię poleceń SVGO (poprzednie narzędzie) w Wersja GUI bardziej intuicyjny i łatwy w użyciu. Właśnie przełącz przyciski aby włączyć lub wyłączyć każdą funkcję. W końcu możesz pobrać wynik jako pliki obrazów i kod.
SVG teraz
Podczas pracy z programem Illustrator wyeksportowane pliki SVG zawierają pewne informacje, które nie są potrzebne. Z tym narzędziem będziesz uzyskać zoptymalizowaną wersję eksportowanego SVG bezpośrednio z obszaru roboczego programu Illustrator. To narzędzie dodaje panel z niektórymi opcjami do optymalizacji SVG. Możesz pobrać SVG teraz ze strony dodatków Creative Cloud.
Konwerter SVG na PNG
Chcieć eksportuj pliki SVG do formularza PNG? Bez otwierania aplikacji, takich jak Illustrator, aby to zrobić? Użyj tego narzędzia SVG do PNG Converter, aby uzyskać wyjścia obrazu w formacie PNG, a także PNG Base64 URI, jeśli jest to potrzebne.
Cyrk SVG
Jeśli uważasz, że animacje programu ładującego są fajne, teraz możesz je łatwo utworzyć za pomocą SVG Cyrk SVG. Narzędzia umożliwiają stwórz własną ładowarkę, spinner lub coś podobnego za pomocą zapętlonej animacji. Ustaw „Aktor”, pozycję, rozmiar, kolor i inne z panelu, a następnie wyeksportuj, aby uzyskać wyniki.
Sprite SVG
SVG Sprite to moduł Node.js, który optymalizuje kilka plików SVG, i piecze je w typach sprite'ów SVG w tym tradycyjne sprite'y CSS dla obrazów tła i / lub pierwszego planu, stosy SVG i inne.
Prawie
Z quasi można wygeneruj obrazy Quasicrystal jak to, co widzisz poniżej. Ten generator jest eksperymentalny, ale wyniki są zdecydowanie fajne. Możesz się bawić, zmieniając wartość opcji, a następnie pobrać wyniki za pomocą przycisku „Zapisz SVG”.
Zwykły wzór
Tworzenie wzorów za pomocą SVG nigdy nie było łatwiejsze i przyjemniejsze. Prześlij swój obraz, zmniejsz lub zmień odstępy, obracaj i zmieniaj kolor, aż uzyskasz piękny wzór. Możesz wyświetlić wynik przed pobraniem.
Generator trianglifów
Twórz piękne wzory geometryczne SVG z Generator trianglifów. Możesz ustawić losowość koloru / wariant, rozmiar ziarnistości i wybrać paletę kolorów do pracy. To narzędzie jest wersją GUI Trianglify.
Gradient SVG
Wiesz, że możesz tworzyć gradienty za pomocą CSS, ale czy wiesz, że możesz zrobić to samo z SVG? Najprostszy sposób generuj gradient na SVG jest za pomocą tego narzędzia. Wystarczy wpisać kolor start i stop, a następnie otrzymasz kod wygenerowanego wyniku. Dołączono również rezerwę CSS.
Eksportuj PSD do SVG
Jeśli używasz Photoshopa jako edytora obrazów do swojej pracy, czasami możesz potrzebować skonwertuj swój projekt na obszar roboczy Photoshop do SVG, który jest nieobsługiwanym formatem w Photoshopie. Pobierz skrypt do tego narzędzia, a następnie skopiuj do Adobe Photoshop / presety / skrypty teczka.
Zmień nazwę nazwy warstwy wektorowej na rozszerzenie SVG (np. Warstwa1 stanie się warstwą1.svg) i możesz teraz uruchomić skrypt z Plik> Skrypty> PS do SVG.
Filtry SVG
Czy wiesz, że dzięki SVG możesz dodawać do obrazów efekty takie jak odcień, nasycenie, rozmycie, nakładka koloru liniowego i wiele innych? Oto narzędzie, które wizualizuje te efekty, a następnie podaje fragment aby ułatwić osadzić efekt do twojego projektu.
SVG Morpheous
SVG Morpheous to biblioteka JavaScript, która pozwala na przekształcić ikonę SVG z jednego kształtu na drugi. Możesz ustawić efekt łagodzenia, czas trwania animacji przejścia, a także kierunek obrotu.
Generator ścieżki klipu
SVG pozwala na kliknięcie klipu obrazu z Shape. Jest to dość łatwe, jeśli kształt ma postać kwadratu lub okręgu. Ale co jeśli kształt jest jednym z wielu punktów lub ma kształt wielokąta? W tym miejscu potrzebujesz tego narzędzia Clip Path Generator.
Chartist.js
Chartist.js to biblioteka do tworzyć wysoce konfigurowalne wykresy responsywne. Wykorzystuje SVG do wyświetlania wykresów, które mogą być animowane za pomocą SMIL. Dzięki tej bibliotece możesz tworzyć wykresy liniowe, wykresy kołowe, wykresy słupkowe i inne rodzaje wykresów, a nawet dodawać do nich animacje.
Generator kresek udarowych SVG
To proste narzędzie do generuj linie przerywane wykorzystanie SVG stroke-dasharray. Najpierw wybierz jeden typ myślnika z listy, a następnie dostosuj go pod względem szerokości, wysokości, obrotu lub koloru. Następnie możesz pobrać kod HTML i CSS, aby zastosować tę linię kreskową w projekcie.
Metoda Draw: Prosty edytor SVG
Metoda Draw to internetowy edytor SVG, z intuicyjny interfejs z narzędziami po obu stronach płótna. Możesz rysować linie, kształty, wprowadzać tekst lub używać wbudowanych kształtów, a następnie edytować właściwości narysowanych obiektów. Eksportuj obraz w formacie SVG (także w formacie SVG base64) lub zapisz bezpośrednio w PNG.
Eksportuj Flash do animowanego SVG
Chociaż nie jest już zbyt popularny, istnieje szansa, że niektórzy z was będą mieli problemy z wypuszczeniem Flasha. Jeśli tak, możesz zamień swoją animację flash w SVG, aby była kompatybilna z nowszymi technologiami. To narzędzie tworzy rozszerzenie aplikacji Flash i może działać na CS5, CS6 i CC.
Możesz eksportować do SVG, jeśli chodzi o kształty, symbole bitmap, animacje klasycznego ruchu, animacje kształtów (dla innych istnieje spory sukces).
