SVG의 연결 매개변수(Linked Parameters)를 쓰면 <img>로 불러온 SVG 안의 개별 요소에 CSS로 fill과 stroke를 지정할 수 있다. 아이콘 파일을 따로 두면서도 색상 조절을 원하는 웹 개발자에게 유용할 수 있지만, 아직 주요 브라우저 전체에서 지원되지는 않는다.

SVG를 HTML에 직접 넣으면 스타일을 세밀하게 조절할 수 있지만 문서 객체 모델(DOM)이 커지고 캐싱을 활용하기 어렵다. <use>는 그림자 DOM과 다른 도메인의 스프라이트를 연결하기 어려운 점이 있고, <img>나 background-image는 스타일 조절 범위가 제한된다. 아이콘 글꼴은 글꼴이 로드되지 않으면 문자가 깨져 보일 수 있고, 접근성을 신중히 다뤄야 한다.

Vadim Makeev의 글에서 소개한 방식은 SVG 파일 안에서 env()로 외부 매개변수를 받을 자리를 만든 뒤, CSS의 link-parameters로 값을 전달한다. 예제에서는 SVG의 사각형이 --color를 받으며, CSS에서 다음과 같이 지정한다.

img { link-parameters: param(--color, #ff8052); }

SVG 쪽에 env(--color, #c1f07c)를 설정하면 이 기능을 지원하지 않는 브라우저에서도 기본 색상 #c1f07c를 사용한다. 소개된 예제는 이 방식으로 <img> 안의 <rect> 색을 바꾼다. background-image에도 적용될 수 있다고 글은 덧붙이지만, 확정적으로 설명하지는 않는다.

아이콘을 개별 파일로 두면 브라우저 캐싱에 유리하고, <img>로 간단히 사용하면서 alt 텍스트와 loading="lazy"도 활용할 수 있다는 것이 글의 설명이다. 여러 아이콘을 스프라이트로 합치고 싶다면 프래그먼트 식별자를 쓸 수 있지만, 구성이 더 복잡해지고 파일을 바꾸면 전체 캐시가 무효화될 수 있다.

지원 시점은 아직 불확실하다. 글이 소개한 당시 Firefox Nightly에는 layout.css.link-parameters.enabled 플래그가 있었고, Safari Technology Preview에서는 설정의 Feature Flags → CSS → “CSS Linked Parameters”에서 기능을 켤 수 있었다.

부록: 원문 예시

text
<img   src="/images/icons/share.svg"   width="32" height="32"   alt="Share">
text
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">   <rect fill="env(--color, #c1f07c)" width="160" height="160" rx="80" />   <path fill="black" d="M123.13 36.87a61.02 61.02 0 0 0-86.26 0…" /> </svg>