vulcan9
commented
4 years ago 문서에 SVG 페이지 삽입 옵션
SVG 파일을 지원하기 위해 다음 3가지 옵션으로 SVG 파일 내용을 출력하도록 하였습니다.
Img 태그와 IFrame으로 삽입하는 방법은 지원하지 않습니다.
In-line(svg) Tag 방식
SVG 파일 내용이 페이지(HTML)에 직접 삽입합니다.
- SVG 태그로 기록되므로 페이지의 폰트, CSS 및 스크립트에 영향 받을 수 있습니다.
- 텍스트 선택이 가능합니다.
- 로드 후 삽입되므로 보여지는 속도가 조금 느릴 수 있습니다.
Object(embed) Tag 방식
브라우져에 따라 Object 태그 또는 Embed 태그로 SVG 내용을 로드합니다.
- IFrame에 로드된 것과 같이 폰트, CSS 및 스크립트에 영향받지 않습니다.
- 텍스트 선택이 가능합니다. (CORS 제한이 있음)
- 뷰어, 페이지의 기능을 사용하려면 별도의 통신 인터페이스를 구현해야 합니다.
Background image 방식
CSS Background Image 속성에 적용합니다.
- 이미지와 같이 취급됩니다.
- web 폰트를 사용하는 경우 모두 system 폰트로 글꼴 바뀌어 랜더링됩니다. (폰트 포함시키면 되지만 용량이 커짐)
- SVG 내에서 외부 리소스(폰트, CSS 및 스크립트) include 기능이 허용되지 않습니다.
- 텍스트 선택되지 않고 Interaction 기능이 동작하지 않습니다.
기능 비교
| 구분 | In-line(svg) Tag 방식 | Object(embed) Tag 방식 | Background image 방식 |
|---|---|---|---|
| 인터렉션 | 가능 | 가능 | 불가능 |
| 텍스트 선택 | 가능 | 가능 | 불가능 |
| 어노테이션 | 가능 | 가능 (별도 구현) | 불가능 |
| 로드 속도 | 깜빡임 발생 | 양호 | 양호 |
| CORS | 관련없음 | 제한적 | 관련없음 |
| Context | 부모 Document | 독립적 | 관련없음 |
- 검색 : 현재 뷰어의 검색 기능은 텍스트 인식 가능성과 관련이 없음
- 검색어 하이라이트 : 현재 뷰어에서 지원되지 않음
제안할 기능이 어떤 문제를 해결하기 위한 것인가요? 설명 부탁합니다. 현재는 직지 저작도구에 pdf 및 이미지를 변환하면 이미지 기반으로 변환이 되기 때문에 검색 후 하이라이트나 텍스트를 선택하여 어노테이션을 할 수 없습니다. 텍스트가 살아 있는 svg 파일을 변환해서 해당 텍스트를 활용할 수 있으면 좋겠습니다.
어떤식으로 문제가 해결됬으면 좋겠습니까? 텍스트가 살아있는 SVG 파일을 변환할 때 텍스트와 관련된 소스들이 페이지 html(혹은 특정 파일)에 옮겨진다면 텍스트를 활용할 수 있을 것 같습니다.
문제 해결할때 고려(주의) 해야할 다른 사항이 있을까요? 추후에 뷰어에서 검색 및 검색어 하이라이트와 텍스트를 선택하여 어노테이션을 등록하는 기능과 호환이 되어야 합니다.
예시 SVG soc_04.zip