SVG FAQ (Adobe 페이지에서 펌)

SVG FAQ

[출처 : Adobe 홈페이지]

(1) SVG라고 하는 것은 무엇입니까?

SVG (Scalable Vector Graphic)라고 하는 것은, 벡터 그래픽스 언어의 개방적인 표준입니다. 이것을 이용하면, 그라데이션, embedded 폰트, 투명도, 애니메이션, 필터 효과등의 세련된 엘리먼트를 포함한, exciting 고해상도 그래픽스를 사용한 Web 페이지를, 텍스트 커멘드로 디자인할 수가 있습니다.
Scalable Vector Graphic 포맷은 XML (Extensible Markup Language)에 근거하는 것으로, 현재 World Wide Web Consortium (W3C)의 워킹 그룹이 개발을 진행시키고 있는 중입니다.

(2) W3C SVG 워킹 그룹의 멤버를 가르쳐 주세요?

SVG 워킹 그룹은, 아도브, 애플, 오토 데스크, BitFlash, 코렐, HP, IBM, ILOG, INSO, 매크로 미디어, 마이크로소프트, 네스케이프, OASIS, Quark, RAL (CCLRC), SUN, 제록스등의 업계의 주도적 기업과 W3C의 스탭으로 구성되어 있습니다.

(3) 개방적인 표준이라고 하는 것은 어떤 의미입니까?　또, 왜 그것이 중요한 것일까요?

개방적인 표준이기 때문에, SVG는 특정의 기업에 속하는 것이 아니라, 업계 리더의 공동 작업에 의해 만들어진 것입니다. SVG 스탠다드는, 이것을 이용하려고 하는 모든 기업, 개인에 대해서 열리고 있어 벌써 몇개의 기업이 SVG의 작성, 편집, 표시등을 서포트하는 어플리케이션을 발표하고 있습니다.

(4) SVG와 W3C의 관계는 어떻게 되어 있습니까?

W3C는 국제적인 업계 단체로서 설립되어, 공통의 조작성을 확보하기 위한 공통의 프로토콜을 개발하는 것으로, World Wide Web의 가능성을 최대한 발휘할 수 있는 상황을 만들어 내도록 노력해 왔습니다. Web의 일관성과 영향력을 촉진하기 위해서, W3C는 스스로 지금까지 작성해 온 기준 (DOM1, DOM2, CSS, XML, XPointer, XSLT, XSL, SMIL, HTML, XHTML)이나, 그 외의 표준이 되고 있는 테크놀로지 (ICC, URI, UNICODE, sRGB, ECMAScript/JavaScript, Java)에 적합하도록 SVG를 설계했습니다.

(5) DOM 이라고 하는 것은 무엇입니까?

Document Object Model 이라고 하는 것은, 플랫폼이나 언어에 좌우되지 않는 인터페이스로, 프로그램이나 스크립트가 문서의 컨텐트, 구조, 스타일에 다이나믹하게 액세스 해, 업데이트 할 수 있도록 하는 것입니다. SVG전용의 DOM은, 스크립팅에 의해 직접적으로 효율적인 벡터 그래픽스 애니메이션을 실현합니다. onmouseover나 onclick 이라고 하는 이벤트 핸들러의 풍부한 세트를, 모든 SVG graphical object에 할당할 수가 있습니다. 그 다른 Web 표준과도 호환성이 있기 때문에, 스크립팅 등의 기능은 같은 Web 페이지내의 HTML나 SVG의 엘리먼트에도 동시에 작용합니다.
상세 정보에 관해서는W3C의 사이트를 봐주세요.

(6) SVG와 VML 및 PGML와의 관계는 어떻게 되어 있는 것일까요?

Vector Markup Language (VML) 및 Precision Graphics Markup Language (PGML)는, 1998년에 W3C가 벡터 그래픽스의 표준화 작업을 시작할 때에, 제안된 것입니다. VML와 PGML에는 차이점보다 공통되는 점이 많았습니다만, 일반적으로 VML는 오피스용 그래픽스 작성을 서포트하는 것으로, PGML는 프로패셔널 전용의 디자인이나 출판 업계등의 용도로 서포트하기 위해서, 제안된 것입니다.
그 외 다양한 제안을 받아, W3C는 SVG 작업 그룹을 만들었습니다. SVG는 VML와 PGML의 뛰어난 부분을 수용한 벡터 포맷으로, 표준화의 필요성을 충분히 만족하는, 최선의 포맷인 것입니다.

(7) SVG와 같은 벡터 그래픽스 포맷과 GIF나 JPEG와 같은 래스터 포맷 내지 비트 맵 포맷이란, 어떠한 점이 다른 것일까요?

GIF나 JPEG와 같은 래스터 포맷내지 비트 맵 포맷은, 그래픽을 표시하기 위해서 필요한 모든 픽셀의 정보를 포함하지 않으면 안됩니다. 그 때문에 GIF나 JPEG의 파일은, 부피가 커지고, 해상도는 낮고, 게다가 Web상에서 bandwidth를 크게 사용하게 되기 쉽상입니다. 이것에 대해서 벡터 그래픽스는 직선과 곡선으로 오브젝트를 기술하기 때문에, SVG 벡터 파일을 이용하면, 컴팩트하고 또한 인쇄 화질의 그래픽스를 Web상에서 전달하는 것이 가능하게 됩니다. 또 인쇄에도 이용할 수 있는 것 외에 자원이 한정되는 휴대 기기로도 이용할 수가 있습니다.

(8) GIF나 JPEG에서는 제공할 수 없는 것을, SVG는 제공할 수 있습니까?

SVG는, GIF와 같은 비트 맵 포맷 또는 래스터 포맷에는 없는, 많은 중요한 특징을 가지고 있습니다.
# 줌： sharpness, detail, clarity 등을 희생하는 일 없이, 유저는 화상의 표시를 확대 축소할 수가 있습니다.
# 텍스트는 텍스트인 채로： SVG 화상내의 텍스트는, 항상 편집 가능해 검색할 수도 있습니다. 폰트의 제한도 없기 때문에, 유저도 항상 같은 영상을 보게 됩니다.
# 작은 파일 사이즈： SVG 파일은 JPEG나 GIF라고 하는 Web 그래픽스 포맷에 비해 작기 때문에, 로딩 시간도 짧아집니다.
# 디스플레이에 의존적이지 않은： SVG 영상은 디스플레이에 표시했을 경우에는 항상 선명해, 300 dpi이든 600 dpi이든, 혹은 그 이상의 해상도에서도 인쇄할 수가 있습니다.
# 탁월한 칼라 컨트롤： SVG는 1600만색의 칼라 팔레트를 제공합니다. 또, ICC 칼라 프로파일, sRGB, 그라데이션, 마스킹을 서포트하고 있습니다.
# Interactivity and intelligence： SVG는 XML 베이스이기 때문에, 최고의 Interactivity 제공합니다. SVG 화상은, 하이라이트나 툴 Tips, 특수 효과, 오디오, 애니메이션등을 이용해, 유저의 액션에 응할 수가 있습니다.

(9) XML 베이스의 벡터 그래픽스 언어에는 어떠한 이점이 있는 것일까요?

XML은 HTML보다 뛰어난 스트럭쳐 컨트롤과 정교함을 제공합니다. SVG는 완전하게 XML 베이스이기 때문에, 개발자에 있어서도, 유저에 있어서도 큰 메리트가 있습니다. Web 사이트가 점차 복잡해지고, Interactivity 나 비주얼이 정교해짐에 따라, Web 디자이너는 HTML보다 강력한 언어를 필요로 하게 되었습니다.
Extensible Markup Language (XML)는, Web 업계의 주요한 기업이나 개발자로부터도 폭넓게 지지 및 서포트를 받고 있습니다.
XML는 HTML과는 달리, 프레젠테이션과 컨텐트가 완전하게 분리하고 있습니다. 구조화 된 데이터 타입으로 정보를 기술하는 것으로써, 유저 어플리케이션은 동일한 XML 페이지를 표시하거나 혹은 데이터로서 처리하는 것이 가능합니다.

(10) Web에 텍스트 베이스의 벡터 포맷을 사용하면, 어떠한 이점이 있는 것일까요?

SVG나 XML은 완전하게 텍스트 베이스입니다. 이 때문에, 개발자에게도 유저에게도 수많은 메리트가 있습니다.
# SVG 화상은 XML 베이스의 커멘드로 압축되고 텍스트로 기술되기 때문에, JavaScript나 XML를 짜넣을 수가 있습니다. 짧고 스마트한 코드.
# 텍스트 베이스의 포맷이기 때문에, 검색 엔진이나 브라우저의 검색 기능을 이용해, 유저가 SVG 영상내의 텍스트를 검색할 수가 있습니다.
# SVG는, JavaScript, Perl, Java등의 스크립팅 언어를 이용해, relational database 로부터 ASCII 파일까지, 모든 소스의 데이터를 사용해, 간단하게 생성할 수가 있습니다. 유저측에서 확대 축소가 가능해, 다이나믹하게 업데이트 되는, 고품위의 차트나 그래프를 작성하는데는 이상적인 수단이라고 말할 수 있습니다.
# SVG는 DOM (Document Object Model)을 완전 서포트하고 있기 때문에, 완벽하게 스크립트 가능합니다. SVG 영상의 전체내지 일부분을, 클릭 등의 마우스 동작에 대응시킬 수가 있습니다. 마우스 움직임으로, 그래픽 자체를 고쳐 쓰거나 HTML 텍스트나 다른 영상 등 동일 페이지상의 다른 오브젝트를 호출하거나, 인터럭티브한 변화를 붙이는 일도 가능합니다.
# SVG는 플랫폼, 출력 해상도, 칼라 스페이스, 밴드폭 에 관계없이 동작합니다.

(11) SVG나 XML을 선택하면, HTML은 그만두고, 처음부터 시작해야 합니까?　또, CGI나 GIF라고 하는 현재 사용하고 있는 Web 테크놀로지도 버리지 않으면 안 되는 것일까요?

No !!! SVG와 XML은 현재의 Web 테크놀로지와 협조해 동작합니다. HTML, CGI 스크립트, Java, JavaScript, GIF나 JPEG라고 하는 래스터 포맷도 모두 확실히 조화를 이루어 동작합니다. Adobe Illustrator와 같이 익숙해진 그래픽 툴을 이용해 일러스트레이션 타입의 그래픽을 그리는 것과 완전히 같은 방식으로, 스케일러블 벡터 그래픽을 작성할 수가 있습니다. Web 디자인용의 SVG 오브젝트를 작성하거나 이용하기 위해서, 새로운 소프트웨어를 처음부터 배울 필요는 없습니다.

(12) 아도브의 SVG 서포트 플랜에 대해 가르쳐 주세요?

개방 표준적이기 때문에 SVG는 어딘가 특정의 기업의 전유물이 아닙니다. 그러나 아도브는 제품 라인 전체에 걸쳐서, 적절한 SVG 서포트를 짜넣어 갈 예정입니다. 아도브는 또, SVG 뷰워도 개발하고 있습니다. 한층 더 아도브는, 각 기업이 폭넓은 어플리케이션을 개발해, SVG의 작성, 편집, 표시의 서포트를 하는 것이라고 생각하고 있습니다.

(13) 언제쯤, 현재의 브라우저로 Adobe SVG 뷰워를 이용할 수 있게 되는 것일까요?

Adobe® SVG 뷰워는 현시점에서, Windows 및 Apple Macintosh 플랫폼에서, Netscape Communicator와 Internet Explorer에 이용하실 수 있습니다. 또 아도브는, W3C가 SVG의 사양을 확정한 직후에, 뷰워를 업데이트 할 예정입니다.

(14) 왜 아도브는 SVG 뷰워를 개발하고 있습니까?

Netscape Navigator나 Microsoft Internet Explorer를 포함해 일반적으로 사용되고 있는 Web 브라우저는 SVG를 서포트하고 있지 않습니다. Adobe SVG 뷰워는, Web상의 SVG 컨텐트에의 액세스를 실현하는 것입니다. 아도브에서는, Adobe.com를 통해서 SVG 뷰워나 관련된 아도브 제품을 간단하게 얻을 수 있도록 하고, 인터넷을 통해서 배포되도록 할 예정입니다.

(15) Web 브라우저가 SVG를 서포트하게 되는 것일까요?

SVG를 서포트하는 스케줄에 관해서는, 브라우저 vender가 아직 공표하고 있지 않습니다.

(16) 데스크탑 대부분이 SVG 표시 기능을 가지게 되는 것은, 언제쯤이 될까요?

아도브를 시작으로 많은 기업의 노력에 의해, 2000년 중반에는 꽤 많은 데스크탑이 SVG 표시 능력을 갖추겠지요. 아도브는, 다른 기업이나 Web 커뮤니티와도 밀접하게 제휴를 취하면서, SVG 표시의 촉진에 노력해 옵니다.
Adobe SVG 뷰워는 간단하게 다운로드할 수 있고, 처음의 유저는 자동적으로 SVG 컨텐트를 포함한 페이지에 갈 수 있게 되어 있습니다. 여기서 유저는, SVG가 제공하는 풍부한 그래픽스와 강화된 interactivity를 체험하겠지요.

(17) 줌 인 줌 아웃의 기능을 사용하지 않으려면 어떻게 하면 좋습니까?

현재로서는, SVG 워킹 드래프트의 스펙에 의하면, 'enableZoomAndPanControls'속성을<svg>에 포함하게 되어 있습니다.이 기능은 현행의 Adobe SVG 뷰워에서도 실현되고 있습니다.

(18) 애니메이션 GIF를 SVG와 공존시키는 것은 가능할까요?

Adobe SVG 뷰워의 현 버젼에서는, 애니메이션 GIF를 일부분 밖에 서포트하고 있지 않습니다. 애니메이션 GIF를 표시할 수 있습니다만, 움직이지 않습니다. 최초의 프레임만이 표시됩니다.

(19) SVG 영상을 포함한 페이지를 전달하기 위해서는, Web 서버에 어떠한 설정을 하면 좋은 것일까요?

서버의 MIME 타입에 SVG MIME 타입을 추가할 필요가 있습니다. SVG MIME 타입은“image/svg-xml”입니다. 새로운 MIME 타입의 추가 방법에 대해서는, 서버의 메뉴얼에 따라 주세요.

(20) Opera나 Amaya와 같이, Netscape 플러그 인을 서포트하는 다른 브라우저에서, Adobe SVG 뷰워는 동작할까요?　만약 동작한다면, Adobe SVG 뷰워를 이러한 브라우저에 인스톨 하는 방법을 가르쳐 주세요.

아도브는 Opera 브라우저에 관해서 현시점에서는 서포트를 하고 있지 않습니다. 그 대신, 우선 가장 넓게 사용되고 있는 플랫폼에 집중해 개발을 진행시키고 있는 중입니다. 당사의 인스톨러는 Opera, Amaya등의 브라우저를 인식하지 않습니다. 그러나, Netscape의 플러그 인 폴더로부터 다른 브라우저의 플러그 인 폴더에 카피하는 것은 가능할지도 모릅니다. 관련하는 파일은, NPSVGVw.dll, SVGView.dll, SVGViewer.zip입니다.

(21) Mac판 Internet Explorer 에서는, HTML내의 JavaScripts가 SVG와 동작하지 않습니다. 왜입니까?

Macintosh판 Internet Explorer는 플러그 인에의 JavaScript에 의한 액세스를 서포트하고 있지 않습니다. 또, 플러그 인에 의한 브라우저의 JavaScript 엔진의 이용도 서포트하고 있지 않습니다. 이 때문에, 특정의 플랫폼에서는, HTML안의 JavaScript가 SVG에 액세스 할 수 없습니다. 같은 SVG 파일안에 있는 JavaScript도 실행할 수 없습니다.

(22) 현재로서는, CSS와 DOM의 서포트 상황은 어떻습니까?

SVG의 사양에 상술되고 있는 CSS 프로퍼티의 대부분은 서포트되고 있습니다. DOM의 서포트는 향후의 릴리스 노트를 봐주세요.

(23) CSS와 SVG와는 어떠한 관계일까요?

Adobe SVG 뷰워는 현재, inline 과 embedded style sheets는 물론, external 스타일 시트도 서포트하고 있습니다. Adobe Illustrator 9.0은 자동적으로 embedded style 의 SVG 영상을 export 하고 있지만, HTML의 경우와 같이 간단하게 외부 스타일 시트와 연동하여 SVG를 디자인할 수도 있습니다(CSS의 레슨에 있는 실례를 봐주세요).

(24) 일본어, 중국어, 헤브라이어, 아라비아어 등, 유럽 이외의 문자를 SVG 파일에 포함하는 방법을 가르쳐 주세요.

SVG 그래픽에 ISO-8859-1 이외의 문자를 포함하려면, 올바른 Unicode 문자치를 사용하지 않으면 안됩니다. Unicode를 이용할 수 있는 에디터로 직접 입력하는 일도 가능합니다만, 수치화된 문자 참조치로 입력할 수도 있습니다. 예를 들어, &#x1122 (이것은 한국어의 문자입니다). Adobe SVG 뷰워는 US-ASCII, ISO-8859-1, UTF-16, UTF-8의 encode를 서포트하고 있습니다.

[실례]
<text x="2.5cm" y="1.5cm"><tspan style="font-family:times">This</tspan><tspan style="font-family:hebrew">&#x05DC</tspan><tspan

style="font-family:times"> SVG.</tspan></text>

다음에 이러한 문자를 표시하기 위해서는, 적절한 폰트가 인스톨 되어 있는 것이 필요합니다. 그러나 Adobe Illustrator는 작은 "CEF" 폰트를 작성하기 때문에, 비록 폰트가 인스톨되어 있지 않아도, 누구라도 SVG를 볼 수가 있습니다. Illustrator의 "CEF" 기능에 관한 자세한 정보와 Unicode에 대한 자세한 정보에 관해서는, http://www.adobe.com/svg/community/external.html#unicode 커뮤니티 섹션의 링크를 이용하십시오.