Jak importovat a upravovat vaše soubory SVG ve Figmě, Canvě nebo WordPressu?

Máte SVG. A co dál?

Většina převodníků končí u tlačítka Stáhnout. Ale soubor je k ničemu, pokud zůstane ve složce Stažené soubory. Designér ho otevře ve Figmě, aby aplikoval firemní identitu. Správce sociálních sítí ho nahraje do Canvy, aby vytvořil variantu příspěvku. Integrátor ho vloží do WordPressu jako logo v hlavičce. Právě tento další krok dokazuje, že PixelToPath zapadá do skutečného pracovního postupu, ne do dema.

SVG z PixelToPath není statický obrázek. Je to sada cest: každý tvar má výplň, případně obrys. Změnit modrou barvu loga na vínovou, izolovat ikonu, zvětšit pro story 1080x1920: to vše uděláte v nástroji, který už používáte, bez nutnosti otevírat Illustrator.

Proč Figma, Canva a WordPress milují tento formát

PNG a JPG jsou po importu bitové mapy. Přebarvit PNG logo ve Figmě znamená položit přes něj vrstvu, ne změnit barvu cesty. Canva nenabídne barevné palety. WordPress bude načítat těžký soubor, rozmazaný na Retina displejích. SVG řeší všechny tři problémy najednou.

Konkrétně vám SVG z PixelToPath dává:

• Upravitelné cesty: jedna barva pro každý tvar, modifikovatelné ve Figmě (Výplň) nebo v Canvě (palety)
• Lehký soubor, hluboko pod limitem 3 MB v Canvě a rychlejší načítání na WordPressu než u PNG @2x
• Stejná ostrost jako favicon, banner na LinkedIn nebo roll-up: jediný soubor
• Výstup, který můžete poslat klientovi: otevře ho v nástroji, který má, ne v Creative Cloud

Figma: jak importovat SVG a změnit barvy

Figma importuje SVG jako skupinu vektorů, ne jako fotografii. V tom je celý ten vtip: každý tvar zůstává vrstvou, kterou můžete přebarvit, přesunout nebo skrýt.

1. Stáhněte si .svg z PixelToPath a otevřete soubor ve Figmě.
2. Přetáhněte soubor z průzkumníka přímo na plátno. Alternativa: Soubor → Importovat, nebo Ctrl+Shift+K (Cmd+Shift+K na Macu) pro vložení SVG.
3. Vrstva se zobrazí jako skupina. Dvojitým kliknutím se dostanete dovnitř, nebo klikněte pravým tlačítkem → Zrušit seskupení (Shift+Ctrl+G / Shift+Cmd+G), pokud chcete s tvary manipulovat po jednom.
4. Vyberte cestu. V pravém panelu, v sekci Výplň (Fill), klikněte na paletu: hex, vzorník, kapátko. Celý tvar se změní, hrany zůstanou ostré.
5. U jednobarevného loga vyberte všechny tvary ve skupině a použijte jednu barvu. Poté exportujte jako SVG, PNG nebo PDF ze sekce Export, pokud cílový soubor již nemá být vektorový.

Pokud Figma místo vektorových vrstev zobrazuje plochý obrázek, soubor obsahoval bitmapu (zabudovaný PNG). To neplatí pro exporty z PixelToPath v předvolbě Černobíle nebo Plakát. Převeďte originál znovu pomocí jednoho z těchto dvou režimů, ne pomocí Fotografie.

Canva: vložit SVG a přebarvit

Canva přijímá SVG ve verzi Free i Pro. Přebarvení funguje, když je soubor jednoduchý: plné barvy, málo uzlů, žádné přechody. To je přesně to, co PixelToPath vytváří s režimy Plakát nebo Černobíle.

1. V Canvě otevřete design. Levý panel → Nahrané → Nahrát soubory. Vyberte .svg (méně než 3 MB; export z PixelToPath je výrazně pod tímto limitem).
2. Jakmile je soubor ve vašich nahraných položkách, přetáhněte jej na stránku. Změňte jeho velikost pomocí úchytů: vektor zůstane ostrý, a to i ve formátu story nebo A4.
3. Klikněte na SVG. Na panelu nástrojů se objeví barevné palety, jedna pro každý odstín v souboru. Klikněte na paletu a vyberte novou barvu: Canva ji aplikuje na všechny tvary tohoto odstínu.
4. Pokud se neobjeví žádné palety, SVG je příliš složité (přechody, příliš mnoho barev, cesty typu Fotografie). Vraťte se do PixelToPath, přepněte na Plakát nebo Černobíle, exportujte znovu a znovu importujte.

Canva doporučuje profil SVG 1.1, seskupené tvary stejné barvy a nulovou texturu. Předvolby loga v PixelToPath tato omezení již splňují. Není nutné procházet Illustratorem, abyste soubor „připravili“.

WordPress: jak povolit nahrávání SVG bez bezpečnostního rizika

WordPress ve výchozím nastavení odmítá SVG, a to z dobrého důvodu. SVG je XML: může obsahovat JavaScript, externí entity, škodlivý kód XSS. Návštěvník, nebo kompromitovaný účet editora, který nahraje škodlivé SVG, může v administraci spustit kód. Proto je blokován. Musíte povolit formát a vyčistit soubor.

Nepřidávejte pouze image/svg+xml do functions.php. Bez vyčištění souboru otevíráte trhlinu. Bezpečná metoda: udržovaný plugin, který odstraňuje skripty, události onload a XML entity. Safe SVG (10up), přes milion instalací.

1. V administraci WordPressu: Pluginy → Instalace pluginů. Vyhledejte Safe SVG (autor: 10up). Nainstalujte a aktivujte.
2. Přejděte do Nastavení → Média. Omezte nahrávání SVG na administrátory (nebo na důvěryhodné role). Neotevírejte formát všem autorským účtům, pokud má web více přispěvatelů.
3. Média → Přidat nový. Nahrajte .svg z PixelToPath. Plugin jej při importu vyčistí a zobrazí náhled v knihovně, což WordPress nativně nedělá.
4. V příspěvku nebo stránce vložte blok Obrázek a vyberte SVG. Pro logo v hlavičce použijte Přizpůsobit / Identita webu, nebo blok Obrázek v šabloně motivu (Editor webu).
5. Varianta pro vývojáře: nepoužívejte knihovnu médií. Umístěte soubor do šablony (assets/logo.svg) a odkažte na něj v šabloně, nebo jej vložte (inline) pro stylování v CSS. Žádné nahrávání, a tedy žádná útočná plocha knihovny médií.

Safe SVG může také omezit, kdo má právo nahrávat. Udržujte plugin aktuální: vyčištění souboru je tou skutečnou kontrolou, ne jen samotné zaškrtnutí „povolit SVG“.

Které SVG z PixelToPath vložit do těchto nástrojů?

Editor spolkne to, co mu dáte. Za špatnou předvolbu zaplatíte při importu: příliš mnoho tvarů, barvy, které nelze změnit, nebo odmítnutý soubor.

• Logo, piktogram, nápis: Černobíle nebo Plakát. Jsou to plné barvy, Figma a Canva je přebarví jedním kliknutím.
• Vyhněte se předvolbě Fotografie, pokud plánujete upravovat barvy. Tento režim vytváří spoustu malých tvarů; Canva často nezobrazí žádné užitečné palety.
• Před převodem originál ořízněte: méně pozadí, méně uzlů, čitelnější SVG ve vrstvě Figmy.
• Jedna varianta pro každé použití: monochromatické SVG pro Figmu (firemní identita), barevné SVG pro Canvu (příspěvek), ten samý vyčištěný soubor pro WordPress (hlavička).

Kde tento postup mění každodenní práci

Jakmile je SVG v nástroji, přestanete jej znovu převádět pro každou variantu:

• Identita ve Figmě: z PNG od klienta se stane komponenta, kterou přebarvíte (primární, inverzní, jednobarevná) bez překreslování
• Publikace v Canvě: jedno SVG, šest barev kampaně, ostré stories a karusely
• Logo ve WordPressu: jeden soubor v hlavičce, ostrý na mobilu a Retině, lehčí než historický PNG
• Výstup na volné noze: předáte SVG plus návod pro Figmu / Canvu. Klient už není blokován
• Ikony rozhraní: hromadně je importujte do Figmy, zarovnejte je na mřížku 24 px a exportujte sadu

PNG si ponechte pro fotky. Na cokoli, co potřebuje změnit barvu nebo zůstat ostré, stačí dvojice PixelToPath + Figma / Canva / WordPress.