EPUB 제작의 기초/EPUBCheck 오류

SVG 고정 레이아웃 문서에는 "viewBox" 속성이 있어야 합니다 (가장 바깥쪽 "svg" 요소에).

내.맘.대.로 2025. 10. 2. 09:21

SVG Fixed-Layout Documents must have a "viewBox" attribute (on the outermost "svg" element).

 

이 오류는 SVG 파일을 사용하여 고정 레이아웃 페이지를 만들 때 발생하는 문제입니다.

오류의 의미는, SVG 파일의 가장 바깥쪽 <svg> 태그에 해당 SVG 이미지의 크기와 좌표계를 정의하는 필수 속성인 viewBox가 빠졌다는 것입니다.


## viewBox 속성이란?

viewBox는 SVG 이미지의 '캔버스' 크기를 정의하는 가장 중요한 속성입니다. XHTML 기반의 고정 레이아웃 페이지에서는 <meta name="viewport"> 태그가 페이지의 크기를 알려주는 역할을 했다면, SVG 기반 페이지에서는 바로 이 viewBox 속성이 그 역할을 합니다.

이 속성이 없으면 전자책 뷰어는 SVG 페이지의 의도된 크기를 알 수 없어 페이지를 올바르게 표시할 수 없습니다. 🖼️


## 해결 방법

해결책은 간단합니다. SVG 파일의 최상단 <svg> 태그에 viewBox 속성을 추가하면 됩니다.

  1. 먼저, SVG 페이지의 정확한 가로(width)와 세로(height) 크기를 확인합니다. (예: 1024 x 768)
  2. SVG 파일을 텍스트 편집기에서 엽니다.
  3. 가장 처음에 나오는 <svg> 태그를 찾습니다.
  4. viewBox="0 0 [가로크기] [세로크기]" 형식에 맞게 속성을 추가합니다. 앞의 0 0은 일반적으로 고정된 값입니다.

### 수정 예시

  • 수정 전 (오류 예시):
  • XML
     
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      </svg>
    
  • 수정 후 (올바른 코드):
  • XML
     
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768">
      </svg>
    

중요: 위 예시의 1024 768 부분은 반드시 자신의 SVG 페이지 실제 크기에 맞게 수정해야 합니다.

반응형