Så använder du verktyget
- Släpp en .svg-fil på släppytan, klicka för att välja en fil eller klistra in en bild.
- Låt Behåll original vara valt för att koda själva SVG-koden, eller välj PNG, JPEG eller WebP under Konvertera till för att göra om den till pixlar.
- Om du rastrerar bilden kan du ange en Maxbredd för att styra pixelstorleken.
- Kopiera CSS background-image för en formatmall, eller data URI, rå Base64, img-taggen eller Markdown-versionen.
SVG som data URI
SVG (Scalable Vector Graphics, MIME-typ image/svg+xml) beskriver former som XML-text och förblir därför skarp i alla storlekar. Base64-formen börjar oftast med PHN2Zy (det kodade <svg) eller med PD94bWw när filen börjar med en XML-deklaration.
När en SVG används som bild måste rotelementet ha xmlns="http://www.w3.org/2000/svg". Många inbäddade kodsnuttar som har kopierats från HTML saknar det, och då visar data URI:n ingenting. Externa resurser blockeras också i bildläge, så webbtypsnitt och länkade bilder inuti SVG-filen läses inte in; konvertera text till banor eller bädda in resurserna först.
Base64 eller URL-kodning?
Eftersom SVG redan är text kan en data URI innehålla koden direkt, med bara några få tecken procentkodade (<, >, #, % och citattecken). För en typisk ikon i CSS blir det kortare än Base64 och komprimeras bättre med gzip. Base64 är det säkrare valet när strängen passerar system som förvanskar citattecken eller specialtecken, eller när ett API förväntar sig Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Procentkodad */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Vill du skapa den procentkodade formen använder du Data URI-generatorn och väljer Procentkodning.
Sanera SVG från okända källor
SVG kan innehålla <script>-element, attribut för händelsehanterare som onload och länkar till andra dokument. Webbläsare kör inte skript i en SVG som visas via <img> eller som CSS-bakgrund, men samma fil kan köra dem om den bäddas in direkt i HTML eller öppnas separat. Om användare kan ladda upp SVG-filer till din applikation bör du sanera dem, till exempel med DOMPurify, innan du lagrar eller bäddar in dem. Base64 döljer bara koden vid en snabb blick; det gör den inte säker.
Vanliga frågor
Är Base64 eller URL-kodning bättre för SVG?
För SVG i CSS är URL-kodning oftast mindre och förblir läsbar. Base64 är robustare när strängen passerar andra system eller när ett API kräver Base64.
Varför visas inte min SVG-data URI?
xmlns-attribut på rotelementet, ett okodat # i en procentkodad URI och typsnitt eller bilder som SVG-filen läser in från andra filer.Kan jag konvertera en SVG till en PNG-sträng i Base64?
Ja. Välj PNG under Konvertera till. Webbläsaren renderar SVG-filen till pixlar, och med Maxbredd kan du göra resultatet mindre.