R에서 svglite로 저장한 svg 결과물을 웹페이지에 넣었을 때, 폰트가 기본 폰트(Arial 등)로 돌아가거나 글자가 깨지는 현상이 있었다. 특히 프리텐다드(Pretendard) 같은 웹폰트를 사용 중인데, svg 그래프내의 텍스트도 동일하게 폰트를 적용하고 싶었는데, 겨우 해결했다.
R에서 SVG 제대로 저장하기
먼저 svglite를 사용할 때 web_fonts를 활용해 폰트 설정을 정확히 주입해야 한다. list 안에 웹폰트 주소를 넣어준다.
ggsave("./images/v1.svg",
device = svglite::svglite,
web_fonts = list("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.css"),
width = 6, height = 4, units = "in")
그런데도 왜 폰트가 적용되지 않을까?
알고보니 브라우저의 보안 정책 이 문제였다. <img> 태그로 로드된 SVG는 외부 리소스(웹폰트 CSS 등)를 불러오는 @import 문을 차단하고 있다. <object> 태그로 변환해야만 했다. <object> 태그를 바로 사용할 수 없으니, Hugo에서 재사용하기 쉽게 숏코드(shortcode)를 만들었다.
<!-- 파일 위치 (`layouts/shortcodes/svg.html`) -->
<object
data="{{ .Get "src" }}"
type="image/svg+xml"
style="width: 100%; height: auto; display: block; margin: 0 auto;">
</object>
마크다운에서 사용하는 방법은 아래와 같다. 빈칸은 없애야 한다.
{{ < svg src="./images/v1.svg" > }}
성공.
이 설정을 마치면 이미지 파일보다 훨씬 적은 용량으로 확대해도 고해상도로 확대해도 깨지지 않고, 폰트까지 예쁜 반응형 그래프를 웹사이트에 바로 보여줄 수 있다.