SVG ZOOTable of ContentsHomeGuidesTutorialsLibrariesToolsNewsNotificationsFAQsLinksColophonSVG ZOOSVG ToolsSVG to Data URI ConverterSVG to Data URI ConverterConvert valid SVGs to Data URIs.Paste valid SVG code:<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 16,16" width="80" height="80"><path fill="#000" d="m0,0h8v16h8v-8h-16z" /></svg>Generated Data URI:background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 16,16' width='80' height='80'><path fill='%23000' d='m0,0h8v16h8v-8h-16z' /></svg>");CopyChange Display Background Color: Examples:SpottedStripedCheckeredResourcesUnderstanding SVGs: CSS Background with data URISVG LibrarySVG EssentialsSVG Text LayoutPractical SVGUsing SVG with CSS3 & HTML5SVG Animations→ see all
SVG ZOOSVG ToolsSVG to Data URI ConverterSVG to Data URI ConverterConvert valid SVGs to Data URIs.Paste valid SVG code:<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 16,16" width="80" height="80"><path fill="#000" d="m0,0h8v16h8v-8h-16z" /></svg>Generated Data URI:background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 16,16' width='80' height='80'><path fill='%23000' d='m0,0h8v16h8v-8h-16z' /></svg>");CopyChange Display Background Color: Examples:SpottedStripedCheckeredResourcesUnderstanding SVGs: CSS Background with data URI
SVG LibrarySVG EssentialsSVG Text LayoutPractical SVGUsing SVG with CSS3 & HTML5SVG Animations→ see all