sprite data URI

스프라이트 SVG를 data URI로 인코딩해 CSS background-image나 <img src>에 넣습니다.

데모에서 볼 것

buildSvgSpriteSheet — star + heart symbols
preview — background-image: url(data:…)
readout: data URI length=… (문자 수)

const sheet = buildSvgSpriteSheet(symbols);
const uri = svgMarkupToDataUri(sheet);
// data:image/svg+xml,%3Csvg…

API

import {
  buildSvgSymbol,
  buildSvgSpriteSheet,
  svgMarkupToDataUri
} from "svg-matrix-core";

const uri = svgMarkupToDataUri(markup);
// encodeURIComponent, # → %23

사용 패턴

.icon-star {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,…");
  color: #2563eb; /* currentColor symbol과 함께 */
}

<img src="data:image/svg+xml,…" alt="" width="24" height="24" />

trade-offs

장점	단점
HTTP 요청 0 (inline)	HTML/CSS 크기 증가
빌드 시 한 번 생성	캐시·CDN 분리 어려움

대규모 세트 → 외부 icons.svg + <use> (046)가 흔합니다.

Core API

함수	역할
`svgMarkupToDataUri`	markup → data URL
`buildSvgSpriteSheet`	symbol defs

오늘의 핵심

data URI = 번들된 SVG. currentColor와 같이 쓰면 CSS만으로 테마 유지.