jsPDF SVG: 브라우저에서 만든 PDF에 로고 경로 유지하기
svg2pdf.js와 jsPDF로 SVG 로고를 배치하고 지원되는 경로를 유지하며 PDF 크기를 설정하세요. 저장한 파일을 같은 아트워크의 래스터 출력과 비교해 확인하세요.
목차
jsPDF로 브라우저에서 생성한 PDF에 SVG 로고 경로를 넣으려면 svg2pdf.js를 불러오고 SVG 요소를 await doc.svg(...)에 전달한 뒤 문서를 저장하세요. 래스터 이미지가 허용되는 경우에만 addSvgAsImage를 선택하세요. SVG를 입력한다고 결과 PDF에 SVG 경로가 들어간다는 뜻은 아닙니다.
svg2pdf.js 사용 예제는 요소 기반 비동기 호출을 설명합니다. jsPDF의 SVG 모듈 구현은 다른 방식인 캔버스 렌더링, JPEG 인코딩, 해당 이미지의 PDF 추가 과정을 보여줍니다.
송장, 티켓, 보고서의 로고에는 원본 SVG를 편집 가능한 마스터로 보관하세요. 이 가이드는 단순한 두 색상 엠블럼을 테스트하고 PDF 포인트 단위로 위치를 설정하며 저장된 객체를 확인합니다. 모든 SVG 기능이 변환 후 유지된다고 가정하지 않습니다.
필요한 출력 선택하기
| 방식 | 제공할 입력 | 검사할 사항 |
|---|---|---|
await doc.svg(element, options) | svg2pdf.js를 불러온 상태의 SVG DOM 요소 | 지원되는 기하학적 형태, 채우기, 구멍, 위치, 삽입 이미지 |
await doc.addSvgAsImage(text, x, y, width, height) | 문자열 형태의 SVG 마크업 | 위치뿐 아니라 래스터 해상도와 배경 |
| 원본 디자인 애플리케이션에서 PDF 내보내기 | 편집 가능한 디자인 파일 | 내보내기 설정과 최종 PDF 객체 |
세 번째 방식은 JavaScript로 조립한 문서보다 미리 준비된 로고 PDF가 필요할 때 유용합니다. 브라우저 밖의 문서 작업에는 LaTeX에서 SVG 사용 가이드가 별도의 내보내기 및 포함 과정을 설명합니다. Node 문서 파이프라인에서는 PDFKit SVG 예제가 전체 문서 삽입과 단일 경로 파싱을 구분합니다.
전달물이 슬라이드 덱이라면 PptxGenJS SVG 이미지 가이드를 사용하세요. 다른 문서 형식에 PDF 내보내기 설정을 적용하는 대신 로고 종횡비, 내보낸 PPTX 미디어, 프레젠테이션 앱에서의 외관을 확인합니다.
버전을 고정한 작은 예제부터 실행하기
예제는 jsPDF 4.2.1과 svg2pdf.js 2.8.1을 사용해 브라우저에서 실행했습니다. 이는 테스트한 버전이며 향후 릴리스에 대한 보장은 아닙니다. 패키지 이름은 접미사까지 포함한 svg2pdf.js입니다. 이름이 비슷한 패키지는 다른 작업 흐름용일 수 있습니다.
JavaScript 번들러를 사용하는 작은 브라우저 프로젝트에서 다음을 설치하세요.
npm install jspdf@4.2.1 svg2pdf.js@2.8.1직접 만든 이 엠블럼을 입력으로 사용하세요. 고리에는 짝홀수 채우기 규칙으로 만든 실제 구멍이 있습니다. 두 번째 경로는 꼭대기가 둥근 산봉우리입니다. 글꼴, 연결 파일, 필터, 삽입 래스터 이미지는 없습니다.
import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<path fill="#174d64" fill-rule="evenodd"
d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
<path fill="#e66d45"
d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
async function makeVectorPdf() {
const svg = new DOMParser()
.parseFromString(svgText, 'image/svg+xml')
.documentElement;
const doc = new jsPDF({
unit: 'pt',
format: [300, 220],
orientation: 'landscape'
});
await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
return doc;
}
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');Node.js 스크립트에서 직접 실행하지 말고 브라우저에서 실행하세요. 라이브러리 사용 및 범위 안내는 작동하는 브라우저 DOM을 요구하며 제한적인 SVG 지원을 설명합니다. 서버 렌더링 애플리케이션에서는 이 작업을 클라이언트 측 내보내기 핸들러에 넣으세요.
여기의 문자열은 신뢰할 수 있는 고정 아트워크입니다. 애플리케이션이 임의의 SVG 업로드를 받는다면 XML 파싱만으로는 안전하게 정제되지 않습니다. 업로드 작업 흐름을 구축하기 전에 사용자 제공 SVG 정제와 실행 격리에 관한 라이브러리 지침을 따르세요.
viewBox와 별도로 위치 설정하기
이 예제의 unit: 'pt'는 PDF 측정값을 포인트 단위로 만듭니다. 페이지는 300 × 220 포인트이며 아트워크 뷰포트는 왼쪽과 위쪽에서 각각 30 포인트 떨어진 위치에서 시작해 240 × 160 포인트를 차지합니다. jsPDF의 생성자 문서는 문서 단위, 형식, 방향 옵션을 설명합니다.
SVG의 viewBox="0 0 240 160"은 내부 좌표를 나타냅니다. PDF 페이지 크기가 아닙니다. 대상 너비와 높이를 같은 3:2 비율로 유지하면 의도한 맞춤을 확인하기 쉽습니다. 배치한 아트워크를 절반으로 줄이려면 width: 120, height: 80을 사용하세요. 원본 경로 좌표는 그대로 두어도 됩니다.
PDF 위치 문제를 진단하기 전에 내보낸 SVG에 명시적인 치수와 적절한 viewBox를 지정하세요. 예상보다 큰 빈 테두리는 SVG 캔버스 자체에 속할 수 있습니다. x와 y를 바꾸면 빈 공간까지 포함한 전체 SVG 뷰포트가 이동합니다.
저장한 두 PDF 검사하기
비교를 위해 같은 브라우저 실행에서 의도적으로 래스터화한 다음 버전도 만들었습니다.
const raster = new jsPDF({
unit: 'pt',
format: [300, 220],
orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');이 방식의 테스트에는 jsPDF에 설치된 canvg 의존성 3.0.11을 사용했습니다. 두 PDF를 모두 저장하고 다시 연 뒤 같은 배율로 렌더링했습니다. PyMuPDF의 그리기 및 이미지 검사는 다음을 보고했습니다.
| 저장한 파일 | 보고된 그리기 경로 | 보고된 삽입 이미지 |
|---|---|---|
logo-vector.pdf | 채워진 경로 2개 | 0 |
logo-raster.pdf | 0 | JPEG 1개, 240 × 160 픽셀 |
벡터 파일의 콘텐츠 스트림에는 곡선 명령과 고리의 짝홀수 채우기가 있었습니다. 래스터 파일에는 이미지 객체가 배치되었습니다. 이 개수는 작은 예제 파일의 결과입니다. 더 복잡한 SVG는 다른 객체를 생성하거나 자체 래스터 콘텐츠를 포함할 수 있습니다.
검은 직사각형은 이 래스터 출력에서 관찰한 결과이며, 원래 투명했던 고리 구멍도 포함합니다. JPEG는 알파 투명도를 유지하지 않습니다. SVG의 투명 영역이 이 방식에서도 유지된다고 가정하지 마세요. 특히 로고가 색상 문서 패널 위에 놓일 경우 실제 필요한 배경을 확인하세요.
확대만으로는 충분한 증거가 되지 않습니다. 모든 PDF 뷰어는 결국 화면에 픽셀을 그립니다. PDF 객체를 검사하고 저장된 외관을 SVG 마스터와 비교하세요. Poppler의 pdfimages -list logo-raster.pdf 같은 명령으로 삽입 이미지를 나열할 수 있습니다. 이미지 목록이 비어 있다는 것만으로 의도한 도형이 올바르게 내보내졌다고 입증할 수는 없습니다. 페이지가 비어 있을 수도 있습니다. 그리기 콘텐츠와 외관도 확인하세요.
내보내기에서 실패한 부분 수정하기
| 증상 | 유용한 첫 확인 |
|---|---|
doc.svg가 없음 | 내보내기 호출 전에 svg2pdf.js 가져오기가 실행되는지 확인 |
| 아트워크가 나타나기 전에 파일이 저장됨 | 저장 전에 SVG 변환이 끝날 때까지 대기 |
| 로고 위치가 어긋나거나 예상보다 작음 | PDF 단위, 대상 치수, 원본 viewBox 비교 |
| 일부 디테일이 사라짐 | 복사본을 문제가 있는 SVG 기능만 남도록 줄이고 지원되는 작업 흐름과 비교 |
| 벡터라고 생각한 로고에 픽셀이 있음 | 원본 SVG와 PDF 이미지 객체 검사 |
SVG가 이미 비트맵을 감싸고 있을 수 있습니다. 그 파일을 벡터 출력이 가능한 도구로 내보내도 픽셀이 편집 가능한 윤곽으로 추적되지는 않습니다. PDF 설정을 바꾸기 전에 삽입 래스터 검사 가이드를 사용하세요.
이 테스트는 텍스트 레이아웃, 필터, 외부 이미지, 임의의 CSS를 다루지 않습니다. svg2pdf.js는 범위를 SVG 일부로 명시적으로 제한합니다. 글자는 변환 전에 글꼴 설정 지침을 따르거나, 그 선택이 적절하다면 디자인 원본에서 윤곽으로 준비하세요. 향후 문구 변경이 중요하다면 텍스트를 편집할 수 있는 마스터를 유지하세요.
PerfectVector로 로고 원본 준비하기
이미 깔끔한 벡터 아트워크인 로고라면 그 원본을 사용하세요. PNG나 JPG만 남아 있다면 PDF 단계 전에 PerfectVector로 편집 가능한 도형을 복원할 수 있습니다. 로고를 벡터화하고 SVG 편집기에서 바깥 윤곽, 작은 구멍, 분리된 색상을 확인하세요. 로고 준비 가이드는 이 검사를 더 자세히 다룹니다.
PerfectVector는 이 작업 흐름에 사용할 래스터 아트워크를 준비합니다. jsPDF에 SVG 지원을 추가하거나 내보내기 도구가 지원하지 않는 기능을 수정하지는 않습니다. 복원한 경로를 원본 이미지와 비교하고 필요한 디테일을 단순화하거나 다시 그린 뒤 PDF 확인을 다시 실행하세요. 추적으로 필요한 디테일이 사라진다면 사진을 이미지로 유지하세요. 더 넓은 이미지 벡터화 가이드는 이런 원본 선택을 설명합니다.
FAQ
addSvgAsImage는 SVG를 벡터 경로로 유지하나요? 아닙니다. 테스트한 jsPDF 4.2.1 구현은 SVG를 캔버스로 렌더링하고 JPEG를 삽입합니다. 지원되는 기하학적 형태를 PDF 그리기 콘텐츠로 변환해야 한다면 svg2pdf.js와 doc.svg를 사용하세요.
doc.svg는 SVG 파일명을 받나요? 예제의 API는 SVG DOM 요소를 받습니다. 신뢰할 수 있는 파일을 먼저 불러와 파싱하거나 기존 SVG 요소를 선택한 뒤 그 요소를 doc.svg에 전달하고 결과를 기다리세요.
모든 SVG가 PDF에서 똑같이 보이나요? 아닙니다. svg2pdf.js는 SVG의 제한된 부분을 지원합니다. 글꼴, 이미지, 효과, 치수, 배경까지 포함해 실제 아트워크를 테스트하고 사용 전에 저장한 PDF를 다시 여세요.
Sources
- yWorks — svg2pdf.js 사용 및 범위 — SVG 요소 API, 비동기 변환, 글꼴 설정, 브라우저 요구사항, 지원 범위 제한을 설명합니다.
- jsPDF — 버전 4.2.1의 SVG 모듈 — addSvgAsImage가 사용하는 캔버스 및 JPEG 구현을 보여줍니다.
- jsPDF — 생성자 참조 — PDF 문서 단위, 페이지 형식, 방향 옵션을 설명합니다.
- PyMuPDF — 페이지 검사 — 저장한 테스트 파일을 살펴보는 데 사용한 그리기 및 이미지 검사 메서드를 설명합니다.
래스터 로고만 있나요? 로고에서 편집 가능한 SVG를 준비하고 윤곽과 구멍을 확인한 뒤 선택한 PDF 방식으로 내보내고 저장된 객체와 배경을 검사하세요.
