SVG

Size: px

Start display at page:

Download "SVG"

지숙 목
5 years ago
Views:

1 웹벡터그래픽 Web Vector Graphics 최윤석 Namo Interactive Inc. 1

2 목차 SVG 소개 SVG 현황및활용예소개 다른포맷과의비교 향후발전방향 2

3 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

4 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 : SVG Working Group ~ : SVG Working Draft ~ : SVG Candidate Recommendation : Proposed Recommendation : Recommendation 4

5 SVG 의특징 XML Application Vector graphics Text based CSS Styling Bitmap Effects Data driven graphics Rich typographic control 5

6 SVG 의장점 - 디자이너 Transparency Alpha Channel Gradients Pattern Typographic control Filter effects Animatable attribute 6

7 SVG 의장점 - 프로그래머 DOM Level 2 Support Searchable CSS Styling Data handling ECMA Script Interactivity 7

8 SVG 구성요소 Basic Shape Path Text Bitmap Filter Gradient, Patterns Clipping, Masking and Compositing Declarative Animation 8

9 Basic Shape Rectangle Circle Ellipse Line Polyline Polygon 9

10 Path Moveto Lineto Curveto Arc Closepath 10

11 Text <text> <tspan> <tref> <textpath> Internalization Support UTF-8 인코딩지원 가로 / 세로쓰기지원 Direction CSS2 Decoration Font Embedding 가능 11

12 Filling, Stroking Fill Solid Color Gradient : Linear, Radial Pattern : Vector, Bitmap Opacity Stroke Line join, Line cap, Miter limit Dash Array 12

13 Clipping, Masking Clipping Masking Compositing Multiple Darken Lighten Screen 13

14 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

15 Filter Filter primitives feblend, feflood, fecolormatrix, fecomponenttransfer, fecomposite, feconvolvematrix, feimage, femerge, feoffset, fetile fediffuselighting, fedistantlight, fepointlight, fespecularlighting, fespotlight fedisplacementmap, femorphology, feturbulence, fegaussianblur 15

16 Filter Example Bevel feoffset fespecularlighting femerge fegaussianblur fepointlight fespecularlighting fecomposite fecomposite 16

17 Animation Declarative Animation 'animate' 'set' 'animatemotion' 'animatecolor' 'animatetransform' JAVA Script Animation 17

18 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=" <svg></svg> XML <svg xmlns=" 18

19 지원 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

20 SVG 활용예 - GIS 20

21 SVG 활용예 - Chart 21

22 SVG 활용예 - SCADA 22

23 SVG 활용예 기타 23

24 SVG 활용예 - Illustration 24

25 다른포맷과의비교 SVG vs SWF 25

26 비교표 1 항목 SWF SVG 공식 W3C 표준 비표준 표준 파일수정의용이성 난이함 용이함 DOM 투명성 내부 DOM XML DOM CSS와 XSL 지원 스타일만 둘다지원 XSLT Transformations 불가 가능 인덱싱 불가 가능 필터 ( 효과 ) 불가벡터와비트맵모두지원 중첩된변형불가가능 단위혼재사용 불가 가능 (mm, px, pt, pc, in, em, etc.) 클리핑, 마스킹, 컴포지트클리핑과마스킹가능클리핑, 마스킹, 컴포지트 26

27 비교표 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 파서와라이브러리가존재함.

28 SVG 의장점 XML, CSS, XSL, XSLT 지원 ECMA Script 지원 인덱싱, 텍스트검색가능 필터효과 벡터, 비트맵패턴 Internalization 및 CSS style sheet Path Text 속성, Interpolation 애니메이션 재수정이가능한출력포맷 28

29 SVG 의약점 스트리밍 동영상, 사운드편집및변형 파일사이즈 데이터암호화 플러그인의속도 29

30 30 향후발전방향

31 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

32 SVG Version 1.2 워드랩지원 <BR> 태그지원 Page Break 지원 보다다양한컴포지션연산제공 스트리밍애니메이션지원? onprint 이벤트와같은인쇄관련 DOM events 를제공 Xpath 또는 XSLT 문법을사용한자유로운레이아웃기능 32

33 SVG Version 2.0 Elements 의확장 : Arc, spline, spiral 사전정의된유저인터페이스컨트롤제공 레이어개념지원 XML Encryption 과 XML Signature 을이용한소스보호 복수의도형내글자입력및링크가능 그라디언트방식추가 z-index Raster( 비트맵 ) filter effects 추가 Stroke 스타일정의 ( 브러시 ) 가능 오브젝트의다중선택가능 JPEG2000 지원 Perspective transform 추가 문서의재생속도제어 문서내다중타임라인허용 33

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.