Html5 canvas & svg 2012 dcc

주|시도우 서울시 강남구 역삼동 829-21 IM빌딩 3층 http://www.cidow.com T.325-1009 F.6280-2234

Road to Web Standards

Ⓒ2012 CiDOW Co., Ltd. All Right Reserved.NOTICE Proprietary and ConfidentialThis material is proprietary to Cidow. It contains trade secret and confidential information which is solely the property of Cidow. This material is solely for Client’s internal use. This material shall not be used, reproduced, copied, disclosed, transmitted, in whole or in part, without the express consent of Cidow Cidow© 2012, All rights reserved

The Future of Graphics on the Web24 September 2012Cidow | Standards |

Ⓒ2012 CiDOW Co., Ltd. All Right Reserved.

HTML5 Canvas & SVGThe Future of Graphics on the Web

24 September 2012 2

CONTENTS

1. Comparison of Canvas and SVG

2. Examples- SVG & Canvas

3. Which one to pick?

4. Future possibilities

5. Summary

6. Appendix.



3D EffectsPerformance Semantics OfflineStorage

Multimedia DeviceAccess

Connectivity Styling

24 September 2012 3


HTML5 Canvas & SVGThe Future of Graphics on the Web플랫폼Platform 없이 Flash나 Flex 또는 Silverlight에서만 가능했던강력한 멀티미디어 기능을 사용할 수 있다.

24 September 2012 4

Canvas

: apple - html element : Mac OS X Dash Board : Firefox 1.5

HTML5 Canvas Animation & Application


HTML5 Canvas & SVGThe Future of Graphics on the WebSVG*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 informationTheater 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 databaseReflection – Font, style, filters24 September 2012 5


HTML5 Canvas & SVGThe Future of Graphics on the WebComparison of Canvas and SVG*Scalable Vector Graphics

The tables below give you an overview of the advantages and disadvantages of SVG and Canvas.

Canvas�� High performance 2D surface for drawing anything you want.

�� Constant performance — everything is a pixel. Performance only degrades when the image resolution increases.

�� You can save the resulting image as a .png or .jpg.

�� Best suited for generating raster graphics (for example in games, fractals, etc.), editing of images, and operations requiring pixel-level manipulation.

SVG�� Resolution independence — this makes SVG better suited for cross-platform user interfaces because it allows scaling for any screen resolution.

�� SVG has very good support for animations. Elements can be animated using a declarative syntax, or via JavaScript.

�� You have full control over each element using the SVG DOM API in JavaScript.

�� SVG is an XML file format, which means that 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 *Access Rich Internet App.

Advantages

24 September 2012 6



24 September 2012 7

Comparison of Canvas and SVG*Scalable Vector Graphics

Canvas�� There are no DOM nodes for anything you draw. It is all pixels.

�� There's no API for animation. You have to resort to timers and other events to update the Canvas when needed.

�� 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 foraccessibility. For now, you can provide fallback content inside the canvas element that is displayedby 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�� Slow rendering when document complexity increases — anything that uses the DOM a lot will be slow.

�� SVG might not be suited by itself for applications like games.

Disadvantages


HTML5 Canvas & SVGThe Future of Graphics on the WebSVG 렌더링으로 제공하고 있는 애플의 홈페이지(http://www.apple.com/)제공속도의 문제

Comparison of Canvas and SVG

24 September 2012 8


HTML5 Canvas & SVGThe Future of Graphics on the WebVector vs. Pixel

Comparison of Canvas and SVG

CanvasSVG

24 September 2012 9



24 September 2012 10

Browser Support for HTML5 Element



24 September 2012 11http:/ /www.ro.me/ tech/http:/ /www.ro.me/ tech/http:/ /www.ro.me/ tech/http:/ /www.ro.me/ tech/


HTML5 Canvas & SVGThe Future of Graphics on the WebSVG Examples.

THE PLANETARIUM

24 September 2012 12https:/ /developer.mozilla.org/ko/ demos/ detail/ thehttps:/ /developer.mozilla.org/ko/ demos/ detail/ thehttps:/ /developer.mozilla.org/ko/ demos/ detail/ thehttps:/ /developer.mozilla.org/ko/ demos/ detail/ the---- planetarium/ launchplanetarium/ launchplanetarium/ launchplanetarium/ launch



Raphaël—JavaScript Library

24 September 2012 13http:/ / raphaeljs.com/http:/ / raphaeljs.com/http:/ / raphaeljs.com/http:/ / raphaeljs.com/



http://www.flickr.com/photos/loungerie/4109420324/24 September 2012 14


HTML5 Canvas & SVGThe Future of Graphics on the WebCanvas Examples.

Quake2 : HTML5의 Canvas와 Audio 및 LocalStorage , WebSocket, WebGL등의 기술을 이용해 GWT(Google Web Tookit)팀에서 퀘이크 2를HTML5로 포팅하여 에뮬레이션 함.

24 September 2012 15http:/ /www.youtube.com/watch?feature=player_embedded&v=XhMN0wlITLkhttp:/ /www.youtube.com/watch?feature=player_embedded&v=XhMN0wlITLkhttp:/ /www.youtube.com/watch?feature=player_embedded&v=XhMN0wlITLkhttp:/ /www.youtube.com/watch?feature=player_embedded&v=XhMN0wlITLk



Image Editor : HTML5 Canvas

24 September 2012 16http:/ / mudcu.be/sketchpad/http:/ / mudcu.be/sketchpad/http:/ / mudcu.be/sketchpad/http:/ / mudcu.be/sketchpad/



Game : Canvascape - "3D Walker"

24 September 2012 17http:/ /www.benjoffe.com/code/demos/canvascape/http:/ /www.benjoffe.com/code/demos/canvascape/http:/ /www.benjoffe.com/code/demos/canvascape/http:/ /www.benjoffe.com/code/demos/canvascape/



Game : pirateslovedaisies.com

24 September 2012 18http:/ /www.pirateslovedaisies.com/http:/ /www.pirateslovedaisies.com/http:/ /www.pirateslovedaisies.com/http:/ /www.pirateslovedaisies.com/



Coppercube Model Viewer demo – WebGL(WebGL 기반 자바스크립트 3D 엔진)

24 September 2012 19 http:/ /www.ambiera.com/ coppercube/webgldemos.htmlhttp:/ /www.ambiera.com/ coppercube/webgldemos.htmlhttp:/ /www.ambiera.com/ coppercube/webgldemos.htmlhttp:/ /www.ambiera.com/ coppercube/webgldemos.html




http:/ /paperjs.org/exampleshttp:/ /paperjs.org/exampleshttp:/ /paperjs.org/exampleshttp:/ /paperjs.org/examples

Paper.js

Canvas를 이용해서 vector graphic를 구현해주는 자바스크립트

http:/ / paperjs.org/http:/ / paperjs.org/http:/ / paperjs.org/http:/ / paperjs.org/


HTML5 Canvas & SVGThe Future of Graphics on the WebWhich 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.



HTML5 Canvas & SVGThe Future of Graphics on the WebFuture possibilities

• Geolocation API – Daum Roadview• eBook, App Book : Contents Business

- OS, Browser, Device Independent

• Education Service : Contents Business- Create a Drawing Application- Science experiments examples- Stock graph

• Browser Game- 다양한 플래시 게임의 제한적 대체

• Website Development- mobile 환경에서 고품질의 이미지를 이용한 수준 높은 웹사이트의 제작 가능- 콘텐츠 탑재에 대한 부담 경감

구분 개발 라이선스 크로스플랫폼 그래픽타입

SVG W3C 무료 가능 2D Vector

Canvas WHATWG 무료 가능 2D Raster

WebGL Khronos 무료 가능 3D24 September 2012 22

Media Chiefs Form Venture to E-Publish September 18, 2012 Two powerful entertainment moguls, Scott Rudin, the film and theater producer, and Barry Diller, the chairman of IAC/InterActiveCorp, are joining together to enter the turbulent world of book publishing.

http:/ /www.nytimes.com/2012/09/19/businhttp:/ /www.nytimes.com/2012/09/19/businhttp:/ /www.nytimes.com/2012/09/19/businhttp:/ /www.nytimes.com/2012/09/19/busin

ess/media/barryess/media/barryess/media/barryess/media/barry---- dillerdillerdillerdiller---- andandandand---- scottscottscottscott---- rudinrudinrudinrudin----

formformformform---- eeee---- bookbookbookbook---- publishingpublishingpublishingpublishing----venture.html?_r=1&smid=fbventure.html?_r=1&smid=fbventure.html?_r=1&smid=fbventure.html?_r=1&smid=fb---- shareshareshareshare




Fully Hardeware-Accelerated HTML5

Psychedilic Browsing :윈도우에선 IE9 프리뷰 버전이나 파이어폭스 4.0 beta4 GPU 가속지원우분투에선 파이어폭스 3.6.8 버전 지원




http:/ / ie.microsoft.com/ testdrive/Performhttp:/ / ie.microsoft.com/ testdrive/Performhttp:/ / ie.microsoft.com/ testdrive/Performhttp:/ / ie.microsoft.com/ testdrive/Performance/PsychedelicBrowsing/Default.htmlance/PsychedelicBrowsing/Default.htmlance/PsychedelicBrowsing/Default.htmlance/PsychedelicBrowsing/Default.html




Accelerated HTML5-DirectCanvas-AppMobi

http:/ /www.youtube.com/watch?v=zT_JLsx4NgE&feature=player_embedded# !http:/ /www.youtube.com/watch?v=zT_JLsx4NgE&feature=player_embedded# !http:/ /www.youtube.com/watch?v=zT_JLsx4NgE&feature=player_embedded# !http:/ /www.youtube.com/watch?v=zT_JLsx4NgE&feature=player_embedded# !


HTML5 Canvas & SVGThe Future of Graphics on the WebPerhaps the best choice would be a

Canvas + SVG + WebGL + etc. combination.

HTML5 Canvas Animation & Application

Summary.



HTML5 Canvas & SVGThe Future of Graphics on the WebInkscape

http://inkscape.org

Adobe IllustratorExport to SVGBTW: AI -> Canvas

http://visitmix.com/labs/ai2canvas

Microsoft VisioSave as SVGhttp://office.microsoft.com/visio

Some SVG Generation Tools



HTML5 Canvas & SVGThe Future of Graphics on the WebRaphaelJS

http://raphaeljs.com

Dojo Toolkithttp://dojotoolkit.org

Protovis Graphing libraryhttp://vis.stanford.edu/protovis

Some SVG Libraries

EaselJShttp://easeljs.com

A Canvas Library Example



HTML5 Canvas & SVGThe Future of Graphics on the Webhttp://ie.microsoft.com/testdrive/Performance/PsychedelicBrowsing/Default.htmlhttp://www.canvasdemos.com/top-100/http://blog.eonil.com/post/296http://www.khronos.org/webgl/wiki_1_15/index.php/Getting_a_WebGL_Implementationhttp://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/http://hudson.joshy.org:9001/job/canvas-book/ws/out/toc.htmlhttp://www.youtube.com/watch?v=lP0guzk1nS4&feature=relatedhttp://camanjs.com/examples/presetshttp://mbostock.github.com/protovis/ex/projection-full.htmlhttp://mbostock.github.com/protovis/https://developer.mozilla.org/ko/demos/tag/tech:svg?page=2&sort=createdhttp://www.carto.net/svg/samples/http://blog.entheosweb.com/ideas/awesome-html5-canvas-animations-applicationsBanksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpgBanksy “You have got to be kidding me” http://www.banksy.co.uk/Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/3d teapot model http://resumbrae.com/ub/dms423_f08/10/Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/Television Icon http://thenounproject.com/noun/television/#icon-No416Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/

Material Used – Best Practice





Thanks for [email protected] 010-2372-4436

Html5 canvas & svg 2012 dcc

Technology

Transcript of Html5 canvas & svg 2012 dcc