Bädda in bilder och typsnitt i SVG
Lägg till 1 SVG och de bilder (PNG, JPEG, WebP, GIF) eller typsnitt (TTF, OTF, WOFF, WOFF2) som den refererar till, och kombinera dem till 1 SVG så att du inte behöver dela resurserna separat. Ange vilken resurs som ska användas för varje referens och skapa SVG-filen. Du kan spara den när förhandsvisningen visas korrekt. Resurser på externa URL:er hämtas inte automatiskt.
Vad du kan göra
Slå ihop bilder och teckensnitt
Bädda in tillagda lokala resurser i SVG:en för att minska behovet av att skicka resurser separat.
Kontrollera referenser och resurser
Ange motsvarande fil för varje bildsökväg eller teckensnittsnamn i SVG:en. SVG:en skapas inte med o lösta referenser kvar.
Kontrollera den skapade SVG:ens visning och spara
Kontrollera hur den visas som bild och spara SVG:en med inbäddade resurser. Originalfiler skrivs inte över.
Så använder du
Lägg till en SVG och resurser
Välj en SVG och de bilder och teckensnitt som den refererar till. Du kan också lägga till dem tillsammans från en mapp.
Kartlägg resurserna som ska bäddas in
Kontrollera vilken lokal fil som ska användas för varje referens. För referenser som inte matchas automatiskt väljer du bland de resurser som redan lagts till.
Skapa SVG:en
När inga referenser är o lösta trycker du på «Skapa SVG med bilder och teckensnitt».
Kontrollera visningen och spara
Kontrollera texten och bilderna i den skapade förhandsvisningen innan du sparar. Om den inte visas, kontrollera original-SVG:en och resurserna.
När det här är användbart
Lämna över SVG:en och resurserna tillsammans
Slå ihop en grafik som refererar till bilder och teckensnitt i separata mappar till en enda SVG som är enkel att lämna över.
Kontrollera orsaken till trasiga referenser
Jämför de resurser som krävs med de tillagda filerna och ange sedan eventuella saknade bilder eller teckensnitt.
Så fungerar referenser och inbäddning
Relativa sökvägar och filmatchning
Referenser matchas automatiskt när en referenssökväg relativ till SVG:en på ett entydigt sätt matchar sökvägen till en tillagd resurs. Välj manuellt när filer med samma namn ligger i olika mappar eller kandidater överlappar.
Ange filen för varje teckensnittsnamn
Verktyget hämtar inte teckensnitt från din enhet enbart utifrån teckensnittsnamnen i SVG:en. Lägg till teckensnittsfilerna och ange de matchande filerna.
Resurser på URL:er hämtas inte automatiskt
Även när en extern URL refereras ska du ange bilderna eller teckensätten lokalt. Den här skärmen har ingen funktion för att hämta resurser från URL:er.
Inbäddning är skilt från att minska filstorleken
Att inkludera bilddata i SVG:en kan öka storleken på SVG-filen. Teckensnitt konverteras till WOFF2 och bäddas in. Optimera SVG-koden med ett separat verktyg.
Skillnader beroende på visningssätt
Förhandsvisningen visar SVG:en som en bild. Samma utseende garanteras inte i alla appar, så kontrollera även den visning som krävs på målet.
Vanliga frågor
Vad gör jag om en resurs inte hittas?
Lägg till bilder eller teckensnitt och ange dem sedan i valfältet för motsvarande referens. Automatisk matchning fungerar kanske inte med olika mappar, dubblerade sökvägar eller externa URL:er.
Vilka resurser kan jag använda?
Bilder kan vara PNG, JPEG, WebP eller GIF; teckensnitt kan vara TTF, OTF, WOFF eller WOFF2. Ange SVG en i taget.
Hittar det teckensnitt automatiskt?
Verktyget söker inte igenom din enhet eller webben efter teckensnitt enbart utifrån ett teckensnittsnamn. Lägg till och välj en fil som du har lokalt.
Vad händer med resurser som redan är inbäddade?
Bilder och teckensnitt som bäddats in som data-URI:er, samt # -referenser i SVG:en, räknas inte som externa referenser. Du kan skapa SVG:en om inga upptäckta referenser är olösta.
Vad händer när jag lägger till eller väljer om resurser?
Om du bara lägger till resurser läggs de i listan och redan tilldelade resurser behålls. Kontrollera automatisk matchning om fler kandidater med samma sökväg blir tillgängliga, till exempel. Indata som innehåller en ny SVG ersätter den aktuella SVG:en och alla dess resurser.
Vad gör jag om det finns referenser som inte stöds?
Extern användning eller scriptreferenser kan inte bäddas in. SVG:er som innehåller importer av extern CSS kan inte heller läsas in. Ordna referenserna i ursprungsappen eller en annan lämplig app innan du väljer SVG:en.
Blir SVG:en mindre?
Att minska filstorleken är inte syftet med det här verktyget. Att inkludera resurser i SVG:en kan öka dess storlek. Använd SVG-optimering om du vill städa koden.
Vad gör jag om den skapade SVG:en inte kan visas?
Sparalternativet visas inte på den här skärmen förrän SVG:en visas korrekt. Kontrollera original-SVG:en och resurserna, granska mappningarna eller filerna och skapa den igen.
Indata och resultat
- Indata
- 1 SVG plus bilder och teckensnitt. Lägg till från filer eller mappar.
- Bilder
- Originaldata för tillagda bilder bädds in. Bilder ändras inte i storlek eller komprimeras inte.
- Teckensnitt
- Mappade teckensnitt konverteras till WOFF2 och bädds in.
- Resultat
- original-name-embedded.svg. Du kan spara när den skapade SVG:en visas korrekt.