Html5 canvas & svg 2012 dcc

.devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 4322-0826.F 9001-523.T moc.wodic.www//:ptth 층3 딩빌MI 12-928 동삼역 구남강 시울서 우도시|주
devreser sthgir llA ,2102 ©wodiC
wodiC fo tnesnoc sserpxe eht tuohtiw ,trap ni ro elohw ni ,dettimsnart ,desolcsid ,deipoc ,decudorper
,desu eb ton llahs lairetam sihT .esu lanretni s’tneilC rof ylelos si lairetam sihT .wodiC fo ytreporp eht
ylelos si hcihw noitamrofni laitnedifnoc dna terces edart sniatnoc tI .wodiC ot yrateirporp si lairetam sihT
laitnedifnoC dna yrateirporP ECITON
2102 rebmetpeS 42 | sdradnatS | wodiC
The Future of Graphics on the Web
sdradnatS beW ot daoR

.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

Access Storage
Styling Connectivity 3D Effects Device Multimedia Offline Performance Semantics


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Ⓒ


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


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



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. .


제공속도의 문제
SVG 렌더링으로 제공하고 있는 애플의 홈페이지(http://www.apple.com/)
Comparison of Canvas and SVG

Canvas SVG
Vector vs. Pixel
Comparison of Canvas and SVG

2102
.devreseR thgiR llA .dtL ,.oC WODiC 2102Ⓒ 01 rebmetpeS 42
Browser Support for HTML5 Element

http:/ / www.ro.me/ tech/

https:/ / developer.mozilla.org/ ko/ demos/ detail/ the- planetarium/ launch
the-
THE PLANETARIUM
SVG Examples.

http:/ / raphaeljs.com/
Raphaël—JavaScript Library
SVG Examples.

/ 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.


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


http:/ / mudcu.be/ sketchpad/
Image Editor : HTML5 Canvas
Canvas Examples.

http:/ / www.benjoffe.com/ code/ demos/ canvascape/
Game : Canvascape - "3D Walker"
Canvas Examples.

http:/ / www.pirateslovedaisies.com/
Game : pirateslovedaisies.com
Canvas Examples.

http:/ / www.ambiera.com/ coppercube/ webgldemos.html
(WebGL 기반 자바스크립트 3D 엔진)
Coppercube Model Viewer demo – WebGL
Canvas Examples.

2102
http:/ / paperjs.org/
http:/ / paperjs.org/ examples
Canvas를 이용해서 vector graphic를 구현해주는 자바스크립트
Paper.js


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.



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
우분투에선 파이어폭스 3.6.8 버전 지원
윈도우에선 IE9 프리뷰 버전이나 파이어폭스 4.0 beta4 GPU 가속지원
Psychedilic Browsing :
Fully Hardeware-Accelerated HTML5

ance/ PsychedelicBrowsing/ Default.html
http:/ / ie.microsoft.com/ testdrive/ Perform

2102
http:/ / www.youtube.com/ watch?v=zT_JLsx4NgE&feature=player_embedded# !
Accelerated HTML5-DirectCanvas-AppMobi

HTML5 Canvas Animation & Application
combination.
Canvas + SVG + WebGL + etc.
Perhaps the best choice would be a
Summary.


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



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


/ 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

takwhan.kim@cidow.com 010-2372-4436
Thanks for Listening!

Html5 canvas & svg 2012 dcc

More Related Content

Similar to Html5 canvas & svg 2012 dcc

More from takwhan kim

Recently uploaded

Html5 canvas & svg 2012 dcc