Sådan bruger du værktøjet
- Træk en .svg-fil hen på feltet, klik for at vælge en, eller indsæt et billede.
- Vælg Behold originalt format for at kode selve SVG-koden, eller vælg PNG, JPEG eller WebP under Konvertér til for at omdanne den til pixel.
- Hvis du rasteriserer, kan du styre pixelstørrelsen med Maks. bredde.
- Kopiér outputtet som CSS background-image til et stylesheet, eller tag data URI'en, rå Base64, img-tagget eller Markdown-udgaven.
SVG som data URI
SVG (Scalable Vector Graphics, MIME-type image/svg+xml) beskriver figurer som XML-tekst, så grafikken forbliver skarp i alle størrelser. Base64-udgaven starter som regel med PHN2Zy (det kodede <svg) eller med PD94bWw, når filen begynder med en XML-erklæring.
Når en SVG bruges som billede, skal rodelementet have xmlns="http://www.w3.org/2000/svg". Mange inline-kodestykker, der er kopieret fra HTML, udelader den, og så viser data URI'en ingenting. Eksterne ressourcer blokeres også i billedtilstand, så webskrifttyper og linkede billeder i SVG-filen indlæses ikke; konvertér tekst til stier, eller indlejr ressourcerne først.
Base64 eller URL-kodning?
Fordi SVG allerede er tekst, kan en data URI indeholde koden direkte, så kun nogle få tegn skal procentkodes (<, >, #, % og anførselstegn). Til et typisk ikon i CSS er det kortere end Base64 og komprimeres bedre med gzip. Base64 er det sikreste valg, når strengen skal gennem systemer, der ødelægger anførselstegn eller specialtegn, eller når et API forventer Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Procentkodet */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Den procentkodede form kan du lave med Data URI-generatoren, hvor du vælger Procentkodning.
Rens SVG-filer, du ikke stoler på
SVG kan indeholde <script>-elementer, attributter til hændelseshåndtering som onload og links til andre dokumenter. Browsere kører ikke scripts i en SVG, der vises via <img> eller en CSS-baggrund, men den samme fil kan køre dem, hvis den indsættes direkte i HTML eller åbnes for sig selv. Hvis brugere kan uploade SVG-filer til din applikation, skal du rense dem, for eksempel med DOMPurify, før du gemmer eller indlejrer dem. Base64 skjuler kun koden for et hurtigt blik; det gør den ikke sikker.
Ofte stillede spørgsmål
Er Base64 eller URL-kodning bedst til SVG?
Til SVG i CSS er URL-kodning som regel mindre og forbliver læsbar. Base64 er mere robust, når strengen skal gennem andre systemer, eller når et API kræver Base64.
Hvorfor vises min SVG-data URI ikke?
xmlns-attribut på rodelementet, et ikke-escapet # i en procentkodet URI og skrifttyper eller billeder, som SVG-filen indlæser fra andre filer.Kan jeg konvertere en SVG til en PNG-streng i Base64?
Ja. Vælg PNG under Konvertér til. Browseren gengiver SVG-filen som pixel, og med indstillingen Maks. bredde kan du gøre resultatet mindre.