PptxGenJS의 SVG: 슬라이드에서 로고를 선명하게 유지하기
PptxGenJS로 실제 SVG 로고를 추가하고 가로세로 비율을 유지하세요. PPTX 미디어를 검사하고 청중이 사용하는 프레젠테이션 앱에서 완성된 슬라이드를 테스트합니다.
목차
실제 SVG를 slide.addImage()에 전달하고 그림 비율에 맞는 상자를 지정한 뒤 발표할 앱에서 내보낸 슬라이드를 확인하세요. PptxGenJS의 Images API는 이미지 path 또는 인코딩된 data를 받습니다. 숫자 x, y, w, h 값의 단위는 인치입니다. PPTX 안의 SVG는 유용하지만 파일 생성 성공만으로 특정 뷰어에서 올바르게 표시되는지 알 수는 없습니다.
아래 예제는 실제 구멍이 있는 직접 만든 2색 로고를 사용합니다. PptxGenJS 4.0.1로 덱을 생성하고 미디어를 검사한 뒤 LibreOffice에서 슬라이드를 렌더링했습니다. Microsoft PowerPoint에서는 이 덱을 테스트하지 않았습니다. 팀이 .pptx 파일을 배포한다면 수신자의 프레젠테이션 앱도 테스트에 포함하세요.
이름만 바꾼 비트맵이 아닌 경로 SVG로 시작하기
다음을 logo.svg로 저장하세요. 2:1 viewBox, 색상 경로 두 개와 fill-rule="evenodd"로 만든 투명한 원형 구멍이 있습니다. 덱을 열 때 가져올 링크 이미지나 글꼴은 없습니다.
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120" viewBox="0 0 240 120">
<path fill="#176B68" fill-rule="evenodd" d="M24 10h104a14 14 0 0 1 14 14v72a14 14 0 0 1-14 14H24a14 14 0 0 1-14-14V24a14 14 0 0 1 14-14zm52 25a25 25 0 1 0 0 50 25 25 0 0 0 0-50z"/>
<path fill="#E5A83D" d="M157 10h17l55 100h-21l-42-77-42 77h-19z"/>
</svg>.svg 파일명만으로는 알 수 있는 것이 적습니다. 삽입 래스터 이미지가 있을 수 있으므로 유일한 버전이 PNG 내보내기에서 왔다면 그림을 검사하세요. 로고 형식 가이드는 프레젠테이션 전용 사본만 공유하기보다 재사용 가능한 벡터 원본을 유지하는 데 도움이 됩니다.
비율을 바꾸지 않고 로고 추가하기
npm install pptxgenjs@4.0.1로 이 검사에 사용한 버전을 설치하세요. Node 스크립트를 logo.svg 옆에 make-deck.cjs로 저장하고 node make-deck.cjs를 실행하세요.
const pptxgen = require("pptxgenjs");
const path = require("node:path");
const pptx = new pptxgen();
pptx.layout = "LAYOUT_WIDE";
const slide = pptx.addSlide();
const logo = path.join(__dirname, "logo.svg");
slide.addImage({ path: logo, x: 1.1, y: 1.3, w: 2.4, h: 1.2 });
slide.addImage({ path: logo, x: 6.3, y: 1.1, w: 4.8, h: 2.4 });
pptx.writeFile({ fileName: "logo-demo.pptx" });두 상자 모두 SVG처럼 2:1입니다. 두 번째 배치는 각 크기를 두 배로 늘립니다. 렌더링에서 구멍, 색상과 외곽선은 두 크기 모두 알아볼 수 있었습니다. 이는 이 단순한 예제와 렌더러에서 관찰한 결과이며 모든 SVG 효과나 프레젠테이션 앱을 보장하지는 않습니다.
의도적인 실패를 위해 같은 로고를 3.6 × 1.0인치 상자에 배치했습니다. 원형 구멍이 타원이 됐습니다. 3.6 × 1.8인치 상자는 2:1 비율을 복원했습니다. SVG의 픽셀 width만 바꿔도 w와 h가 그림 비율과 다른 슬라이드 배치가 고쳐지지는 않습니다.
PPTX 패키지와 렌더링된 슬라이드 확인하기
.pptx는 ZIP 패키지입니다. ppt/media/에서 SVG가 파일에 들어갔는지 확인한 뒤 대상 뷰어에서 덱을 여세요. 두 검사는 별개입니다. 아카이브에 그림이 있어도 프레젠테이션 앱이 다른 것을 표시할 수 있습니다.
unzip -l logo-demo.pptx | grep 'ppt/media/'두 슬라이드에 네 번 배치한 테스트에는 .svg 미디어 항목 네 개가 있었습니다. .png라는 이름의 파일도 네 개 있었지만 첫 바이트는 PNG 시그니처가 아니라 SVG XML이었습니다. 따라서 이 패키지의 .png 접미사는 래스터 대체물이 있다는 증거가 아니었습니다. PptxGenJS의 Node SVG 이슈 토론은 이전의 미리보기·뷰어 문제를 기록합니다. 모든 빌드를 설명하는 스레드라고 가정하지 말고 설치 버전과 내보낸 파일을 확인하세요.
실제 LibreOffice 렌더링에는 올바른 크기의 두 로고와 의도적으로 압축한 로고가 표시됐습니다. 보이는 색상, 투명한 구멍과 원·타원의 차이를 확인했습니다. 이 렌더링으로 Microsoft PowerPoint나 다른 뷰어가 같은 덱을 어떻게 처리할지 추론할 수는 없습니다.
SVG가 없거나 잘못 보일 때
| 증상 | 먼저 확인할 사항 | 다음 단계 |
|---|---|---|
| 스크립트가 이미지를 읽지 못함 | path가 의도한 절대 경로 또는 실행 스크립트 기준 상대 경로인가? | 개발 중 해석한 로컬 경로를 기록하고 원본 파일 자체가 열리는지 확인 |
| 덱은 있지만 로고가 비어 있음 | SVG가 실제로 ppt/media/에 있는가? 어떤 앱과 버전으로 열었는가? | 단순한 경로 전용 SVG를 시도한 뒤 청중 앱에서 전달 덱 테스트 |
| 로고가 늘어남 | w:h 비율이 SVG viewBox와 일치하는가? | 목표 크기 하나와 원본 비율로 슬라이드 w, h 설정 |
| 로고는 잘 보이지만 부분별 편집 불가 | Office 도형이 아니라 삽입 그래픽인가? | SVG 원본 보관. 네이티브 도형 편집이 필요하면 별도 편집 작업 사용 |
특정 파일이 빈 화면으로 렌더링되면 단순한 채우기 경로 하나만 있는 사본을 테스트하세요. 작동하면 나머지 경로와 효과를 단계적으로 추가하세요. 포럼 보고를 한 뷰어에서 모든 SVG가 실패한다는 증거로 쓰지 마세요. 수신 앱이 SVG를 안정적으로 표시하지 못하면 테스트한 PNG 사본이 실용적인 모양 대안일 수 있지만 해당 덱의 확대 가능한 경로 미디어는 포기합니다.
가져온 SVG 그래픽도 네이티브 Office 도형과 다릅니다. Microsoft의 SVG 편집 지침은 지원 PowerPoint 작업 흐름에서 개별 부분을 바꾸는 Convert to Shape를 설명합니다. PptxGenJS addImage()는 그 변환을 하지 않습니다. 전달 후 수동 편집에는 PowerPoint SVG 도형 가이드를 사용하고 대상 앱에서 선택된 부분을 검증하세요.
PerfectVector에서는 어떻게 적용하나요?
승인된 로고 원본이 이미 SVG라면 사용하세요. 작은 평면 PNG나 JPG 로고만 있다면 PerfectVector 로고 벡터화 도구로 PptxGenJS 단계 전에 후보 경로를 재구성할 수 있습니다. 미리보기에서 색상, 작은 글자, 배경과 구멍을 확인하고 브랜드에 중요한 부분을 수정한 뒤 다운로드 SVG를 슬라이드에 배치하세요. 생성 덱에도 위의 패키지·뷰어 검사가 필요합니다. PerfectVector는 그림을 준비하며 프레젠테이션을 생성하거나 검증하지는 않습니다.
사진이나 복잡한 명암 이미지는 래스터로 유지하는 편이 나을 수 있습니다. 매우 단순한 표식은 벡터 편집기에서 승인된 도형을 직접 다시 그리는 편이 추적보다 빠르고 예측 가능할 수 있습니다. 청중에게 확대 가능한 삽입 로고보다 편집 가능한 Office 객체가 필요하면 슬라이드 작업 흐름에서 객체를 만들고 편집 요구를 직접 테스트하세요.
FAQ
addImage()가 SVG를 편집 가능한 PowerPoint 도형으로 바꾸나요?
아닙니다. 이미지 그래픽을 삽입합니다. PowerPoint에서 개별 부분의 색이나 위치를 바꿔야 한다면 지원 앱의 사본에서 별도의 Convert to Shape 작업을 테스트하세요.
생성한 슬라이드에서 SVG가 눌려 보이는 이유는 무엇인가요?
SVG viewBox 비율과 슬라이드 w:h 비율을 비교하세요. 240 × 120 로고는 2:1이므로 너비 3.6인치 배치에는 비율 유지를 위해 높이 1.8인치가 필요합니다.
ppt/media/에 SVG가 있으면 덱을 승인해도 되나요?
아닙니다. SVG 미디어가 패키징됐음을 확인할 뿐 대상 프레젠테이션 앱의 올바른 로고 표시를 입증하지는 않습니다. 그 앱에서 완성 덱을 열고 크기, 색상, 구멍과 효과를 확인하세요.
Sources
- PptxGenJS — Images API —
addImage입력, 크기 단위와 SVG 뷰어 지원을 설명합니다. - PptxGenJS — Node.js의 SVG 이슈 — 실제 패키지와 렌더링을 확인해야 하는 이유가 되는 과거 SVG 미리보기·뷰어 동작을 기록합니다.
- Microsoft — Microsoft 365에서 SVG 이미지 편집 — SVG 그래픽 삽입과 편집 가능한 Office 도형 변환을 구분합니다.
래스터 로고만 있나요? SVG 후보를 만들고 경로와 구멍을 확인하세요. 작은 테스트 덱을 만들어 청중이 사용하는 앱에서 결과를 검증하세요.
