Developer

SVG to CSS

Paste SVG markup, preview the asset, and copy a CSS background-image snippet.

SVG data URI encodingBackground-image CSS outputLive preview before copying

Conversion

CSS classSVG markup

Preview

Converted background.brand-check

CSS output

.brand-check {
  width: 4rem;
  aspect-ratio: 1;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20rx%3D'14'%20fill%3D'%23111827'%2F%3E%3Cpath%20d%3D'M20%2033.5%2028%2042l16-20'%20fill%3D'none'%20stroke%3D'%23ccff3f'%20stroke-width%3D'6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}

Private feedback

How is SVG to CSS working?

Send a rating, bug report, or feature note straight to the app backlog.