PNG till SVG för Canva och Figma

Varför en PNG blir suddig i Canva och Figma

En PNG är ett rutnät av pixlar. Skala upp den för en banner i Canva eller en stor ram i Figma så blir kanterna mjuka och kantiga. Genom att konvertera PNG till SVG i Canva och Figma byts pixlarna ut mot vektorformer, så att grafiken förblir skarp oavsett storlek.

Det hjälper också om du skapade en logotyp på Canvas gratisplan. Att ladda upp en SVG till Canva är inte begränsat till Pro, men att hämta ner din design som SVG är en funktion för betalkonton. Hämta ner den som PNG istället, och utför steget från Canvas PNG till SVG här.

Canvas regler för att ladda upp en SVG

Canvas hjälpcenter listar några krav för SVG-uppladdningar. Här är hur varje ett mappas till SVGR.

Vad du ser när du importerar SVG-filen till Figma

Figma importerar en SVG som vektorlager, så att du kan välja, ändra färg och ändra storlek på former direkt. Det är poängen med en Figma PNG till SVG-konvertering: du får redigerbara former istället för en platt bild.

SVGR stapplar former ovanpå varandra istället för att skära ut hål. Motivet i ett O, eller glippen inuti en ring, är en form i bakgrundsfärg som ligger ovanpå en solid form, så i Figma ser du överlappande lager. Det ser rätt ut mot en matchande bakgrund men syns tydligt på vilken färg som helst.

För att skapa ett riktigt hål, välj formen ovan tillsammans med den under den och använd "Subtrahera" från Figmas booleska operationer.

Text: spårade former eller levande text?

Med Recognize text avgränsas bokstäver som former. Det ser exakt ut som originalet och fungerar i båda apparna, men du kan inte skriva om det.

Med det påslaget blir det detekterade texten levande SVG-text, och SVGR kör också färgförfining, vilket kan lägga till gradientfyllnader. Canna ber om att texten expanderas, så håll det avstängt där. Figma importerar SVG-text som levande text, med luckor: textopacitet ignoreras, em-baserade teckensnittsstorheter läses som pixlar, och bokstavsavstånd på individuella textspann ignoreras.

För logotyper, stäng av Textigenkänning. Om du behöver redigerbara rubicker, skriv om dem i Figma med rätt typsnitt.

Kunskapens gränser

• PNG till SVG för Canva och Figma fungerar för platta grafikobjekt, inte för foton. En spårad foto blir en stor, komplex fil; för Canva, ladda upp fotot själv som JPG eller PNG.
• PNG-bilder med mjuka kanter kan innehålla nästan identiska färger, till exempel flera nästan svarta nyanser. Ändra färgen till en enda färg i Figma eller en annan redigerare om du vill ha en ren palett.
• Hur Canva låter dig ändra färgen på en uppladdad SVG beror på filen, och vi har inte testat det på varje design. Ladda upp en testfil innan du bygger en mall kring den.
• Staplade former är viktiga i Canva också. Med en transparent bakgrund behåller insidan av ett O sin ursprungliga bakgrundsfärg och visas som en fläck på vilken färg som helst. Klipp ut dessa hål i Figma, eller med Sökväg > Differens i Inkscape, innan du laddar upp.
• Transparent bakgrund tar bort den form som är målad i färgen som finns i bildens hörn, vilket folk menar med bakgrund. Om ditt konstverk sträcker sig in i alla fyra hörn, eller om hörnen har olika färger, tas inget bort och bakgrunden kvarstår — ge konstverket en enfärgad, jämn marginal och konvertera igen. Områden som är helt inneslutna av konstverk tas aldrig bort, och en PNG som redan har en transparenskanal lämnas som den är.
• Kurvor spåras som många korta raka segment. Spårade från en liten bild kan de se något vinkliga ut när de förstoras, så börja med den största kopian du har.