Convert SVG to CSS Background

SVGs make great backgrounds for pages or other content – they’re generally small files, and because they’re vectors they render cleanly with no jaggies.

This tool converts an SVG file into a set of CSS background-* properties. The SVG is embedded as an inline data: URL. Unnecessary parts of the SVG file are stripped out to make the final output as small as possible.

You can create SVG drawings using free tools such as Inkscape or (formerly

Paste your SVG here…

Drag & drop SVG here


Choose background properties…

(Percentage or size in px; either a single value or separate X Y sizes).

CSS style properties will appear here…

CSS background properties will appear here...

More information about this tool

The input SVG will be stripped of unnecessary items:

  • Event attributes;
  • content attributes;
  • Inkscape (and Sodipodi) content and metadata attributes.

Published: Tuesday, July 28, 2020

Hacker News

You may be interested in... is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to I may earn a small commission for my endorsement, recommendation, testimonial, and/or link to any products or services from this website.

Comments? Questions?