SVG to Data URI Converter for CSS Background-Image

Paste or drag a valid SVG document source to the box below and use the convert button to get a data URI that should work cross-browser.


SVG is a file format that stands for Scalable Vector Graphics. SVG files can be edited using many different programs, but their most popular use is as web graphics. The best thing about SVG is its scalability, which means it can be used to create logos and illustrations of any size. This scalability makes it superior to other file formats such as JPG and PNG, as those formats cannot be scaled as easily or quickly as SVGs.

Cascading Style Sheets, or CSS, are a vocabulary of rules that dictate, among other things, how webpages should look. The language defines the position, appearance, and behavior of HTML elements on your webpage. The first CSS specification was introduced in 1995 by HÃ¥kon Wium Lie. With CSS, you can customize the appearance of over 100 different HTML tags including text, images, form controls, lists, and tables. CSS files are stored on the server in order to allow instructions for how content should be displayed to be fetched with the document.

Data URI is a protocol that allows an entire file to be encoded as a Uniform Resource Identifier (URI) on the Internet.

Data URI is also called "data URL" or "file URL". This means the data is embedded in the web page with no HTTP request to access it. Data URI can be used to embed images, videos, audio files, or any other type of content into HTML documents.

There are two types of data URIs: inline and out-of-line. The inline form uses base 64 encoding for binary data and the out-of-line form uses either base 64 or hexadecimal encoding for textual data.

An example of an inline data URI might be:

Other Tools

Ovulation Predictor Calculator

Encoder Decoder

Bills & Coins Counter

Simple Tip Calculator