SVG 파일 사용

단답형 또는 선다형 질문의 모양이미지 맵으로 설정하면 선택 가능한 이미지 영역이 선택 항목으로 제공되는 이미지로 질문이 표시됩니다. 이 모양을 사용하려면 SVG 파일이 현장조사의 미디어 폴더에 제공되어야 하며 선택 항목 목록의 이름 값이 SVG 파일 영역의 경로 ID와 일치해야 합니다. 이미지 파일의 정확한 파일 이름(.svg 확장자 포함)을 현장조사 워크시트의 media::image 열에 입력해야 합니다.

단답형 질문의 이미지 맵 모양
비고:

이미지 맵(image-map)Survey123 웹 앱에서 지원되지 않습니다.

가변 벡터 그래픽(SVG)은 2D 벡터 그래픽에 사용되는 XML 기반 언어입니다. 벡터 그래픽 편집기 또는 텍스트 편집기를 사용하여 직접 SVG 이미지를 생성할 수 있습니다. 래스터 이미지를 SVG 형식으로 변환할 수 있는 무료 SVG 파일 및 도구를 제공하는 여러 웹사이트가 있습니다. SVG 파일의 배경에 래스터 이미지가 하나 이상 포함될 수 있습니다.

SVG 파일은 텍스트 편집기에서 수정할 수 있습니다. 다음 예시에서는 나침반 방향을 나타내는 간단한 SVG 파일을 보여줍니다. 각 영역의 경로 ID를 기록해 두세요.

<svg
  xmlns="http://www.w3.org/2000/svg"
  height="180"
  width="180">
  <g style="fill:#A9A9A9">
    <path id="North" d="M 75,75 90,0 105,75 Z"/>
    <path id="South" d="m 75,105 15,75 15,-75 Z"/>
    <path id="West" d="M 75,75 0,90 75,105 Z"/>
    <path id="East" d="m 105,75 75,15 -75,15 Z"/>
  </g>
</svg>

SVG 파일 최소 요구 사항

다음은 Survey123에서 이미지 맵(image-map)과 함께 사용할 수 있는 SVG 파일의 최소 요구 사항입니다.

  • 여기에는 id 값이 있는 <path> 요소가 하나 이상 포함되어 있어야 합니다. <rect>, <ellipse>, <circle>, <image>, <text>와 같은 다른 요소는 선택 항목을 선택하는 데 사용할 수 없습니다. <path> 요소는 id 값이 없을 경우 선택 항목을 선택하는 데 사용할 수 없습니다.
  • 이 요소는 빈 그룹을 포함할 수 없습니다. 그룹은 <g></g> 태그로 둘러싸여 있습니다. SVG 파일에 빈 그룹이 하나 이상 있는 경우 이미지 영역을 선택할 수 없습니다.
  • 중첩 수준당 한 그룹만 포함할 수 있습니다. SVG 파일에 중첩된 수준이 여러 개 있을 수 있습니다. 그러나 한 수준에 그룹이 2개 이상 포함된 경우 <path> 요소를 선택할 수 없습니다.
  • 뷰포트의 높이와 너비를 정의해야 합니다. SVG 파일에 뷰포트가 없는 경우 기본 이미지의 오프셋 영역을 선택할 수 있습니다.
  • 뷰포트와 일치할 경우 viewBox 속성 옵션이 포함될 수 있습니다. viewBox 속성이 높이 및 너비 값과 다를 경우 기본 이미지의 오프셋 영역을 선택할 수 있습니다.