UTF-8 URL-Encoded vs Base64 SVG Data URIs

Hand-pasting raw SVG XML into url("data:image/svg+xml,...") breaks CSS parsers as soon as an unescaped # hex color (interpreted as a URL fragment!) or double quote appears. The SVG Nexus SVG-to-CSS & Data URI Converter outputs both URL-safe UTF-8 strings and Base64-encoded strings alongside CSS custom properties (--icon-uri).

  • URL-safe UTF-8 Data URI (Usually smaller & gzip-friendlier): Escapes only reserved characters like # (%23), <, and >. Because SVG tag words remain plain ASCII, Brotli and Gzip compress repeated CSS icons effectively.
  • Base64 Data URI: Inflates raw string length by roughly 33%, but avoids quote-escaping issues inside legacy HTML inline style attributes or strict legacy preprocessors.

CSS background-image vs CSS mask-image (The Recoloring Secret)

An SVG inside background-image is isolated from the host page's DOM, meaning stroke="currentColor" will NOT respond to a:hover { color: blue }. Switching to CSS mask-image solves that cleanly for monochrome icons:

Themeable CSS mask-image pattern generated for monochrome pseudo-element icons
.external-link::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: 0.3em;
  vertical-align: -0.125em;
  background-color: currentColor; /* Inherits text, hover & dark-mode color! */
  --icon-uri: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M7 17L17 7M7 7h10v10'/></svg>");
  -webkit-mask: var(--icon-uri) no-repeat center / contain;
  mask: var(--icon-uri) no-repeat center / contain;
}