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 Diagrams.net (formerly draw.io).

Paste your SVG here…

Drag & drop SVG here

or

Choose background properties…

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

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;
  • Draw.io content attributes;
  • Inkscape (and Sodipodi) content and metadata attributes.

Published: Tuesday, July 28, 2020

You may be interested in...

Hackification.io 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 amazon.com. I may earn a small commission for my endorsement, recommendation, testimonial, and/or link to any products or services from this website.

Comments? Questions?