Contenu connexe
Similaire à 웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽 (20)
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
- 2. (Developer)
@jongkwang
!"#$%&
*+,-!
kim@jongkwang.com
'''
('%((!) okjsp.pe.kr/m
okjsp.pe.kr/html5
!"#$%&'$(')**$+%$#"+) ,
-$.)*/(#)0$1%$2&3/*$4+'*
jongkwang.com
t.melon.com
Sencha Touch ( )
- 3. Index
SVG
Raphael
Raphael nScreen
Raphael
!
- 8. SVG
S calable Vector Graphics
- 9. SVG SVG
S calable Vector Graphics
- 10. Scalable Vector Graphics
from Wikipedia
SVG(Scalable Vector Graphics) 2 XML
, 1999 W3C(World Wide Web Consortium)
. SVG XML · ·
. SVG
.
SVG SVG .
XML .
SVG
. SVG
,
, SVG Web .
- 11. Scalable Vector Graphics
from Wikipedia
SVG(Scalable Vector Graphics) 2 XML
, 1999 W3C(World Wide Web Consortium)
. SVG XML · ·
. SVG
.
SVG SVG .
XML .
SVG
. SVG
,
, SVG Web . !!
- 12. Scalable Vector Graphics
from Wikipedia
SVG(Scalable Vector Graphics) 2 XML
, 1999 W3C(World Wide Web Consortium)
. SVG XML · ·
. SVG
.
SVG SVG .
XML .
SVG
. SVG
,
, SVG Web .
- 13. Scalable Vector Graphics
from Wikipedia
SVG(Scalable Vector Graphics) 2
2 XML
XML
!
, 1999 W3C(World Wide Web Consortium)
. SVG W3C XML · ·
. SVG
.
SVG SVG .
XML .
SVG
. IE SVG
,
, SVG Web .
- 14. Scalable Vector Graphics
from Wikipedia
SVG(Scalable Vector Graphics) 2
2 XML
XML
!
, 1999 W3C(World Wide Web Consortium)
. SVG W3C XML · ·
. SVG
.
SVG SVG .
XML .
SVG
. IE SVG
,
, SVG Web .
.
- 17. SVG SVG History
PGML
VML
SVG
Canvas
WebGL
- 18. SVG SVG History
PGML 1998
Vector VML
SVG 2001
Canvas 2006~
Pixel
WebGL
- 19. SVG SVG History
VML PGML
S nvas
WaVG L
C ebG
- 20. SVG SVG History
VML PGML
3C 1998
Microsoft W Adobe
Macromedia IBM
Autodesk Sun
HP Netscape
S nvas
WaVG L
C ebG
- 21. SVG SVG History
VML PGML
3C 1998
Microsoft W Adobe
Macromedia IBM
Autodesk Sun
HP Netscape
SVG
WanvaL
C ebG s
- 22. SVG SVG History
VML PGML
3C 1998
Microsoft W Adobe
Macromedia IBM
Autodesk Sun
HP Netscape
3C 2001
W
SVG
WanvaL
C ebG s
- 23. SVG SVG History
PGML
3C 1998
Microsoft W Adobe
Macromedia IBM
Autodesk Sun
HP Netscape
IE 6, 7, 8 SVG
VML
WanvaL
C ebG s
- 24. SVG SVG History
PGML
3C 1998
Microsoft W Adobe
Macromedia IBM
Autodesk Sun
HP Netscape
3C 2001
W
IE 6, 7, 8 SVG
VML
WanvaL
C ebG s
- 25. SVG Vector
VML PGML
SVG
WanvaL
C ebG s
- 26. SVG Vector
VML PGML
SVG
WanvaL
C ebG s
- 27. SVG Vector
VML PGML
SVG
WanvaL
C ebG s
- 28. SVG Vector
VML PGML
SVG
WanvaL
C ebG s
- 29. SVG Vector
VML PGML
SVG
+
=
WanvaL
C ebG s
- 30. SVG Canvas
PML L
V GGM
SV
Canvas
WebGL
- 31. SVG Canvas
PML L
V GGM
SV
Canvas
WebGL
- 32. SVG Canvas
PML L
V GGM
SV
Canvas
WebGL
- 33. SVG
SVG VML
FireFox IE 6~8
Opera
Chrome
Safari
IE 9
WanvaL
PebM s
C GG
- 34. SVG
SVG VML
FireFox IE 6~8
- Google Chrome Frame
Opera - Renesis Player for IE
- Ssrc SVG Plugin
Chrome - Adobe SVG Viewer
- Corel SVG Viewer
Safari - Ample SDK
- Raphaël
IE 9 lug-In
P
WanvaL
PebM s
C GG
- 35. SVG SVG
SVG
FireFox
Opera
Chrome
Safari
IE 9
WVMLL
Panvas
C ebM
GG
- 38. Raphael Raphael
Raphaël
SVG VML
- 39. Raphael Raphael
Raphaël
SVG VML
- 40. Raphael Raphael
Raphaël
JavaScript
SVG VML
- 41. Raphael Raphael
Raphaël
FireFox 3.0+
Opera 9.5+
Chrome 5.0+
Safari 3.0+
- 42. Raphael Raphael
Raphaël
FireFox 3.0+
Opera 9.5+
Chrome 5.0+
Safari 3.0+
IE 6+
IE6
!
- 43. Raphael
Raphaël
Open Source JavaScript Libraries
- Dojo ToolKit
- Ext JS
- jQuery
- Mootools
- Raphael
- 44. Raphael
Raphaël
Open Source JavaScript Libraries
- Dojo ToolKit
- Ext JS
- jQuery
- Mootools
- Raphael
ar y 3 000
cript Libr
J avaS
Li brar y
- 71. <html xmlns:v="urn:schemas-microsoft-com:vml">
<body>
<v:oval style="position: absolute; left: 0; top: 0;
width: 100px; height: 50px;
behavior: url(#default#VML);"
fillcolor="blue" stroked="false">
</v:oval>
</body>
</html>
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100"
height="50">
<ellipse cx="50" cy="25" rx="50" ry="25" style="fill:
blue;" />
</svg>
- 72. <html xmlns:v="urn:schemas-microsoft-com:vml">
<body>
<v:oval style="position: absolute; left: 0; top: 0;
width: 100px; height: 50px;
behavior: url(#default#VML);"
fillcolor="blue" stroked="false">
</v:oval>
</body>
</html>
SVG
/
el js.com
http://rapha tml <?xml version="1.0"?>
reference.h <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100"
height="50">
<ellipse cx="50" cy="25" rx="50" ry="25" style="fill:
blue;" />
</svg>
VML
- 75. /
ae ljs.com
http ://raph .html
ce
r eferen
- 78. Replace FLASH ?
r y Baran ovskiy)
r. (from Dmit
l is not F lash kille
Raphae
- 79. Replace FLASH ?
r y Baran ovskiy)
r. (from Dmit
l is not F lash kille
Raphae
imator ir
n dobe A
Se ncha A A
- 83. Chart
k Times
ew Yor
The N
- 86. Chart
st
ton Po
Washing
- 99. Path String
M4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998z
M18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.
863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.
415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.97
9-4.776C20.788,14.136,20.027,12.439,18.806,11.219z
M21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,
3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451
,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.
24,22.912,10.732,21.101,8.925z
M23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.
009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.4
15c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251
C27.115,12.389,25.647,9.111,23.28,6.746z
- 100. Path String
M4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998z
M18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.
863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.
415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.97
9-4.776C20.788,14.136,20.027,12.439,18.806,11.219z
M21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,
3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451
,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.
24,22.912,10.732,21.101,8.925z
M23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.
009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.4
15c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251
C27.115,12.389,25.647,9.111,23.28,6.746z
?!
- 101. Path String
M4.998,12.127v7.896h4.495l6.729,5.526l0.004-18.948l-6.73,5.526H4.998z
M18.806,11.219c-0.393-0.389-1.024-0.389-1.415,0.002c-0.39,0.391-0.39,1.024,0.002,1.416v-0.002c0.
863,0.864,1.395,2.049,1.395,3.366c0,1.316-0.531,2.497-1.393,3.361c-0.394,0.389-0.394,1.022-0.002,1.
415c0.195,0.195,0.451,0.293,0.707,0.293c0.257,0,0.513-0.098,0.708-0.293c1.222-1.22,1.98-2.915,1.97
9-4.776C20.788,14.136,20.027,12.439,18.806,11.219z
M21.101,8.925c-0.393-0.391-1.024-0.391-1.413,0c-0.392,0.391-0.392,1.025,0,1.414c1.45,1.451,2.344,
3.447,2.344,5.661c0,2.212-0.894,4.207-2.342,5.659c-0.392,0.39-0.392,1.023,0,1.414c0.195,0.195,0.451
,0.293,0.708,0.293c0.256,0,0.512-0.098,0.707-0.293c1.808-1.809,2.929-4.315,2.927-7.073C24.033,13.
24,22.912,10.732,21.101,8.925z
M23.28,6.746c-0.393-0.391-1.025-0.389-1.414,0.002c-0.391,0.389-0.391,1.023,0.002,1.413h-0.002c2.
009,2.009,3.248,4.773,3.248,7.839c0,3.063-1.239,5.828-3.246,7.838c-0.391,0.39-0.391,1.023,0.002,1.4
15c0.194,0.194,0.45,0.291,0.706,0.291s0.513-0.098,0.708-0.293c2.363-2.366,3.831-5.643,3.829-9.251
C27.115,12.389,25.647,9.111,23.28,6.746z
?! ^^
- 111. g Raphaël
aeljs.com
g,raph
JavaScript library
Based on Raphael graphic library
FireFox 3.0+
Opera 9.5+
Chrome 5.0+
Safari 3.0+
IE 6+
- 118. Summary
Raphael .
JavaScript Library. Free !!
SVG + VML .
IE 6,7,8 . .
- 119. Summary
Raphael .
JavaScript Library. Free !!
SVG + VML .
IE 6,7,8 . .
to n Post
Washing
JavaScript
SVG VML