SVG를 사용하여 확대/축소 및 이동하는 방법

이 항목에서는 SVG(Scalable Vector Graphics)를 사용하여 확대/축소 및 이동하는 방법을 보여 주며, 끝에 확대/축소 및 이동할 수 있는 복잡한 조직도 예제를 제공합니다. HTML 및 JavaScript에 대한 기본 지식이 있고 HTML5의 인라인 SVG를 렌더링할 수 있는 브라우저(예: Windows Internet Explorer 9 이상)에 액세스할 수 있다고 가정합니다.

소개

이 항목에서는 먼저 자세한 SVG 테스트 그래픽을 사용하여 SVG에서 확대/축소 및 이동하는 방법을 설명하겠습니다. 그런 다음 Microsoft Excel 및 Microsoft Visio 2010을 사용하여 복잡한 SVG 조직도를 만드는 방법을 설명합니다. 이 조직도는 SVG 사용 브라우저에서 표시할 수 있습니다.

SVG 테스트 그래픽 만들기

SVG의 주요 기능 중 하나는 자세한 그래픽을 "무제한" 확대할 수 있는 기능입니다. 이 기능을 강조하려면 확대/축소 및 이동에 적합한 자세한 SVG 테스트 그래픽을 만들어야 합니다. 사용자가 그래픽의 특정 부분을 확대했으며 스크롤하여 해당 부분의 인접한 영역을 탐색하려는 경우 이동이 중요합니다.

확대/축소 및 이동에 적합한 SVG 테스트 그래픽은 다음 그래픽과 유사할 수 있습니다.

testGraphic.html의 스크린샷

이 그래픽은 HTML5 인라인 SVG 테스트 그래픽(영문) 예제를 사용하여 만들었습니다.

참고  Internet Explorer 9의 경우 예제의 태그를 보려면 렌더링된 페이지를 마우스 오른쪽 단추로 클릭하고 소스 보기를 클릭합니다.

HTML5 인라인 SVG 테스트 그래픽(영문) 예제의 다음 (불완전) 코드 조각은 이전 그래픽을 만든 방법을 보여 줍니다.



<!-- Define an SVG graphic which will be reduced in size and reused multiple times. -->

<g id="parentGraphic" style="stroke: blue; fill: blue;">
  <rect x="5%" y="5%" width="90%" height="90%" rx="10" ry="10" 
        style="fill: none; stroke-width: 2px;"/>
  <text x="50%" y="97.2%" style="text-anchor: middle;">
    This text is going to get extremely small.
  </text>
  <text x="95.4%" y="50%" style="writing-mode: tb; text-anchor: middle;">
    The <tspan style="stroke: red;">red</tspan> center dot is to the left.
  </text>
  <text x="3.3%" y="50%" style="writing-mode: tb; text-anchor: middle;">
    The <tspan style="stroke: red; fill: red;">red</tspan> center dot is to the right.
  </text>
</g>


HTML5 인라인 SVG 테스트 그래픽 예제에서 이 그룹화된 SVG 그래픽(<g id="parentGraphic" ...>)의 크기를 줄이고 여러 번 다시 사용하고 use 요소를 여러 번 호출하여 앞에 표시된 테스트 그래픽을 만들었습니다. 예를 들면 다음과 같습니다.

<use href="#parentGraphic" … />

use 요소는 참조된 요소 및 참조된 요소 내에 포함된 모든 자식의 복사본을 만듭니다.

또한 텍스트를 가운데에 쉽게 배치하는 SVG text-anchor: middle 스타일과 텍스트를 세로로 표시하는 writing-mode: tb를 확인합니다.

최근 CSS 변환과 마찬가지로, SVG는 변환, 배율 및 회전을 비롯한 동일한 개념을 항상 지원했습니다. 중심점을 기준으로 그래픽의 배율을 지정된 인수만큼 조정하려면 다음과 같은 의사 코드를 사용할 수 있습니다.

transform="translate( -centerX*(factor-1), -centerY*(factor-1) ) scale(factor)"

이 의사 코드에서 (centerX, centerY)는 중심점의 (x, y) 좌표를 나타내고 factor는 원하는 배율 인수입니다.

이 예제에서 SVG 뷰포트는 800 x 600픽셀이므로 뷰포트 중심이 (400, 300)에 있습니다. parentGraphic을 10%(배율 인수 0.9와 동등)만큼 축소하려는 경우 의사 코드에서 다음 코드를 사용할 수 있습니다.

transform="translate( -400*(0.9-1), -300*(0.9-1) ) scale(0.9)"

이 코드는 의사 코드가 아닌 다음 코드로 간소화됩니다.

transform="translate(40, 30) scale(0.9)"

이 코드를 use 요소에 직접 적용하여 원하는 효과를 얻을 수 있습니다.

<use href="#parentGraphic" transform="translate(40, 30) scale(0.9)"/>

이 기법은 parentGraphic의 남은 10개 버전을 축소하고 가운데에 배치하는 데 사용됩니다.

이제 이 테스트 그래픽을 사용하여 브라우저 기반 및 스크립트 기반으로 SVG에서 확대/축소 및 이동하는 방법을 보여 줍니다.

브라우저 기반 SVG 확대/축소 및 이동

SVG 그래픽을 확대/축소 및 이동하는 가장 간단한 방법은 브라우저의 기본 확대/축소 및 스크롤 기능을 사용하는 것입니다. Internet Explorer 9의 경우 다음 표에서 확대/축소 관련 마우스 및 바로 가기 키에 대해 설명합니다.

사용자 작업바로 가기 키마우스 바로 가기
확대Ctrl + 더하기(+)Ctrl + <앞으로 휠 회전>
축소Ctrl + 빼기(-)Ctrl + <뒤로 휠 회전>
기본 확대/축소 수준으로 돌아가기Ctrl + 0해당 없음

 

확대/축소된 그래픽 내의 이동은 브라우저의 스크롤 막대를 사용하면 됩니다.

JavaScript 기반 SVG 확대/축소 및 이동

확대/축소, 이동 또는 둘 다의 사용자 인터페이스는 브라우저마다(또는 다른 이유로) 다를 수 있으므로 고유한 JavaScript 기반 확대/축소 및 이동 기능을 구현하는 것이 유용할 수 있습니다. 아래에는 두 가지 경우의 예제가 나와 있습니다.

JavaScript 확대/축소

이 예에서는 두 개의 단추와 마우스 휠을 사용하여 테스트 그래픽을 확대 및 축소합니다. currentScale SVG 확대/축소(영문).

주석을 통해 샘플이 잘 문서화되어 있긴 하지만 다음 몇 가지 항목에 주의합니다.

  • 테스트 그래픽 크기(또는 확대/축소 수준)를 조정하는 데 사용된 기법은 svg 요소의 currentScale 특성입니다.
  • 확대/축소 수준에 관계없이 마우스 휠이 전체 웹 페이지에서 활성화되도록 mousewheel 요소가 window 또는 svg 요소 대신 body 요소에 연결되었습니다.
  • svg 요소의 viewBox 특성은 확대/축소 관련 렌더링 문제를 방지하는 데 필요합니다. viewBox 특성을 사용하지 않고 시도하여 문제를 확인해 보세요.

JavaScript 이동

특정 SVG 그래픽을 확대한 후 그래픽을 이동하여 확대된 여러 부분을 볼 수 있다면 도움이 될 것입니다. 다음 예에서는 화살표 키를 사용하여 간단한 SVG 그래픽(파란색 원)을 이동합니다. SVG 이동(영문).

이 예제에서는 svg 요소의 viewBox 특성 값을 조작하여 이동(및 다음 예제의 확대/축소)을 구현합니다. viewBox 특성 값(4개 숫자로 이루어진 문자열)은 svg 요소로 설정된 뷰포트의 경계에 매핑되는 사용자 공간의 직사각형을 지정합니다. 교육적으로 유용하지만 비표준 어휘를 사용하여 viewBox 구문을 다음과 같이 설명할 수 있습니다.

viewBox="ULCx ULCy UUwidth UUheight"

참고  ULCxULCy는 각각 "upper left corner x" 및 "upper left corner y"를 나타냅니다. UUwidthUUheight는 각각 "user unit width" 및 "user unit height"를 나타냅니다.

일반적으로 SVG 그래픽 개체는 이 사용자 공간(즉, 사용자 좌표계)을 기준으로 이 공간 내에 그려집니다. 비교적 정적 그래픽을 사용하는 확대/축소 및 이동의 경우 일반적으로 SVG 그래픽 개체는 사용자 좌표계 내에서 이동하지 않습니다. 대신 사용자 좌표계 자체가 SVG 뷰포트 내에서(기준) "연결된" 모든 그래픽과 함께 이동합니다. 따라서 뷰포트 관점에서는 그래픽 개체가 이동한 것입니다. 다르게 표현하면, 일반적으로 그래픽 개체 자체가 아니라 그래픽 개체가 "연결"된 사용자 좌표계를 이동하거나 변환합니다.

위의 내용을 고려할 때 ULCx, ULCy, UUwidthUUheight의 4개 숫자는 다음과 같이 해석될 수 있습니다.

  • ULCxULCy - 그래픽 개체가 안에 그려지는 사용자 좌표계의 원점이 이동하여 점(ULCxULCy)이 정의된 SVG 뷰포트의 왼쪽 위에 오도록 합니다. 즉, 사용자 좌표 점(ULCxULCy)이 SVG 뷰포트의 왼쪽 위에 오도록 뷰포트 내에서 사용자 좌표계를 시각적으로 이동합니다. 이렇게 하면 뷰포트를 기준으로 사용자 좌표계의 원점이 "연결된" 모든 그래픽 개체와 함께 이동하게 됩니다.

    다음 예제에서 사용자 좌표계는 암시적 뷰포트 좌표계와 같습니다.

    
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>  <!-- For intranet rendering only, remove when page is placed in production. -->
      <title>SVG viewBox Attribute Values</title>
    </head>
    
    <body style="padding:0px; margin:0px;">
      <svg currentScale="1" width="300px" height="200px" viewBox="0 0 300 200"> 
        <rect x="0" y="0" width="300" height="200" 
              style="stroke: black; fill: none; stroke-width: 1px;"/>
        <circle cx="50" cy="100" r="25" style="fill: purple;"/>
      </svg>
    </body>
    
    </html>
    
    
    

    사용자 좌표계가 뷰포트 위에 겹쳐진 다음 스크린샷에서 이러한 사실을 확인할 수 있습니다.

    정렬된 사용자 및 뷰포트 좌표계

    다음 예제에서 ULCxULCy는 각각 -50과 -25입니다.

    
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>  <!-- For intranet rendering only, remove when page is placed in production. -->
      <title>SVG viewBox Attribute Values</title>
    </head>
    
    <body style="padding:0px; margin:0px;">
      <svg currentScale="1" width="300px" height="200px" viewBox="-50 -25 300 200"> 
        <rect x="0" y="0" width="300" height="200" 
              style="stroke: black; fill: none; stroke-width: 1px;"/>
        <circle cx="50" cy="100" r="25" style="fill: purple;"/>
      </svg>
    </body>
    
    </html> 
    
    
    

    이렇게 하면 사용자 좌표 점(-50, -25)이 뷰포트의 왼쪽 위에 오도록 사용자 좌표계가 이동합니다.

    오프셋 사용자 및 뷰포트 좌표계

    결국 SVG 그래픽이 오른쪽 아래로 "이동"하는 결과가 됩니다. UCLxUCLy가 모두 양수 값일 경우 그래픽이 왼쪽 위로 이동하며 그래픽의 일부가 잘립니다.

  • UUwidthUUheight - 두 값은 각각 가로 및 세로 방향에서 사용자 단위당 뷰포트 픽셀 수를 결정합니다. 다음 코드 조각을 고려해 보세요.

    <svg width="300px" height="200px" viewBox="0 0 300 200">

    이 경우 가로에는 300 사용자 단위당 300픽셀이 있고 세로에는 200 사용자 단위당 200픽셀이 있습니다. 즉, 각 사용자 단위가 1픽셀과 같습니다. 하지만 다음 코드 조각에서는 가로에 600 사용자 단위당 300픽셀(즉, 사용자 단위당 0.5픽셀)이 있고 세로에 400 사용자 단위당 200픽셀(즉, 사용자 단위당 0.5픽셀)이 있습니다. 이렇게 변경하면 다음 예제와 같이 모든 그래픽 개체의 크기가 절반으로 줄어듭니다.

    
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>  <!-- For intranet rendering only, remove when page is placed in production. -->
      <title>SVG viewBox Attribute Values</title>
    </head>
    
    <body style="padding:0px; margin:0px;">
      <svg currentScale="1" width="300px" height="200px" viewBox="-50 -25 600 400"> 
        <rect x="0" y="0" width="300" height="200" 
              style="stroke: black; fill: none; stroke-width: 1px;"/>
        <circle cx="50" cy="100" r="25" style="fill: purple;"/>
      </svg>
    </body>
    
    </html> 
    
    
    

    이 배율(또는 크기 조정) 효과는 다음 스크린샷에 표시되어 있습니다.

    크기가 조정된 사용자 좌표계

요약

이 예제에서는 위에 설명된 viewBox 특성 값을 사용하여 SVG 테스트 그래픽을 이동 및 확대/축소합니다.SVG 확대/축소 & 이동(영문).

프로그래밍 방식으로 svg 요소의 currentScale 특성 값을 수정하는 것과 반대로 이 예제에서는 svg 요소의 viewBox 특성에서 마지막 두 개(너비 및 높이) 값을 수정하여 확대/축소 기능을 구현합니다.

복잡한 SVG 조직도 만들기

Excel(또는 다른 응용 프로그램)을 Visio 2010과 함께 사용하여 복잡하고 자세한 SVG 조직도를 만들 수 있습니다. 이 조직도는 SVG 사용 브라우저에서 표시할 수 있습니다. 이 프로세스를 다음과 같이 여러 구성 요소로 나누어 설명하겠습니다.

  • Excel을 사용하여 계층적 조직도 목록을 만들기
  • Visio 2010을 사용하여 Excel 목록에서 SVG 조직도 그래픽 만들기
  • 웹 페이지에 독립 실행형 SVG 파일 표시

Excel을 사용하여 조직도 목록 만들기

조직도 목록의 형식은 간단합니다. 예를 들어 다음 스프레드시트 조각에서는 가상 회사의 각 직원에 대해 해당 이름, 직속 상사 및 조직도에 표시할 기타 유용한 정보가 나열됩니다.

이름보고 대상제목부서전화
직원 이름 1VP중역x5555
직원 이름 2직원 이름 1VP중역x5556
직원 이름 3직원 이름 1VP중역x5557
.....
.....
.....
직원 이름 100직원 이름 22개별 참여자카페 서비스x5654

 

위의 표는 적절한 길이로 조정하고 필요한 경우 추가 정보를 포함할 수 있습니다.

참고  조직도 목록을 만들 때는 Excel이 필요하지 않습니다. 간단한 텍스트 파일을 비롯한 다른 응용 프로그램을 사용하여 조직의 계층 구조를 정의할 수 있습니다. 예를 들어 다음 링크는 Excel 파일의 CSV 버전을 제공합니다. 100 직원 조직도 목록(CSV 형식)(영문).

자세한 내용은 Visio 2010 도움말 설명서의 "조직도 만들기" 항목에서 "기존 데이터 원본을 사용하여 자동으로 조직도 만들기" 섹션을 참조하세요.

조직도 목록이 완성되면 다음 섹션에 설명된 대로 Visio 2010으로 가져올 수 있습니다.

Visio 2010을 사용하여 조직도 그래픽 만들기

조직도 목록 가져오기는 비교적 간단합니다. Visio 2010에서 다음과 같이 하세요.

  1. 파일 탭을 클릭합니다.
  2. 새로 만들기, 비즈니스를 차례로 클릭한 다음 조직도 마법사를 두 번 클릭합니다.
  3. 마법사의 첫 페이지에서 이미 파일이나 데이터베이스에 저장된 정보 를 선택합니다.
  4. 다음을 클릭하고 마법사의 나머지 단계를 따릅니다.

참고  조직도를 Visio 2010 페이지 하나에 표시하려면 마법사에서 각 페이지에 표시할 양을 직접 지정을 선택합니다.

자세한 내용은 Visio 2010 도움말 설명서의 "조직도 만들기" 항목에서 "기존 데이터 원본을 사용하여 자동으로 조직도 만들기" 섹션을 참조하세요.

마법사가 완료된 후 결과로 생성된 Visio 2010 조직도 레이아웃을 필요에 따라 조정하고(글꼴 크기 축소 등) 다른 이름으로 저장 대화 상자를 통해 조직도를 스케일러블 벡터 그래픽(*.svg) 형식으로 저장합니다. 이제 다음 섹션에 설명된 대로 지원하는 웹 브라우저에서 이 SVG 파일을 표시할 수 있습니다.

웹 페이지에 독립 실행형 SVG 파일 표시

Visio 2010 또는 InkScape와 같은 응용 프로그램에서 독립 실행형 SVG 파일을 생성한 후 지원되는 브라우저에서 SVG 파일을 다양한 방법으로 표시할 수 있습니다.

독립 실행형 SVG 파일을 표시하는 가장 간단한 방법 중 하나는 독립 실행형 SVG를 지원하는 브라우저에서 여는 것입니다. 예를 들어 다음 링크를 클릭하면 앞에서 설명한 것처럼 독립 실행형 SVG 형식으로 저장된 100명의 직원 Visio 2010 조직도가 열립니다. orgChart.svg.

필요한 경우 브라우저의 기본 확대/축소 및 스크롤(이동) 기능을 사용하여 이 SVG 그래픽을 탐색할 수 있습니다. Internet Explorer 9에서는 위의 표에 설명된 대로 확대/축소할 수 있습니다. 스크롤 막대가 있을 경우 스크롤 막대만 이동하면 그래픽을 이동할 수 있습니다.

독립 실행형 SVG 파일을 만든 후 다양한 방법으로 기존 웹 페이지나 새로운 웹 페이지에 포함할 수 있습니다. 예를 들어 iframe, embed, objectimg 요소와 CSS background-image 스타일을 사용할 수 있습니다. 특히 object 요소는 사용자 브라우저에서 SVG를 지원하지 않을 경우 편리한 대체 기능을 지원하므로 비교적 유용합니다. 다음 태그에서는 HTML 웹 페이지의 object 요소를 사용하여 독립 실행형 조직도 SVG 파일을 표시합니다.


<!DOCTYPE html>
<html>
<head>  
  <title>100 Employee SVG Org Chart</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  <!-- For intranet rendering only, remove when page is placed in production! -->
</head>

<body>
  <h1>Embedding SVG in a HTML Document</h1>
  <p>Embedding the file <em>orgChart.svg</em> using the <strong>object</strong> element:</p>
  <object data="orgChart.svg" width="800px" height="600px" type="image/svg+xml">
    <img src="orgChart.png" alt="PNG Image of 100 Employee SVG Org Chart" />
  </object>
</body>

</html>


사용자 브라우저에서 SVG를 지원하지 않을 경우 SVG 조직도의 PNG 이미지 파일이 표시됩니다.

다음 링크는 JavaScript 기반 확대/축소 및 이동을 포함하도록 이 HTML <object> 샘플을 확장합니다(앞에서 설명한 viewBox 기술 사용). SVG 조직도 확대/축소 & 이동(영문).

SVG 조직도 확대/축소 & 이동(영문) 예제에서는 앞에서 설명한 것과 동일한 기술을 사용합니다. 스크립트에서 orgChart.svg 파일에 별도로 포함된 svg 요소에 액세스해야 한다는 점만 다릅니다. 다음 코드 조각은 이 작업이 어떻게 수행되었는지를 보여 줍니다.


var theSvgDocument = document.getElementById('objectElement').getSVGDocument();
theSvgElement = theSvgDocument.documentElement;

즉, 로컬 object 요소를 통해 외부 SVG 문서 개체에 액세스합니다. 그런 다음 SVG 문서 개체를 사용하여 외부 svg 요소에 액세스할 수 있습니다.

요약

SVG는 벡터 특성이 있으므로 복잡한 조직도, 건축 도면, 지도 및 기타 유사한 미디어와 같이 높은 세부 수준이 필요한 그래픽에 적합합니다. 이 항목에서는 SVG의 주요 기능 중 하나인 스케일러블 벡터 그래픽을 사용하는 방법을 보여 줍니다.

관련 항목

웹 페이지에 SVG를 추가하는 방법
SVG
SVG 참조
SVG 사양

 

 

표시:
© 2014 Microsoft