SVG technology
is what we want?
Jaehoon Woo
[email protected]
KNU Real-Time Systems Lab.
•
•
•
•
•
•
What is SVG? (Features of SVG)
SVG Syntax and Samples
SVG Editors
SVG-android
Conclusion
Q&A
Contents
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.
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)
What is 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?
Canvas
이미지 처리방식
DOM
외부 이미지 편집
성능
Animation
Cross Browsing
외부 이미지로 저장
적합한 서비스
적합하지 않은 서비스
SVG
Bitmap
Vector
존재하지 않음(DOM Control 불가)
존재함(Script 로 Control 가능)
Bitmap image 편집 용이
Vector image 편집 용이
높은 해상도의 이미지를 사용하면 성능 저하
이 미 지 가 복 잡 해 질 수 록 Markup 이 복 잡 해 져
성능이 저하
Animation API 가 없으므로 Script 의 Timer 를
높은 수준의 Animation 을 지원
사용
모든 Web Browser 에서 지원하지 않음
모든 Browser 에서 지원되는 Drawing 표준
jpg, png 등으로 저장 가능
불가
Graph 구현, Game
Graph 구현, 매우 세밀한 해상도를 지원하는 UI 및
Application
Standalone Application UI
Game
Features of SVG?
Rich Internet Application(RIA)
web 2.0 generation
<구글마저 어도비 플래시 버리나>
전자신문 2011.06.29
http://nam_1007.blog.me/70115798060
Animation : HTML5, CSS, javascript
without flash
web 2.0 generation
Features of SVG?
< International Conference on SVG >
SVG is usually used in HTML page
embed, object tag
<div>아래의 그림은 호랑이 입니다.<div>
<object type="image/svg+xml" data="tiger.svg">
img tag
<img src="my_image.svg" width="400" height="300">
Dynamic producing
<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";
var elLine = document.createElementNS( "line", svgns );
elLine.setAttribute("x1", 100 );
elLIne.setAttribute("x2", 200 );
...
svgRoot.appendChild( elLine );
</script>
SVG Syntax
SVG Code
<line x1="240" y1="100" x2="300" y2="150" stroke="#00ff00" strokewidth="6" />
<rect width="100" height="150" fill="#0000ff" stroke-width="1"
stroke="#000000" />
<rect x="120" y="10" width="100" height="150" fill="#0000ff" strokewidth="1" stroke="#000000" />
<circle cx="300" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<ellipse cx="300" cy="200" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="300" cy="220" rx="190" ry="20" fill="lime" />
Result
Coordinate system
Shape tags
<line>, <rect>, <circle>,
<ellipse>, <text>, <image>,
<polyline>, <polygon>,
<path>, <use>
SVG Samples
test tags : <test >
SVG Code
<text x="20" y="20">기본 텍스트</text>
<text x="20" y="70" style="font-size:50px;stroke:#000;fill:#0f0">폰트 크기 조
절 및 채우기</text>
<text x="20" y="110" style="font-size:30px;fill:#000;letter-spacing:15px;"
rotate="0,45,90,135,180,225,270,315,360">ABCDE가나다라</text>
Result
SVG Samples
Editors for Mobile SVG
The Mobile SVG Editor of Bitflash
Xstudio 6
SVG Editors
Web Editors for SVGhttp://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
SVG Editors
SVG - android
Conclusion
Q&A