SVG ZU DATA-URL GENERATOR

Wandel eine SVG-Datei in eine Data-URL um.

Data-URLs kannst du z.B. nutzen um Grafiken direkt in CSS einzubetten. Vorteil dieser Methode ist unter anderem die Senkung von HTTP-Requests, also Anfragen an den Server und dies kann wiederum die Ladezeit einer Webseite reduzieren.

DATA-URL
CSS - background-image
HTML - img-Tag
GEFÄLLT MIR

BEISPIEL DATA-URL EINBINDEN

Zur besseren Veranschaulichung habe ich im folgenden Abschnitt ein Beispiel für euch, mit HTML und CSS.

Die umgewandelte SVG-Datei, in das Data-URL-Format, wird per CSS background-image eingebunden. Damit ihr es besser erkennt, habe ich dieser Eigenschaft (background-image) eine eigene Klasse (secure_icon) zugewiesen.

HTML
<div class="secure secure_icon"></div>
CSS
div.secure{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: rgb(57, 178, 78);
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 60%;
}

/*SVG als Data-URL*/
div.secure_icon{
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJfY2xpcFBhdGhfUDBSV1lhalRXdDFoOE5MQjNiSE1IWkxxWlgzNUNJNFEiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNfY2xpcFBhdGhfUDBSV1lhalRXdDFoOE5MQjNiSE1IWkxxWlgzNUNJNFEpIj48cGF0aCBkPSIgTSAwIDAgTCAyNCAwIEwgMjQgMjQgTCAwIDI0IEwgMCAwIFogIiBmaWxsPSJub25lIi8+PHBhdGggZD0iIE0gMTggOCBMIDE3IDggTCAxNyA2IEMgMTcgMy4yNCAxNC43NiAxIDEyIDEgQyA5LjI0IDEgNyAzLjI0IDcgNiBMIDcgOCBMIDYgOCBDIDQuOSA4IDQgOC45IDQgMTAgTCA0IDIwIEMgNCAyMS4xIDQuOSAyMiA2IDIyIEwgMTggMjIgQyAxOS4xIDIyIDIwIDIxLjEgMjAgMjAgTCAyMCAxMCBDIDIwIDguOSAxOS4xIDggMTggOCBaICBNIDEyIDE3IEMgMTAuOSAxNyAxMCAxNi4xIDEwIDE1IEMgMTAgMTMuOSAxMC45IDEzIDEyIDEzIEMgMTMuMSAxMyAxNCAxMy45IDE0IDE1IEMgMTQgMTYuMSAxMy4xIDE3IDEyIDE3IFogIE0gMTUuMSA4IEwgOC45IDggTCA4LjkgNiBDIDguOSA0LjI5IDEwLjI5IDIuOSAxMiAyLjkgQyAxMy43MSAyLjkgMTUuMSA0LjI5IDE1LjEgNiBMIDE1LjEgOCBMIDE1LjEgOCBaICIgZmlsbD0icmdiKDI1NSwyNTUsMjU1KSIvPjwvZz48L3N2Zz4=');
}