Bild till SVG

Så konverterar du en bild till SVG

1. Släpp en PNG-, JPG-, WebP- eller GIF-bild i släppytan, eller klicka på den för att välja en. Originalet visas till vänster.
2. Välj en Förinställning: - Logotyp (jämna färger, rena former) för logotyper, ikoner, stämplar och platta illustrationer; - Detaljerad (fler färger och banor) för teckningar med skuggning eller många färger; - Posteriserad (4 mjukade färger) för ett stiliserat, affischliknande resultat av ett foto.
3. Justera Antal färger (2 till 64) och Ignorera fläckar mindre än (px) vid behov. Förinställningen fyller i rimliga värden för båda.
4. Välj en Arbetsstorlek (längsta sidan). Bilden spåras i den storleken; själva SVG-filen behåller originalets mått.
5. Klicka på Spåra till SVG. Resultatet visas till höger med filstorlek, antal banor och färger samt hur lång tid spårningen tog.
6. Klicka på Ladda ner SVG, eller på Kopiera SVG-kod för att klistra in koden i din HTML eller ditt designprogram.

Så fungerar spårningen

Det här verktyget använder imagetracerjs, ett spårningsverktyg med öppen källkod, i tre steg:

1. Färgkvantisering: bilden reduceras till det antal färger du valt. Varje pixel tilldelas den närmaste färgen i paletten, och paletten förfinas i flera omgångar.
2. Kantdetektering: för varje färg följs konturerna av alla områden i den färgen, inklusive hål (till exempel insidan av ett ”O”).
3. Banpassning: konturerna förenklas till raka linjer och kvadratiska kurvor, som blir <path>-element i SVG-filen.

Områden som är mindre än tröskeln Ignorera fläckar mindre än (px) tas bort, vilket tar bort brus och JPG-artefakter. Värdet 0 behåller allt; 8 till 20 är bra för logotyper; större värden ger en renare men enklare teckning. Helt transparenta områden tas bort, så en logotyp på transparent bakgrund förblir transparent.

Vad som ger bra resultat

Spårning fungerar bäst på enkla logotyper och teckningar: få jämna färger, tydliga kanter och inga toningar. En inskannad skiss, en svartvit signatur eller en pixelkonstikon spåras mycket bra med 2 till 8 färger.

Foton är en annan sak. Ett foto innehåller tusentals fina toner, så en trogen vektorversion kräver många färger och tiotusentals banor, och SVG-filen blir mycket tyngre än JPG-filen. Använd i stället Posteriserad (4 mjukade färger) för en konstnärlig effekt och räkna inte med ett fotorealistiskt resultat. Om SVG-filen blir mycket stor varnar verktyget dig.

Tips för en renare logotyp:

• utgå från den största och skarpaste versionen av bilden som du har;
• ställ in Antal färger på logotypens verkliga antal färger (inklusive bakgrunden);
• höj fläcktröskeln om du ser små prickar runt kanterna.

Integritet och säker förhandsvisning

Bilden spåras i din webbläsare och laddas aldrig upp. SVG-förhandsvisningen visas som en vanlig bild från en privat blob-adress och sätts aldrig in i sidan, så inte ens en ovanlig fil kan köra kod.