Jak zaimportować i edytować pliki SVG w Figmie, Canvie lub WordPressie?

Masz SVG. Co teraz?

Większość konwerterów zatrzymuje się na przycisku Pobierz. Ale plik jest bezużyteczny, jeśli pozostanie w folderze Pobrane. Projektant otwiera go w Figmie, aby dopasować do identyfikacji wizualnej. Community manager umieszcza go w Canvie do wykorzystania w postach. Integrator wrzuca go do WordPressa na logo w nagłówku. To ten kolejny krok udowadnia, że PixelToPath pasuje do prawdziwego przepływu pracy, a nie tylko do dema.

SVG z PixelToPath to nie jest statyczny obraz. To zbiór ścieżek: każdy kształt ma wypełnienie, a czasem obrys. Zmiana koloru logo z niebieskiego na bordowy, wyizolowanie ikony, powiększenie do formatu story 1080x1920: to wszystko robisz w narzędziu, z którego już korzystasz, bez konieczności powrotu do Illustratora.

Dlaczego Figma, Canva i WordPress uwielbiają ten format

PNG i JPG po zaimportowaniu są bitmapami. Zmiana koloru logo PNG w Figmie oznacza nałożenie warstwy, a nie zmianę koloru ścieżki. Canva nie zaoferuje kropli z kolorami. WordPress zaserwuje ciężki plik, który będzie rozmyty na ekranach Retina. SVG rozwiązuje te trzy problemy na raz.

W praktyce, SVG z PixelToPath zapewnia Ci:

• Edytowalne ścieżki: jeden kolor na kształt, modyfikowalne w Figmie (Wypełnienie) lub Canvie (krople kolorów)
• Lekki plik, znacznie poniżej limitu 3 MB w Canvie i szybszy do wczytania na stronie WordPress niż PNG @2x
• Identyczna ostrość jako favicon, baner na LinkedIn lub kakemono: w jednym pliku
• Rezultat, który możesz wysłać klientowi: otworzy go w narzędziu, które ma, a nie w Creative Cloud

Figma: importuj SVG i zmieniaj kolory

Figma importuje SVG jako grupę wektorów, a nie jako zdjęcie. To jest cały sens: każdy kształt pozostaje warstwą, którą możesz zmienić kolor, przenieść lub ukryć.

1. Pobierz plik .svg z PixelToPath i otwórz swój plik w Figmie.
2. Przeciągnij plik z eksploratora bezpośrednio na obszar roboczy. Alternatywnie: Plik → Importuj lub Ctrl+Shift+K (Cmd+Shift+K na Macu), aby umieścić SVG.
3. Warstwa pojawia się jako grupa. Kliknij dwukrotnie, aby wejść do środka, lub kliknij prawym przyciskiem myszy → Rozgrupuj (Shift+Ctrl+G / Shift+Cmd+G), jeśli chcesz manipulować kształtami pojedynczo.
4. Wybierz ścieżkę. W prawym panelu, w sekcji Wypełnienie (Fill), kliknij próbkę koloru: hex, próbnik, pipeta. Cały kształt się zmienia, a krawędzie pozostają ostre.
5. W przypadku jednokolorowego logo wybierz wszystkie kształty w grupie i zastosuj jeden kolor. Następnie wyeksportuj do SVG, PNG lub PDF z sekcji Eksport, jeśli wynik nie jest już wektorem.

Jeśli Figma wyświetla płaski obraz zamiast warstw wektorowych, plik zawierał bitmapę (zakapsułkowany PNG). Nie dotyczy to eksportów PixelToPath w ustawieniach Czarno-białe lub Plakat. Przekonwertuj oryginał ponownie za pomocą jednego z tych dwóch trybów, nie Zdjęcie.

Canva: upuść SVG i zmień kolor

Canva akceptuje pliki SVG w wersji Free, jak i Pro. Zmiana kolorów działa, gdy plik jest prosty: płaskie kolory, mało węzłów, brak gradientów. To jest dokładnie to, co tworzy PixelToPath przy ustawieniach Plakat lub Czarno-białe.

1. W Canvie otwórz projekt. Lewy panel → Przesłane pliki → Prześlij pliki. Wybierz swój plik .svg (poniżej 3 MB; eksport z PixelToPath jest znacznie poniżej).
2. Gdy plik znajdzie się w przesłanych, przeciągnij go na stronę. Zmień rozmiar za pomocą uchwytów: wektor pozostaje ostry, nawet w formacie story lub A4.
3. Kliknij SVG. Na pasku narzędzi pojawią się kolorowe kwadraty, po jednym dla każdego odcienia w pliku. Kliknij kwadrat, wybierz nowy kolor: Canva zastosuje go do wszystkich kształtów w tym odcieniu.
4. Jeśli nie pojawią się żadne kwadraty kolorów, oznacza to, że SVG jest zbyt skomplikowany (gradienty, zbyt wiele kolorów, ścieżki typu Zdjęcie). Wróć do PixelToPath, przełącz na Plakat lub Czarno-białe, wyeksportuj ponownie i ponownie zaimportuj.

Canva zaleca profil SVG 1.1, pogrupowane kształty tego samego koloru i zero tekstur. Wstępne ustawienia logo PixelToPath już spełniają te ograniczenia. Nie ma potrzeby używania Illustratora do „przygotowania” pliku.

WordPress: zezwól na przesyłanie SVG bez otwierania luk w zabezpieczeniach

WordPress domyślnie odrzuca pliki SVG i nie jest to kaprys. SVG to XML: może zawierać JavaScript, encje zewnętrzne, payload XSS. Odwiedzający lub przejęte konto Redaktora, który prześle złośliwy plik SVG, może wykonać kod w panelu administracyjnym. Stąd to blokowanie. Należy zezwolić na format i oczyścić plik.

Nie dodawaj po prostu image/svg+xml w functions.php. Bez oczyszczenia pliku otwierasz lukę w zabezpieczeniach. Bezpieczna metoda: aktualizowana wtyczka, która usuwa skrypty, zdarzenia onload i encje XML. Safe SVG (10up), ponad milion instalacji.

1. W panelu administracyjnym WordPress: Wtyczki → Dodaj nową. Szukaj Safe SVG (autor: 10up). Zainstaluj i włącz.
2. Przejdź do Ustawienia → Media. Ogranicz przesyłanie SVG do administratorów (lub zaufanych ról). Nie udostępniaj formatu wszystkim kontom Autorów, jeśli strona ma wielu współtwórców.
3. Media → Dodaj nowe. Upuść .svg z PixelToPath. Wtyczka oczyszcza go przy imporcie i wyświetla podgląd w bibliotece, czego WordPress natywnie nie robi.
4. W poście lub na stronie wstaw blok Obrazek i wybierz SVG. W przypadku logo w nagłówku użyj Dostosuj / Tożsamość witryny lub bloku Obrazka w szablonie motywu (edytor witryny).
5. Alternatywa dla deweloperów: nie korzystaj z biblioteki mediów. Umieść plik w motywie (assets/logo.svg) i wskaż go w szablonie, lub wstaw bezpośrednio, aby stylizować go za pomocą CSS. Brak przesyłania, a co za tym idzie brak powierzchni ataku na bibliotekę mediów.

Safe SVG może również ograniczać to, kto ma prawo przesyłać. Zawsze aktualizuj wtyczkę: czyszczenie plików jest prawdziwą kontrolą, a nie tylko samo „zezwalanie na SVG”.

Jakiego SVG z PixelToPath użyć w tych narzędziach?

Edytor pochłania to, co mu podasz. Złe ustawienie wstępne ujawni się podczas importu: zbyt wiele kształtów, niemożliwe do zmiany kolory, odrzucony plik.

• Logo, ikona, napis: Czarno-białe lub Plakat. To są płaskie kolory, Figma i Canva zmieniają ich kolor jednym kliknięciem.
• Unikaj trybu Zdjęcie, jeśli planujesz zmieniać kolory. Ten tryb tworzy mnóstwo małych kształtów; Canva często nie pokaże żadnych przydatnych kropli kolorów.
• Przytnij oryginał przed konwersją: mniej tła, mniej węzłów, bardziej czytelny SVG w warstwie Figma.
• Wariant na każde użycie: monochromatyczny SVG do Figmy (identyfikacja), kolorowy SVG do Canvy (post), ten sam oczyszczony plik dla WordPressa (nagłówek).

Gdzie ten przepływ pracy zmienia codzienne życie

Gdy tylko SVG znajdzie się w narzędziu, przestajesz konwertować przy każdej zmianie:

• Identyfikacja wizualna w Figmie: plik PNG od klienta staje się komponentem, którego kolor zmieniasz (główny, odwrócony, monochromatyczny) bez ponownego rysowania
• Publikacje w Canvie: jedno SVG, sześć kolorów kampanii, ostre relacje i karuzele
• Logo w WordPressie: plik w nagłówku, ostry na urządzeniach mobilnych i ekranach Retina, lżejszy od historycznego pliku PNG
• Rezultat dla freelancera: dostarczasz plik SVG oraz instrukcje użytkowania w Figma / Canva. Klient nie jest już zablokowany
• Ikony interfejsu: zaimportuj je masowo do Figmy, wyrównaj do siatki 24 px, wyeksportuj zestaw

Zachowaj format PNG dla zdjęć. Dla wszystkiego, co musi zmienić kolor lub pozostać ostre, połączenie PixelToPath + Figma / Canva / WordPress wystarczy.