2. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 2 2102 rebmetpeS 42
6. Appendix.
5. Summary
4. Future possibilities
3. Which one to pick?
- SVG & Canvas
2. Examples
1. Comparison of Canvas and SVG
CONTENTS
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
3. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 3 2102 rebmetpeS 42
Access Storage
Styling Connectivity 3D Effects Device Multimedia Offline Performance Semantics
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
4. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Canvas
플랫폼Platform 없이 Flash나 Flex 또는 Silverlight에서만 가능했던
강력한 멀티미디어 기능을 사용할 수 있다.
HTML5 Canvas Animation & Application
: apple - html element
: Mac OS X Dash Board
: Firefox 1.5
2102 rebmetpeS 42 4 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
5. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
SVG *Scalable Vector Graphics
Graphics Markup for the Web :
2D Graphic을 표현하기 위해 XML을 기반으로 만들어진 언어,
W3C(World Wide Web Consortium)에 의해 제안된 XML Graphic 표준
* Scalable Vector Graphics-XML Based
* Data-driven Graphics
: Backend linking : e-Commerce system, database,
GIS, real-time information
Theater Reservation
* Interactive Graphics
: Uesr interface with web script program : java script,
java, visual basic, CSS Style, HTML Object element
insert.
Interactive Chart & Graphic, Drawing App.
* Personalized Graphics
: Customized : dynamic generation from user
interface or database
Reflection – Font, style, filters
2102 rebmetpeS 42 5 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
6. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Comparison of Canvas and SVG *Scalable Vector Graphics
The tables below give you an overview of the advantages and
disadvantages of SVG and Canvas.
Advantages
Canvas SVG
High performance 2D surface for drawing Resolution independence — this makes SVG better
anything you want. suited for cross-platform user interfaces because it
allows scaling for any screen resolution.
Constant performance — everything is a pixel.
Performance only degrades when the image SVG has very good support for animations.
resolution increases. Elements can be animated using a declarative syntax,
or via JavaScript.
You can save the resulting image as a .png or .jpg.
You have full control over each element using the
Best suited for generating raster graphics SVG DOM API in JavaScript.
(for example in games, fractals, etc.), editing of
images, and operations requiring pixel-level SVG is an XML file format, which means that
manipulation. depending on each Web browser implementation
the accessibility of SVG documents can be much
better than that of canvas elements. This makes SVG
a better solution for Web application user interfaces.
Even if SVG provides mostly presentational markup,
the semantics of the user interface can be improved
with ARIA* attributes * . p p A t e n r e t nI h ci R s s e c c A
2102 rebmetpeS 42 6 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
7. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Comparison of Canvas and SVG *Scalable Vector Graphics
Disadvantages
Canvas SVG
There are no DOM nodes for anything you draw. Slow rendering when document complexity
It is all pixels. increases — anything that uses the DOM a lot will be
slow.
There's no API for animation. You have to resort to
timers and other events to update the Canvas when
needed. SVG might not be suited by itself for applications
like games.
Poor text rendering capabilities.
Might not be the best choice for cases where
accessibility is crucial. Canvas gives you a surface to
draw onto with the API of the context you choose.
Inherently, this means it is all pixels — unless some
future API will define additional capabilities for
accessibility. For now, you can provide fallback
content inside the canvas element that is displayed
by the Web browser when the element itself cannot
be rendered. Additionally, you can perform checks
with JavaScript to see if the desired Canvas API is
available for use. Based on that you can provide
different functionality for users of Web browsers
that lack canvas support.
Canvas is not suited for Web site or application
user interfaces. .
2102 rebmetpeS 42 7 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
8. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 8 2102 rebmetpeS 42
제공속도의 문제
SVG 렌더링으로 제공하고 있는 애플의 홈페이지(http://www.apple.com/)
Comparison of Canvas and SVG
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
9. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 9 2102 rebmetpeS 42
Canvas SVG
Vector vs. Pixel
Comparison of Canvas and SVG
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
10. 2102
.devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 01 rebmetpeS 42
Browser Support for HTML5 Element
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
11. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 11 2102 rebmetpeS 42
http:/ / www.ro.me/ tech/
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
12. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 21 2102 rebmetpeS 42
https:/ / developer.mozilla.org/ ko/ demos/ detail/ the- planetarium/ launch
the-
THE PLANETARIUM
SVG Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
13. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 31 2102 rebmetpeS 42
http:/ / raphaeljs.com/
Raphaël—JavaScript Library
SVG Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
14. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 41 2102 rebmetpeS 42
/ 4 2 3 0 2 4 9 0 1 4 / e i r e g n u ol / s o t o h p / m o c. r k cil f. w w w / /: p t t h
SVG Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
15. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Canvas Examples.
Quake2 : HTML5의 Canvas와 Audio 및 LocalStorage , WebSocket,
WebGL등의 기술을 이용해 GWT(Google Web Tookit)팀에서 퀘이크 2를
HTML5로 포팅하여 에뮬레이션 함.
http:/ / www.youtube.com/ watch?feature=player_embedded&v=XhMN0wlITLk
2102 rebmetpeS 42 51 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
16. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 61 2102 rebmetpeS 42
http:/ / mudcu.be/ sketchpad/
Image Editor : HTML5 Canvas
Canvas Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
17. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 71 2102 rebmetpeS 42
http:/ / www.benjoffe.com/ code/ demos/ canvascape/
Game : Canvascape - "3D Walker"
Canvas Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
18. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 81 2102 rebmetpeS 42
http:/ / www.pirateslovedaisies.com/
Game : pirateslovedaisies.com
Canvas Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
19. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 91 2102 rebmetpeS 42
http:/ / www.ambiera.com/ coppercube/ webgldemos.html
(WebGL 기반 자바스크립트 3D 엔진)
Coppercube Model Viewer demo – WebGL
Canvas Examples.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
20. 2102
.devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 02 rebmetpeS 42
http:/ / paperjs.org/
http:/ / paperjs.org/ examples
Canvas를 이용해서 vector graphic를 구현해주는 자바스크립트
Paper.js
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
21. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Which one to pick?
You should use Canvas for :
• Interactive image editing: cropping, resizing, filters (think red eye
removal, sepia, colorize, etc.)
• Generating raster graphics: data visualizations, data plots,
rendering fractals, function plots.
• Image analysis: read pixels to gather data for histograms, color
usage, and anything else you can imagine.
• Rendering game graphics, such as sprites and backgrounds.
You should use SVG for :
• Resolution-independent Web application user interfaces.
• Highly interactive animated user interfaces.
• Data charts and plots.
• Vector image editing.
2102 rebmetpeS 42 12 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
22. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Future possibilities
• Geolocation API – Daum Roadview Media Chiefs Form Venture to E-
Publish 2 1 0 2 , 8 1 r e b m et p e S
• eBook, App Book : Contents Business Two powerful entertainment
- OS, Browser, Device Independent moguls, Scott Rudin, the film and
theater producer, and Barry Diller,
• Education Service : Contents Business the chairman of
- Create a Drawing Application IAC/InterActiveCorp, are joining
- Science experiments examples together to enter the turbulent
world of book publishing.
- Stock graph
• Browser Game http:/ / www.nytimes.com/ 2012/ 09/ 19/ busin
ess/ media/ barry- diller- and- scott- rudin-
barry- diller- and- scott- rudin-
- 다양한 플래시 게임의 제한적 대체 form- book- publishing-
form- e- book- publishing-
venture.html?_r=1&smid=fb-
venture.html?_r=1&smid=fb- share
• Website Development
- mobile 환경에서 고품질의 이미지를 이용한 수준 높은 웹사이트의 제작 가능
- 콘텐츠 탑재에 대한 부담 경감
구분 개발 라이선스 크로스플랫폼 그래픽타입
SVG W3C 무료 가능 2D Vector
Canvas WHATWG 무료 가능 2D Raster
WebGL Khronos 무료 가능 3D
2102 rebmetpeS 42 22 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
23. 2102
.devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 32 rebmetpeS 42
우분투에선 파이어폭스 3.6.8 버전 지원
윈도우에선 IE9 프리뷰 버전이나 파이어폭스 4.0 beta4 GPU 가속지원
Psychedilic Browsing :
Fully Hardeware-Accelerated HTML5
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
24. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 42 2102 rebmetpeS 42
ance/ PsychedelicBrowsing/ Default.html
http:/ / ie.microsoft.com/ testdrive/ Perform
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
25. 2102
.devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 52 rebmetpeS 42
http:/ / www.youtube.com/ watch?v=zT_JLsx4NgE&feature=player_embedded# !
Accelerated HTML5-DirectCanvas-AppMobi
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
26. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 62 2102 rebmetpeS 42
HTML5 Canvas Animation & Application
combination.
Canvas + SVG + WebGL + etc.
Perhaps the best choice would be a
Summary.
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
27. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Some SVG Generation Tools
Inkscape
http://inkscape.org
Adobe Illustrator
Export to SVG
BTW: AI -> Canvas
http://visitmix.com/labs/ai2canv
as
Microsoft Visio
Save as SVG
http://office.microsoft.com/visio
2102 rebmetpeS 42 72 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
28. G VS & savna C 5L MT H
b e W e h t n o s ci h p a r G f o e r u t u F e h T
Some SVG Libraries
RaphaelJS
http://raphaeljs.com
Dojo Toolkit
http://dojotoolkit.org
Protovis
Graphing library
http://vis.stanford.edu/protovis
A Canvas Library Example
EaselJS
http://easeljs.com
2102 rebmetpeS 42 82 .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ
29. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 92 2102 rebmetpeS 42
/ 9 6 5 8 2 2 6 2 8 2 / 1 0 N @ 1 1 7 5 5 6 5 3 0 1 5 / s o t o h p / m o c . r k cil f. w w w / /: p t t h g ni x o B
/ 7 8 2 3 2 2 7 4 1 / b c a / s o t o h p / m o c. r k cil f. w w w / /: p t t h ” t e p r a C e h t r e d n u “ y s k n a B
/ 7 8 8 3 9 0 8 1 2 / 0 0 N @ 0 6 6 9 7 7 3 4 / s o t o h p / m o c. r k cil f. w w w / /: p t t h d r a C s ci h p a r G
6 1 4 o N - n o ci # / n oi s i v e l e t / n u o n / m o c . t c ej o r p n u o n e h t / /: p t t h n o cI n oi si v el e T
/ 1 6 4 2 4 3 7 6 8 2 / 8 0 N @ 1 3 6 3 7 2 1 1 / s o t o h p / m o c . r k cil f. w w w / /: p t t h t o p a e t y r r u f
/ 7 9 4 2 4 3 7 6 8 2 / 8 0 N @ 1 3 6 3 7 2 1 1 / s o t o h p / m o c . r k cil f. w w w / /: p t t h t o p a e T l a t e M
/ 0 1/ 8 0f _ 3 2 4 s m d/ b u/ m o c. e ar b m u s er//: ptt h l e d o m t o p a et d 3
/ 7 8 6 4 2 0 6 4 2 / s m mi s y d o c j / s o t o h p / m o c . r k cil f. w w w / /: p t t h ” el a s r o f m sil a ti p a C -i t n A “ y s k n a B
/ 9 8 7 2 6 4 1 4 1 / d e h s ci m o t a / s o t o h p / m o c. r k cil f. w w w / /: p t t h ” g o d a f o e r u t ci P d n a n a M “ y s k n a B
/ 6 5 3 9 5 6 4 2 1 / e e f f o c e r o f e b e fil o n / s o t o h p / m o c. r k cil f. w w w / /: p t t h ” ? t a g ni k o ol u o y e r a t a h w “ y s k n a B
/ 2 4 7 3 7 5 0 0 8 1 / s u o r e g n a d e i d d e / s o t o h p / m o c. r k cil f. w w w / /: p t t h ” t e e r t S d r all o P r e w ol F “ y s k n a B
/ 3 4 2 5 5 2 5 4 0 3 / s u o r e g n a d ei d d e / s o t o h p / m o c . r k cil f. w w w / /: p t t h ” al o n “ y s k n a B
/ 1 1 1 6 8 5 3 4 3 6 / k w a h s a m o h t / s o t o h p / m o c . r k cil f. w w w / /: p t t h ” m a e r D r u o y w oll o f “ y s k n a B
/ k u. o c. y s k n a b. w w w / /: p t t h ” e m g ni d di k e b o t t o g e v a h u o Y “ y s k n a B
g pj . p o r c _ t o b o r _ y a u q r o T _ y s k n a B: eli F /i k i w / g r o. ai d e pi ki w. n e / /: p t t h ” t o b o R y a q r u o T “ y k s n a B
/ 8 1 2 5 0 2 5 1 1 4 / 0 0 N @ 9 4 4 1 4 0 7 9 / s o t o h p / m o c . r k c i l f . w w w / / : p t t h ” g n i m o C e r’ y e h T “ y s k n a B
/ 4 2 3 0 2 4 9 0 1 4 / ei r e g n u ol / s o t o h p / m o c . r k cil f. w w w / /: p t t h ” f f o g ni w ol F “ y s k n a B
/ 0 5 9 1 2 4 9 0 1 4 / e i r e g n u ol / s o t o h p / m o c. r k cil f. w w w / /: p t t h ” k a e r B a e v a H “ y s k n a B
s n oi t a c il p p a - s n oi t a m i n a - s a v n a c - 5l m t h - e m o s e w a / s a e di / m o c. b e w s o e h t n e. g ol b / /: p t t h
/ s e l p m a s/ g v s/ t e n. otr a c. w w w//: ptt h
d e t a e r c = t r o s & 2 = e g a p ? g v s : h c e t / g a t / s o m e d / o k / g r o. alli z o m. r e p ol e v e d / /: s p t t h
/ si v o t o r p / m o c. b u h ti g. k c o t s o b m / /: p t t h
l m t h.ll u f - n oi t c e j o r p / x e / si v o t o r p / m o c. b u h ti g. k c o t s o b m / /: p t t h
st e s e r p/ s e l p m a x e / m o c. s j n a m a c//: ptt h
d e t al e r = e r u t a e f & 4 S n 1 k z u g 0 Pl = v ? h c t a w / m o c. e b u t u o y. w w w / /: p t t h
l m t h. c o t /t u o / s w / k o o b - s a v n a c / b oj / 1 0 0 9: g r o. y h s oj. n o s d u h / /: p t t h
/ s e m a g - 5l m t h - g ni zi s e r - s oi d u t s - d r o o w r e h p o g / s ei d u t s e s a c / sl a i r o t u t / n e / m o c . s k c o r 5l m t h. w w w / /: p t t h
n oi t a t n e m e l p m I _ L G b e W _ a _ g ni t t e G / p h p. x e d ni / 5 1 _ 1 _ i ki w /l g b e w / g r o. s o n o r h k. w w w / /: p t t h
6 9 2 / t s o p / m o c.li n o e. g ol b / /: p t t h
/ 0 0 1- p ot/ m o c . s o m e d s a v n a c. w w w//: ptt h
l m t h. tl u a f e D / g ni s w o r B c il e d e h c y s P / e c n a m r o f r e P / e vi r d t s e t / m o c. t f o s o r ci m. ei / /: p t t h
Material Used – Best Practice
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
30. .devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 03 2102 rebmetpeS 42
takwhan.kim@cidow.com 010-2372-4436
Thanks for Listening!
b e W e h t n o s ci h p a r G f o e r u t u F e h T
G VS & savna C 5L MT H
