Chromium을 포크해서 HTML 페이지를 SVG나 PDF로 변환할 수 있게 하는 html2svg라는 프로젝트를 진행하는 사람이 어떻게 변환하는지를 설명한 글입니다. Chromium은 WebKit을 포크한 HTML 엔진인 Blink를 사용하고 있고 Skia는 Firefox와 Andorid 등에서 사용하는 2D 엔진입니다. 이 둘을 사용해서 페이지를 SVG 캔퍼스로 변환하는 JS API를 먼저 만들어야 했기 때문에 새로운 getPageContentsAsSVG() 함수를 정의해서 페이지를 SVG로 변환하도록 만듭니다. SVG로 변환은 되지만 폰트가 제대로 표시되지 않는 문제를 해결하고 다양한 사이트를 대상으로 테스트하면서 표면을 제대로 그려주지 않는 문제를 발견하고 이를 해결해서 전체 페이지를 제대로 SVG로 변환하는 과정을 설명합니다. 얼마전 Vercel에서 OG 이미지 렌더링을 하기 위해서 HTML과 CSS를 SVG로 변환하는 satori라는 라이브러리를 공개했는데 satori의 동작방식을 자세히 알지는 못하지만 Chromium을 포크해서 구현하는 접근 방식도 흥미로웠습니다.

Forking Chrome to turn HTML into SVG - Fathy Boundjadj

fathy.fr

Forking Chrome to turn HTML into SVG - Fathy Boundjadj

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2022년 12월 9일 오전 11:51

댓글 0