SVGMend

SVG to data URI

Convert SVG to a data URI

Inline small icons and backgrounds straight into CSS or HTML. Minimal URL-encoding keeps the SVG readable and usually beats base64 on size. Paste a data URI to decode it back.

Runs in this tab. Nothing is uploaded.

Sizes

gzip ≈ what a server sends
VersionBytesgzip
Add an SVG to compare sizes.

Preview (rendered from the data URI)

URL-encoded data URI


					

					

						

							
Base64 data URI

							
							
						

						

					

					

						

							
CSS background-image

							
							

								
								
							

							
						

						

					

					

						

							
HTML <img>

							
							
						

						

					

					
				

			

		

	


	

		

			

				
URL-encoding or base64?

				
URL-encoded data URIs keep the SVG as text and escape only the characters that would break a URL or CSS string (#, %, <, >, double quotes, non-ASCII). Attribute quotes are switched to single quotes so the URI fits inside url("…") or src="…". The result is readable and compresses well with gzip.

				
Base64 is about a third larger and compresses worse, but it’s a safe choice for tools that mangle special characters, and email builders sometimes expect it.

				
Options

				
Light cleanup removes comments, the XML declaration, DOCTYPE, metadata and the whitespace between tags before encoding; it never touches text content. Encode spaces writes them as %20, which is required inside srcset and by some strict URL parsers. A missing xmlns is added automatically, because a data URI SVG without it shows nothing.

				
Data URIs suit small images that every page needs. For large or reused graphics a normal file is better: browsers cache it once instead of re-downloading it inside every stylesheet.

			

			
		

	


	

		

			
Questions

			

				
Do I need charset=utf-8 in the data URI?
No. SVG is XML, which defaults to UTF-8, and non-ASCII characters are percent-encoded as UTF-8 bytes. Adding a charset does no harm, but it isn’t needed.

				
Can I decode an existing data URI?
Yes. Paste a data:image/svg+xml URI, URL-encoded or base64, even wrapped in url("…"), and the decoded SVG appears so you can edit and re-encode it.

				
Is there a size limit for data URIs?
Modern browsers accept data URIs of several megabytes, but keep inlined images small: large data URIs bloat every stylesheet that contains them.

			

		

	


	




	

		

			

				
More SVG tools