Liquid Cheese

Free With Attribution

COPY AND PASTE

DOWNLOAD

How to use

Learn where to place the CSS code: Demo



License info

As long as you don’t re-distribute or re-sell backgrounds from SVGBackgrounds.com, you may use our free backgrounds in personal or commercial projects under the following license: CC BY 4.0
(requires attribution) Full license



Attribution info

Easy ways to give credit without compromising the design:

  • Give credit on a credits page or screen
  • Give a shout out on social media
  • Give credit in the code as a comment
  • more ways

Unlock 200+ Backgrounds

Simple License:

» Use Unlimited Backgrounds

» In Unlimited Projects

» For 1 Designer

» No Attribution Required

SVG to CSS converter

This tool converts SVG code into a Data URI, an encoded URL format that be used as a background-image source. In plain terms, you can place this converted SVG code directly into CSS and avoid the need for image files.

SVG Input

Insert your SVG code below:

CSS Output

Tips below if your output is not optimal.

Tips for converting SVG to CSS

When using the tool above to convert SVG code to Data URI, follow these tips for best results.

  • Optimize your SVG code to take out unnecessary code and keep your CSS shorter. Here is a guide on SVG Optimization.
  • Remove commented code before inserting your code.
  • Classes don't work within URL-encoded data URIs, replace classes with the direct use of SVG attributes, such as fill='#F00'
  • When you use an SVG as a background image in CSS, there are a few properties that will help position and size the design as desired. We comment those properties out, so you may want to play with them.
Matt Lipman Headshot


Hi, I'm Matt, the designer behind SVG Backgrounds. Check out my latest visual tools I'm building at Visiwig.com or follow me on Twitter.