Hur importerar och redigerar du dina SVG-filer i Figma, Canva eller WordPress?

Du har SVG:n. Vad händer nu?

De flesta konverterare stannar vid Ladda ner-knappen. Ändå är filen värdelös om den stannar i mappen Hämtade filer. En designer öppnar den i Figma för att tillämpa varumärkesriktlinjer. En community manager släpper den i Canva för att skapa variationer av ett inlägg. En utvecklare lägger den i WordPress som sidhuvudets logotyp. Det är detta nästa steg som bevisar att PixelToPath passar in i ett riktigt arbetsflöde, inte bara en demo.

En PixelToPath SVG är inte en statisk bild. Det är en uppsättning banor: varje form har en fyllning och eventuellt en linje. Att ändra logotypens blå till vinröd, isolera ikonen, förstora den för en 1080x1920 story: allt detta görs i det verktyg du redan använder, utan att gå tillbaka till Illustrator.

Varför Figma, Canva och WordPress älskar det här formatet

PNG och JPG är, när de väl importerats, bitmappar. Att färga om en PNG-logotyp i Figma innebär att lägga ett lager ovanpå, inte att ändra banans färg. Canva kommer inte att erbjuda färgprover. WordPress kommer att servera en tung fil, suddig på Retina-skärmar. SVG löser alla tre problemen på en gång.

I praktiken ger en SVG från PixelToPath dig:

• Redigerbara banor: en färg per form, modifierbar i Figma (Fyllning) eller Canva (färgprover)
• En lättviktsfil, väl under Canvas gräns på 3 MB, och snabbare att ladda på en WordPress-webbplats än en @2x PNG
• Identisk skärpa som en favicon, en LinkedIn-banner eller en roll-up banner: en enda fil
• En leverans du kan skicka till kunden: de öppnar den i det verktyg de har, inte i Creative Cloud

Figma: importera SVG och ändra färger

Figma importerar en SVG som en grupp vektorer, inte som ett foto. Det är hela poängen: varje form förblir ett lager som du färgar om, flyttar eller döljer.

1. Ladda ner .svg från PixelToPath och öppna din Figma-fil.
2. Dra filen från utforskaren direkt till arbetsytan. Alternativt: Arkiv → Placera bild, eller Ctrl+Shift+K (Cmd+Shift+K på Mac) för att placera SVG:n.
3. Lagret visas som en grupp. Dubbelklicka för att gå in i den, eller högerklicka → Dela upp grupp (Shift+Ctrl+G / Shift+Cmd+G) om du vill manipulera formerna en och en.
4. Välj en bana. I den högra panelen, avsnittet Fyllning, klickar du på färgprovet: hex, palett, pipett. Hela formen ändras, kanterna förblir skarpa.
5. För en monokrom logotyp, välj alla former i gruppen och använd en enda färg. Exportera sedan som SVG, PNG eller PDF från Export-avsnittet om leveransen inte längre är i vektorformat.

Om Figma visar en platt bild istället för vektorlager, innehöll filen en bitmapp (en inkapslad PNG). Detta är inte fallet med PixelToPaths exporter i Svartvitt eller Affisch-förinställningar. Omkonvertera originalet med en av dessa två lägen, inte Foto.

Canva: ladda upp SVG och färga om

Canva accepterar SVG:er i både Gratis och Pro. Omfärgning fungerar när filen är enkel: platta färger, få noder, inga övertoningar. Detta är exakt vad PixelToPath producerar med Affisch eller Svartvitt.

1. Öppna en design i Canva. Vänster panel → Uppladdningar → Ladda upp filer. Välj din .svg (under 3 MB; en export från PixelToPath ligger långt under det).
2. När filen finns i dina uppladdningar drar du den till sidan. Ändra storlek med hjälp av handtagen: vektorn förblir skarp, inklusive i story- eller A4-format.
3. Klicka på SVG:n. I verktygsfältet visas färgprover, ett för varje nyans i filen. Klicka på ett färgprov, välj den nya färgen: Canva tillämpar den på alla former med den nyansen.
4. Om inget färgprov visas är SVG:n för komplex (övertoningar, för många färger, banor i Foto-stil). Gå tillbaka till PixelToPath, byt till Affisch eller Svartvitt, exportera igen, importera igen.

Canva rekommenderar en SVG 1.1-profil, där former av samma färg är grupperade och ingen textur finns. PixelToPaths logotypförinställningar respekterar redan dessa begränsningar. Du behöver inte gå via Illustrator för att "förbereda" filen.

WordPress: tillåt SVG-uppladdning utan att öppna en sårbarhet

WordPress blockerar SVG:er som standard, och det är inte ett infall. En SVG är XML: den kan innehålla JavaScript, externa entiteter, en XSS-nyttolast. En besökare, eller ett komprometterat redaktörskonto, som laddar upp en skadlig SVG kan köra kod i admin. Därav blockeringen. Du måste tillåta formatet och rensa filen.

Lägg inte bara till image/svg+xml i functions.php. Utan att rensa filen öppnar du en sårbarhet. Den säkra metoden: ett underhållet plugin som rensar bort skript, onload-händelser och XML-entiteter. Safe SVG (10up), över en miljon installationer.

1. I WordPress admin: Tillägg → Lägg till nytt. Sök efter Safe SVG (författare: 10up). Installera och aktivera.
2. Gå till Inställningar → Media. Begränsa SVG-uppladdningar till administratörer (eller betrodda roller). Öppna inte formatet för alla Författarkonton om webbplatsen har flera bidragsgivare.
3. Media → Lägg till nytt. Släpp PixelToPath .svg. Plugin-programmet rensar den vid import och visar en förhandsgranskning i biblioteket, vilket WordPress inte gör inbyggt.
4. I ett inlägg eller en sida, infoga ett bildblock och välj SVG:n. För en sidhuvudslogotyp, använd Anpassa / Webbplatsidentitet, eller ett bildblock i temamallen (Webbplatsredigerare).
5. Utvecklaralternativ: hoppa över mediabiblioteket. Placera filen i temat (assets/logo.svg) och referera till den i mallen, eller lägg den inline för att stilsätta den med CSS. Ingen uppladdning, alltså ingen attackyta i mediabiblioteket.

Safe SVG kan också begränsa vem som har rätt att ladda upp. Håll tillägget uppdaterat: filrensningen är den verkliga kontrollen, inte bara "tillåt SVG"-kryssrutan.

Vilken PixelToPath SVG ska man klistra in i dessa verktyg?

Redigeraren accepterar det du ger den. En dålig förinställning märks vid importen: för många former, oframkomliga färger, avvisad fil.

• Logotyp, ikon, bokstäver: Svartvitt eller Affisch. Detta är platta färger, Figma och Canva färgar om dem med ett klick.
• Undvik Foto om du planerar att ändra färger. Det här läget skapar en mängd små former; Canva kommer ofta inte att visa några användbara färgprover.
• Beskär originalet innan du konverterar: mindre bakgrund, färre noder, en renare SVG i Figma-lagret.
• En variation per användning: en monokrom SVG för Figma (riktlinjer), en färg-SVG för Canva (inlägg), samma rensade fil för WordPress (sidhuvud).

Där det här arbetsflödet förändrar vardagen

Så fort SVG:n är i verktyget slutar du omkonvertera för varje variant:

• Figma-riktlinjer: kundens PNG blir en komponent som du färgar om (primär, inverterad, monokrom) utan att rita om
• Canva-publikationer: en SVG, sex kampanjfärger, skarpa stories och karuseller
• WordPress-logotyp: en fil i sidhuvudet, skarp på mobil och Retina, lättare än den gamla PNG-filen
• Frilansleverans: du lämnar över SVG:n plus Figma / Canva-instruktionerna. Kunden är inte längre fast
• UI Ikoner: importera dem till Figma i bulk, fäst dem på ett 24 px-rutnät, exportera uppsättningen

Behåll PNG för foton. För allt som behöver byta färg eller förbli skarpt räcker kombinationen PixelToPath + Figma / Canva / WordPress.