Slik bruker du verktøyet
- Slipp en .svg-fil i slippfeltet, klikk for å velge en, eller lim inn et bilde.
- Velg Behold originalformat for å kode selve SVG-koden, eller velg PNG, JPEG eller WebP under Konverter til for å gjøre den om til piksler.
- Hvis du rasteriserer den, angir du Maks. bredde for å styre pikselstørrelsen.
- Kopier CSS background-image til et stilark, eller data URI-en, ren Base64, img-taggen eller Markdown-versjonen.
SVG som data URI
SVG (Scalable Vector Graphics, MIME-type image/svg+xml) beskriver former som XML-tekst, så grafikken forblir skarp i alle størrelser. Base64-formen begynner vanligvis med PHN2Zy (den kodede <svg) eller PD94bWw når filen starter med en XML-deklarasjon.
Når en SVG brukes som bilde, må rotelementet ha xmlns="http://www.w3.org/2000/svg". Mange innebygde kodebiter som er kopiert fra HTML, mangler dette, og data URI-en viser da ingenting. Eksterne ressurser blokkeres også i bildemodus, så nettskrifter og lenkede bilder i SVG-en lastes ikke inn; gjør om tekst til stier eller bygg inn disse ressursene først.
Base64 eller URL-koding?
Fordi SVG allerede er tekst, kan en data URI bære koden direkte med bare noen få prosentkodede tegn (<, >, #, % og anførselstegn). For et typisk ikon i CSS er det kortere enn Base64 og komprimeres bedre med gzip. Base64 er det tryggere valget når strengen går gjennom systemer som ødelegger anførselstegn eller spesialtegn, eller når et API forventer Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Prosentkodet */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");For å lage den prosentkodede formen bruker du Data URI-generatoren og velger Prosentkoding.
Rens SVG du ikke stoler på
SVG kan inneholde <script>-elementer, attributter for hendelseshåndtering som onload og lenker til andre dokumenter. Nettlesere kjører ikke skript i en SVG som vises via <img> eller en CSS-bakgrunn, men den samme filen kan kjøre dem hvis den bygges direkte inn i HTML eller åpnes alene. Hvis brukere kan laste opp SVG-filer til applikasjonen din, må du rense dem, for eksempel med DOMPurify, før du lagrer eller bygger dem inn. Base64 skjuler bare koden for et raskt blikk; den gjør den ikke trygg.
Ofte stilte spørsmål
Er Base64 eller URL-koding best for SVG?
For SVG i CSS er URL-koding vanligvis mindre og forblir lesbar. Base64 er mer robust når strengen går gjennom andre systemer, eller når et API krever Base64.
Hvorfor vises ikke SVG-data URI-en min?
xmlns-attributt på rotelementet, en # som ikke er kodet i en prosentkodet URI, og skrifter eller bilder som SVG-en laster inn fra andre filer.Kan jeg konvertere en SVG til en PNG-streng i Base64?
Ja. Velg PNG under Konverter til. Nettleseren gjengir SVG-en som piksler, og med Maks. bredde kan du gjøre resultatet mindre.