웹벡터그래픽 Web Vector Graphics 최윤석 Namo Interactive Inc. clotho45@namo.com 1
목차 SVG 소개 SVG 현황및활용예소개 다른포맷과의비교 향후발전방향 2
3 SVG 소개
SVG History W3C 표준 Vector Graphic Format Graphic S/W : Adobe Systems, Macromedia, Autodesk, Corel, Quark Web Browser : Microsoft, AOL/Netscape, Opera H/W Vendor : Apple, Hewlett-Packard, IBM, Sun Microsystems Printing : Canon, Eastman Kodak, Xerox 1998.8 : SVG Working Group 1999.2 ~ 2000.6 : SVG Working Draft 2000.8 ~2000.11: SVG Candidate Recommendation 2001.7 : Proposed Recommendation 2001.9 : Recommendation 4
SVG 의특징 XML Application Vector graphics Text based CSS Styling Bitmap Effects Data driven graphics Rich typographic control 5
SVG 의장점 - 디자이너 Transparency Alpha Channel Gradients Pattern Typographic control Filter effects Animatable attribute 6
SVG 의장점 - 프로그래머 DOM Level 2 Support Searchable CSS Styling Data handling ECMA Script Interactivity 7
SVG 구성요소 Basic Shape Path Text Bitmap Filter Gradient, Patterns Clipping, Masking and Compositing Declarative Animation 8
Basic Shape Rectangle Circle Ellipse Line Polyline Polygon 9
Path Moveto Lineto Curveto Arc Closepath 10
Text <text> <tspan> <tref> <textpath> Internalization Support UTF-8 인코딩지원 가로 / 세로쓰기지원 Direction CSS2 Decoration Font Embedding 가능 11
Filling, Stroking Fill Solid Color Gradient : Linear, Radial Pattern : Vector, Bitmap Opacity Stroke Line join, Line cap, Miter limit Dash Array 12
Clipping, Masking Clipping Masking Compositing Multiple Darken Lighten Screen 13
Bitmap 사용가능한 Bitmap 파일의형식 GIF JPG JPG 2000 (SVG 1.2 or later) PNG 14
Filter Filter primitives feblend, feflood, fecolormatrix, fecomponenttransfer, fecomposite, feconvolvematrix, feimage, femerge, feoffset, fetile fediffuselighting, fedistantlight, fepointlight, fespecularlighting, fespotlight fedisplacementmap, femorphology, feturbulence, fegaussianblur 15
Filter Example Bevel feoffset fespecularlighting femerge fegaussianblur fepointlight fespecularlighting fecomposite fecomposite 16
Animation Declarative Animation 'animate' 'set' 'animatemotion' 'animatecolor' 'animatetransform' JAVA Script Animation 17
SVG 삽입 HTML <embed src="drawing.svg" type="image/svg+xml"/> XHTML <object type="image/svg+xml" data="drawing.svg"> <img src="alternate_image.jpg" alt="alternate description" /> <html xmlns:svg="http://www.w3.org/2000/svg"> <svg></svg> XML <svg xmlns="http://www.w3.org/2000/svg"> 18
지원 S/W 현황 Browser/Viewer Adobe SVG Plug-in Mozilla SVG Project SVG Oriented S/W Jasc WebDraw W3C Amaya SVG Support S/W Adobe Illustrator 10 Corel CorelDraw! 10 Namo WebCanvas 1.0 19
SVG 활용예 - GIS http://www.dbxgeomatics.com/ 20
SVG 활용예 - Chart http://www.corda.com 21
SVG 활용예 - SCADA http://www.wpsenergy.com/jaynick/ 22
SVG 활용예 기타 http://www.sharpmotionart.com 23
SVG 활용예 - Illustration http://www.namo.co.kr 24
다른포맷과의비교 SVG vs SWF 25
비교표 1 항목 SWF SVG 공식 W3C 표준 비표준 표준 파일수정의용이성 난이함 용이함 DOM 투명성 내부 DOM XML DOM CSS와 XSL 지원 스타일만 둘다지원 XSLT Transformations 불가 가능 인덱싱 불가 가능 필터 ( 효과 ) 불가벡터와비트맵모두지원 중첩된변형불가가능 단위혼재사용 불가 가능 (mm, px, pt, pc, in, em, etc.) 클리핑, 마스킹, 컴포지트클리핑과마스킹가능클리핑, 마스킹, 컴포지트 26
비교표 2 항목 SWF SVG 사운드가능. 임베딩, 스트리밍과 mp3 지원가능 - 링크와임베딩가능 동영상가능, 외부동영상파일을링크가능 링크와임베딩 스크립트언어와프로그래밍 애니메이션 하이퍼링크 데이터베이스연결 변환기개발용이성 27 액션스크립트 (ECMA JAVA 스크립트와유사 ), ECMA Java 스크립트와혼용가능 가능, 프레임 / 타임 / 스크립트기반 가능 가능, Macromedia Generator, PerlDBI, Servlets, ASP, FlashSQL, 기타 바이너리포맷이기때문에어려움. C++ 로된 SDK 배포중. ECMA 자바스크립트, Java 바인딩, ActiveX 컨트롤 가능, 프레임 / 타임 /interpolation/ 스크립트기반 XLINK 완벽호환, SVG 내부, 뷰포트로의링크와외부엔티티로의링크가능 가능, PerlDBI, Servlets, ASP, 기타 텍스트베이스이기때문에용이함, 수많은 XML 파서와라이브러리가존재함.
SVG 의장점 XML, CSS, XSL, XSLT 지원 ECMA Script 지원 인덱싱, 텍스트검색가능 필터효과 벡터, 비트맵패턴 Internalization 및 CSS style sheet Path Text 속성, Interpolation 애니메이션 재수정이가능한출력포맷 28
SVG 의약점 스트리밍 동영상, 사운드편집및변형 파일사이즈 데이터암호화 플러그인의속도 29
30 향후발전방향
SVG Version 1.1 Module 화 Profile 도입 SVG Basic : PDA Elements 단순화 feconvolvematrix, fediffuselighting, fedistantlight, fepointlight, fespecularlighting, fespotlight fedisplacementmap, femorphology, feturbulence Marker SVG Tiny : Cellphone filter textpath, tspan Gradient, pattern mask, clippath color-profile, marker, symbol, cursor 31
SVG Version 1.2 워드랩지원 <BR> 태그지원 Page Break 지원 보다다양한컴포지션연산제공 스트리밍애니메이션지원? onprint 이벤트와같은인쇄관련 DOM events 를제공 Xpath 또는 XSLT 문법을사용한자유로운레이아웃기능 32
SVG Version 2.0 Elements 의확장 : Arc, spline, spiral 사전정의된유저인터페이스컨트롤제공 레이어개념지원 XML Encryption 과 XML Signature 을이용한소스보호 복수의도형내글자입력및링크가능 그라디언트방식추가 z-index Raster( 비트맵 ) filter effects 추가 Stroke 스타일정의 ( 브러시 ) 가능 오브젝트의다중선택가능 JPEG2000 지원 Perspective transform 추가 문서의재생속도제어 문서내다중타임라인허용 33