지금까지의 회차는 전부 픽셀 이미지를 어떻게 잘 다룰 것인가였습니다. 그런데 어떤 그림들은 애초에 픽셀일 필요가 없습니다. 아이콘 · 로고 · 도표 · 차트가 그렇습니다. 이것들을 벡터로 두면 앞선 회차의 문제들이 상당수 사라집니다.
SVG 가 이미지 파일과 다른 점
SVG 는 픽셀의 배열이 아니라 도형을 그리는 지시입니다. “이 좌표에서 저 좌표로 선을 긋고, 이 원을 이 색으로 채워라” 가 텍스트로 적혀 있습니다. 이 차이에서 세 가지 성질이 따라옵니다.
두 번째 성질이 특히 실무에서 큽니다. 브랜드 색이 바뀌면 픽셀 아이콘은 전부 다시 내보내야 하지만, SVG 는 스타일 한 줄로 따라옵니다. 다크 모드 대응도 마찬가지입니다 — 밝은 판과 어두운 판 두 벌을 관리하지 않아도 됩니다.
쓸 자리와 쓰지 않을 자리
경계는 분명합니다. 사진에는 쓰지 않습니다. 사진을 벡터로 표현하려면 수천 개의 도형이 필요해 파일이 오히려 커집니다. 또 도형 수가 아주 많은 정교한 일러스트도 주의합니다 — 브라우저가 그 도형들을 매번 그려야 하므로, 파일이 작아도 그리는 비용이 생깁니다.
업로드해서 쓸 것인가, 마크업에 넣을 것인가
SVG 를 쓰는 방법은 둘입니다. 하나는 이미지처럼 파일로 불러오는 것이고, 다른 하나는 마크업 안에 직접 넣는 것입니다. 색을 CSS 로 바꾸려면 후자여야 합니다 — 파일로 불러온 SVG 는 바깥 스타일이 닿지 않습니다.
여기서 한 가지 주의가 필요합니다. 워드프레스가 기본적으로 SVG 업로드를 허용하지 않는 데는 이유가 있습니다. SVG 는 스크립트를 품을 수 있는 문서 형식이기 때문에, 검증 없이 업로드를 열면 편집 권한을 가진 사람이 실수로 위험한 파일을 올릴 수 있습니다. 업로드를 허용해야 한다면 정화(sanitize) 처리를 함께 두고, 권한도 필요한 역할에만 줍니다.
실무에서 가장 안전하고 편한 조합은 디자이너가 만든 SVG 를 개발자가 검토해 테마 자산으로 넣는 것입니다. 브랜드 아이콘 세트처럼 자주 바뀌지 않는 자산에 특히 잘 맞습니다.
보안 관점의 배경은 보안 아카이브에서 다루고, 아이콘 자산을 정리하고 안전하게 배선하는 작업은 최적화 지원 사업의 범위 안에 있습니다.
다음 회차
이미지는 정리됐습니다. 다음 회차는 페이지에서 가장 무거워지기 쉬운 요소 — 동영상 임베드입니다. 아무도 재생 버튼을 누르지 않아도 로드되는 것들이 있습니다.