SVG to SVG+CSS

This tool converts SVG to SVG+CSS.

What is SVG+CSS? It is a method of reducing SVG size by moving all attributes to CSS. It makes HTML much smaller.

Unlike SVG sprites, which require embedding an entire SVG in each HTML page, SVG+CSS efficiently caches SVG elements in CSS, which is usually loaded only once per website and cached in browser.

See this article for details.

Convert SVG to SVG+CSS

Paste your inline SVG code below to convert it:

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path class="v9ejgv" />
</svg>

Stylesheet:

.v9ejgv {
  fill: currentColor;
  d: path("m9.6 15.6l1.4-1.425L8.825 12L11 9.825L9.6 8.4L6 12zm4.8 0L18 12l-3.6-3.6L13 9.825L15.175 12L13 14.175zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z");
}