SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.

Contents What is SVG? (Features of SVG) SVG Syntax and Samples SVG Editors SVG-android Conclusion Q&A

What is SVG? Graphics Markup for the Web : SVG is a markup language for describing two-dimensional graphics applications and images, and a set of related graphics script interfaces (W3C website) SVG Version SVG 1.1 : W3C Recommendation SVG 2 : currently under development SVG Tiny(SVGT) 1. 1 : First mobile profile create by W3c. (June of 2002) SVG Tiny 1.2 : W3C Recommendation, and targets mobile devices.(August of 2006) SVG - Scalable Vector Graphics : SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. This is a public group, which works on an open mailing list and which welcomes your feedback.

Features of SVG? Vector based Graphics technology : even if larger or smaller image size will maintain the quality of content. XML based Graphics technology SVG can edited by Text Editor or professional graphics editing tools. Web browser can open SVG files. (Most major Web browsers support SVG such as IE9, FireFox, Chrome, Safari, Mobile Safari, Mobile Opera, Fennec(FireFox mobile version) SVG can use in Android(through plug-in) and iPhone Series(iPad etc..)

Features of SVG? CanvasSVG 이미지 처리방식 BitmapVector DOM 존재하지 않음 (DOM Control 불가 ) 존재함 (Script 로 Control 가능 ) 외부 이미지 편집 Bitmap image 편집 용이 Vector image 편집 용이 성능높은 해상도의 이미지를 사용하면 성능 저하 이미지가 복잡해질수록 Markup 이 복잡해져 성능이 저하 AnimationAnimation API 가 없으므로 Script 의 Timer 를 사용높은 수준의 Animation 을 지원 Cross Browsing 모든 Web Browser 에서 지원하지 않음모든 Browser 에서 지원되는 Drawing 표준 외부 이미지로 저장 jpg, png 등으로 저장 가능불가 적합한 서비스 Graph 구현, Game Graph 구현, 매우 세밀한 해상도를 지원하는 UI 및 Application 적합하지 않은 서비스 Standalone Application UIGame

web 2.0 generation Rich Internet Application(RIA) 전자신문

web 2.0 generation Animation : HTML5, CSS, javascript without flash

Features of SVG?

SVG Syntax SVG is usually used in HTML page 아래의 그림은 호랑이 입니다. embed, object tag img tag var svgns = " var elLine = document.createElementNS( "line", svgns ); elLine.setAttribute("x1", 100 ); elLIne.setAttribute("x2", 200 );... svgRoot.appendChild( elLine ); Dynamic producing

SVG Samples Coordinate system SVG Code Result Shape tags,,,,,,,,,

SVG Samples 기본 텍스트 폰트 크기 조 절 및 채우기 ABCDE 가나다라 SVG Code Result test tags :

SVG Editors Editors for Mobile SVG The Mobile SVG Editor of Bitflash Xstudio 6

SVG Editors Web Editors for SVG

SVG - android

Conclusion

Q & A