SVG-XML สุุดยอดการแสดงผลเว ็บกราฟ็ ก · the World Wide Web (1989) The World Wide Web Consortium (W3C) is an international consortium

SVG-XML SVG-XML สุดยอดการแสดงผลเวบ็กราฟกสุดยอดการแสดงผลเวบ็กราฟก

หวัขอการสัมมนาหวัขอการสัมมนา1. Introduction to SVG1. Introduction to SVG

วิวัฒนาการการแสดงผลบนเวบ็เพจวิวัฒนาการการแสดงผลบนเวบ็เพจการแสดงผล การแสดงผล SVG SVG บนเวบ็เพจบนเวบ็เพจเกีย่วกบั เกีย่วกบั SVG SVG

2. Flash and SVG comparison2. Flash and SVG comparison3. SVG application and examples3. SVG application and examples4. SVG for beginner4. SVG for beginner

SVG content SVG content Coordinates SystemCoordinates SystemDocument StructureDocument StructureBasic shapesBasic shapesTextTextAnimationAnimation

5. Summary and Introduction to SVG community web page5. Summary and Introduction to SVG community web page


Introduction to SVGIntroduction to SVG

นายมนตศักดิ์ โซเจรญิธรรมนายมนตศักดิ์ โซเจรญิธรรม

ฝายวิจัยและพัฒนาเทคโนโลยคีอมพิวเตอรเพื่อการคํานวณศูนยเทคโนโลยอีิเล็กทรอนิกสและคอมพิวเตอรแหงชาติสํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยแีหงชาติ

หวัขอการนาํเสนอ หวัขอการนาํเสนอ

● วิวัฒนาการการแสดงผลบนเว็บเพจวิวัฒนาการการแสดงผลบนเว็บเพจ● การแสดงผล การแสดงผล SVG SVG บนเว็บเพจบนเว็บเพจ● เกีย่วกบั เกีย่วกบั SVG SVG ● เปรียบเทียบความสามารถระหวางไฟล เปรียบเทียบความสามารถระหวางไฟล SWF (Flash) SWF (Flash) และ และ SVGSVG● ตอบขอซักถามตอบขอซักถาม

Tim Berners-Lee, W3C Director and inventor of the World Wide Web (1989)

The The World Wide Web ConsortiumWorld Wide Web Consortium (W3C) is an international consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C's mission is:together to develop Web standards. W3C's mission is:

To lead the World Wide Web to its full potential by developing To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.protocols and guidelines that ensure long-term growth for the Web.

ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > About W3CAbout W3C

W3C Develops Web Standards and GuidelinesW3C Develops Web Standards and Guidelines

แหลงขอมูลอางอิง: http://www.w3.org/Consortium/

ปจจุบนั ปจจุบนั W3C W3C มีสมาชกิกวา มีสมาชกิกวา 350 350 ราย เชน ราย เชน Adobe Systems Inc., Apple Computer, Inc. ,America Online, Inc. Adobe Systems Inc., Apple Computer, Inc. ,America Online, Inc.

(AOL) , Cisco Systems , IBM Corporation Macromedia ,Google, Inc. , (AOL) , Cisco Systems , IBM Corporation Macromedia ,Google, Inc. , Microsoft Corporation ,Nokia ,Oracle Corporation ,Yahoo!, Inc.,Sun Microsoft Corporation ,Nokia ,Oracle Corporation ,Yahoo!, Inc.,Sun Microsystems, Inc.Microsystems, Inc.

ตวัอยางมาตรฐานทีอ่อกโดยตวัอยางมาตรฐานทีอ่อกโดย W3CW3C- CSS (- CSS (Cascading Style SheetsCascading Style Sheets))- HTML (- HTML (HyperText Markup LanguageHyperText Markup Language))- DOM (Document Object Model)- DOM (Document Object Model)- HTTP (- HTTP (Hypertext Transfer Protocol)Hypertext Transfer Protocol)- PNG (Portable Network Graphics)- PNG (Portable Network Graphics)- XML (- XML (Extensible Markup LanguageExtensible Markup Language))- - Web ServicesWeb Services- SVG (Scalable Vector Graphics) - SVG (Scalable Vector Graphics)

แหลงขอมูลอางอิง: http://www.w3.org/Consortium/Prospectus/Joining

ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > About W3CAbout W3C (2) (2)

<HTML><HTML><HEAD><HEAD>

<TITLE> SVG <TITLE> SVG ทีร่กัทีร่กั... </TITLE>... </TITLE></HEAD></HEAD><BODY><BODY>

<CENTER><H2><CENTER><H2>เมือ่ไหรราคาน้ํามนัจะลดเมือ่ไหรราคาน้ํามนัจะลด</H2></CENTER></H2></CENTER></BODY></BODY>

</HTML></HTML>

ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > HTML (1)HTML (1)



<CENTER><H2><CENTER><H2>เมือ่ไหรราคาน้ํามนัจะลดเมือ่ไหรราคาน้ํามนัจะลด</H2></CENTER></H2></CENTER><TABLE BORDER='1'><TABLE BORDER='1'>

<TR align='center'><TR align='center'><TD><TD>ชื่อชื่อ</TD></TD><TD><TD>นามสกลุนามสกลุ</TD></TD>

</TR></TR><TR><TR>

<TD><TD>นายดีเซลนายดีเซล</TD></TD><TD><TD>ราคาถูกราคาถูก</TD></TD>

</TR></TR></TABLE></TABLE>

</BODY></BODY></HTML></HTML>





<TR align='center'><TR align='center'><TD><TD>ชื่อชื่อ</TD></TD><TD><TD>นามสกลุนามสกลุ</TD></TD>

</TR></TR><TR><TR>

<TD><TD>นายดีเซลนายดีเซล</TD></TD><TD><TD>ราคาถูกราคาถูก</TD></TD>

</TR></TR></TABLE></TABLE><BR><BR><IMG SRC="model_9.jpg" BORDER=2><IMG SRC="model_9.jpg" BORDER=2>




<TITLE> SVG <TITLE> SVG ที่รักที่รัก... </TITLE>... </TITLE><SCRIPT LANGUAGE="JavaScript"><SCRIPT LANGUAGE="JavaScript">

function Hello(){function Hello(){ alert('...I love SVG...')alert('...I love SVG...') }}</SCRIPT></SCRIPT>

</HEAD></HEAD><BODY><BODY>


<TR align='center'><TR align='center'><TD><TD>ชื่อชื่อ</TD><TD></TD><TD>นามสกุลนามสกุล</TD></TD>

</TR></TR><TR><TR>

<TD><TD>นายดีเซลนายดีเซล</TD><TD></TD><TD>ราคาถูกราคาถูก</TD></TD></TR></TR>

</TABLE></TABLE><BR><BR><IMG SRC="model_9.jpg" BORDER=2<IMG SRC="model_9.jpg" BORDER=2 onclick='Hello()'onclick='Hello()'>>


Example

ววิฒันาการการแสดงผลบนเวบ็เพจววิฒันาการการแสดงผลบนเวบ็เพจ > > HTML+JavaScriptHTML+JavaScript

การที่เว็บเบราเซอรจะเขาใจไฟล การที่เว็บเบราเซอรจะเขาใจไฟล SVG SVG ไดนั้นตองการไดนั้นตองการโปรแกรมเสริมชนิดหนึ่งที่เรียกวา โปรแกรมเสริมชนิดหนึ่งที่เรียกวา pluginplugin

เว็บเบราเซอร SVG Viewer

+

การแสดงผล การแสดงผล SVG SVG บนเวบ็เพจ บนเวบ็เพจ > > plugin SVGplugin SVG

Example

ในกรณขีอง ในกรณขีอง SVG SVG จะเรียกวา จะเรียกวา plugin plugin ดังกลาววา โปรแกรม ดังกลาววา โปรแกรม SVG Viewer SVG Viewer สามารถดาวนโหลดไดที่ สามารถดาวนโหลดไดที่ www.adobe.com/svg/installwww.adobe.com/svg/install

File: cir.svgFile: cir.svg

<svg width="500" height="500" viewBox="0 0 500 500"<svg width="500" height="500" viewBox="0 0 500 500" xmlns="xmlns="http://www.w3.org/2000/svghttp://www.w3.org/2000/svg" "

xmlns:xlink="http://www.w3.org/1999/xlink">xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="250" cy="250" r="100" fill="blue" /><circle cx="250" cy="250" r="100" fill="blue" /><rect x="0" y="0" width="500" height="500" fill="none" stroke="blue" <rect x="0" y="0" width="500" height="500" fill="none" stroke="blue" stroke-width="2" />stroke-width="2" />

</svg></svg>

การแสดงผล การแสดงผล SVG SVG บนเวบ็เพจ บนเวบ็เพจ > > file SVG (1)file SVG (1)


<TITLE> SVG <TITLE> SVG ที่รักที่รัก... </TITLE>... </TITLE></HEAD></HEAD><BODY><BODY>

<TABLE BORDER='1'><TABLE BORDER='1'><TR align='center'><TD><TR align='center'><TD>ชื่อชื่อ</TD><TD></TD><TD>นามสกลุนามสกลุ</TD></TR></TD></TR><TR><TD><TR><TD>นายดีเซลนายดีเซล</TD><TD></TD><TD>ราคาถกูราคาถกู</TD></TR></TD></TR>

</TABLE></TABLE><embed width="500" height="500" src="cir.svg" name="svgmap"<embed width="500" height="500" src="cir.svg" name="svgmap"

type="image/svg+xml">type="image/svg+xml"></BODY></BODY>

</HTML></HTML>

Example

การแสดงผล การแสดงผล SVG SVG บนเวบ็เพจ บนเวบ็เพจ > > file svg (2)file svg (2)

แหลงขอมูลเพิม่เตมิ: http://www.w3.org/Graphics/SVG/About

SVG ยอมาจาก Scalable Vector Graphics คือการนําเสนอขอมลูประเภทกราฟกดวยเวกเตอรทีป่รบัเปลี่ยนยอ ขยายไดโดยไมสูญเสียความคมชดั (Scalable)

เกี่ยวกับ เกี่ยวกับ SVG > SVG > ความหมายของ ความหมายของ SVGSVG

SVG สรางขึ้นโดยอาศัยเทคโนโลยีฐานหลายอยางทีป่ระสบความสําเรจ็แลว เชน - โครงสรางเอกสารแบบเดียวกบั XML เพื่อใชแทนขอมลูกราฟกประเภทเวกเตอร - อาศัย JPEG และ PNG สําหรบักรณตีองการแสดงผลขอมลูทีเ่ปนภาพ - DOM สําหรบัการทํางานควบคุม SVG ดวยภาษาสครปิตและความสามารถเชงิโตตอบ - CSS ใชเพื่อกําหนดรปูแบบในการแสดงผล - SMIL (Synchronized Multimedia Integration Language) สําหรบัการแสดงภาพเคลื่อนไหว

องคกร (บรษิัท) ทีร่วมพัฒนามาตรฐาน SVG เชน Adobe, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft, Nokia, Sharp and Sun Microsystems

SVG ประกอบดวย 2 สวน คือ 1. สวนของไฟลขอมลู ซึ่งเปน XML-based ใชแทนขอมลูกราฟก 2 มติิ 2. programming API สําหรบัการเขียนโปรแกรมดานกราฟก

Applications of SVG in industry● Mobile● Print● Web Applications● Design and Interchange● GIS and Mapping● Embedded Systems

เกี่ยวกับ เกี่ยวกับ SVG > SVG > Application of SVG (1)Application of SVG (1)

Mobile- ในป 2001 SVG ไดรบัเลือกจากกลุมอตุสาหกรรมโทรศัพทมอืถือใหเปนรปูแบบพื้นฐานทีจ่ะ

ใชนําเสนอขอมลูกราฟกบนโทรศัพทมอืถือ มาตรฐานดังกลาวเรยีกวา SVG Tiny and SVG Basic อางองิ: http://www.w3.org/TR/SVGMobile/ - 3rd Generation Partnership Project (3GPP, http://www.3gpp.org/) ไดกําหนดให SVG เปนรปูแบบขอมลูทีใ่ชนําเสนอขอมลูกราฟกสําหรบัโทรศัพทมอืถือในรุนหนาและรวมทัง้การนําเสนอ MMS ดวย อางองิ: http://www.3gpp.org/ftp/specs/html%2Dinfo/26140%2Dcrs.htm


Print- SVG รองรบัขอมลูกราฟกหลายรปูแบบและรองรบัตัวอกัษรไดหลายภาษา- SVG ไมมขีอจํากดัดานความละเอยีดของขอมลูกราฟก- กลุมบรษิัทดานงานพิมพไดรวมกนัพัฒนามาตรฐานทีเ่รยีกวา SVGPrint

อางองิ: http://www.w3.org/TR/SVGPrint/

Applications of SVG in industryApplications of SVG in industry

Web Applications- SVG รองรบัภาษาสครปิตบนเว็บเบราเซอรและ event ทําใหเว็บโปรแกรมเมอรสามารถสราง

แอพพลิเคชัน่ดานกราฟก รวมถึงสวนตอประสานกราฟกกบัผูใช (GUI) ได - SVG เปนมาตรฐานเปด ดังนั้นผูพัฒนาไมตองถูกผกูมดักบัเครือ่งมอืหรอืผูขายรายใดรายหนึ่งโดยเฉพาะ


GIS and Mapping- SVG อนุญาตใหปรบักําหนดคุณสมบตัิเพิ่มเติมใหเหมาะสมกบัขอมลูกราฟกทีม่คีวามหมาย

เชงิภูมศิาสตร เชน ทะเลสาป ถนน แมน้ํา ฯลฯ- โปรแกรมสามารถเขากระทําประมวลผลโดยเขาใจความหมายของกราฟกนั้นในเชิงภูมศิาสตร

ไดดวย- สามารถเชือ่มตอกบั GML ไดงาย

Design and Interchange - SVG นั้นเปน XML ดังนั้นจงึทําใหผูใชสามารถเพิ่มคําอธิบายขอมลู (Metadata) เขาไปภายในเอกสาร SVG ไดโดยไมทําใหการแสดงผลกราฟกเสียไป - โปรแกรมดานออกแบบกราฟกจํานวนมาก สนับสนุนการ import/export ดังนั้น SVG สามารถใชเปนรปูแบบกลางในการแลกเปลี่ยนขอมลูได

Embedded Systems- Embedded systems มทีรพัยากรนอย (CPU, RAM, Storage, etc.)

- ผูพัฒนาสามารถใชมาตรฐานของ SVG mobile มาพัฒนาสวนตอประสานกราฟกกบัผูใชสําหรบั Embedded systems ได


เปรยีบเทียบความสามารถระหวางไฟล เปรยีบเทียบความสามารถระหวางไฟล SWF (Flash) SWF (Flash) และ และ SVG (1)SVG (1)

- SWF (ออกเสียงวา “Swiff”) เปนไฟลรปูแบบหนึ่ง (เกบ็ในรปูแบบของ binary)ใชเผยแพรขอมลูเวกเตอรกราฟกและภาพเคลื่อนไหวผานเครอืขายอนิเทอรเน็ตไปยัง Macromedia Flash Player

- SWF ไมไดถูกออกแบบมาสําหรบัแลกเปลี่ยนระหวางโปรแกรมประเภท Graphics Editors แตเพื่อจดุประสงคการนําเสนองานกราฟกเปนหลัก

- ในขณะทํางานจะเปนไฟลรปูแบบ FLA ซึ่งสามารถปรบัปรงุแกไขได- Macromedia Flash เปนโปรแกรมทีใ่ชสําหรบัสราง ออกแบบ ตลอดจนเอือ้อํานวยการเขียน

Action Script เพื่อเพิ่มความสามารถในการโตตอบ- ทัง้ SWF, FLA และ Macromedia Flash MX ถูกออกแบบและเปนลิขสิทธิ์ของบรษิัท

Macromedia, Inc.

FLA

SWF

Macromedia Flash

- SVG เปนไฟลรปูแบบหนึ่งเชนกนั แตเปน text-based (XML)- สามารถใชงานไดทัง้แลกเปลี่ยนเพื่อการนําไปปรบัปรงุแกไข หรอืเพื่อการนําเสนอ- ผูออกแบบคือ W3C และเปนมาตรฐานเปดทีท่กุคนสามารถนําไปใชประโยชนไดโดยไมมเีงื่อนไข- เครือ่งมอืในการสรางและแกไข graphics ในรปูแบบของ SVG สามารถหาใชไดฟร ี(ลักษณะ

การใชงานคลาย Adobe Illustrator)- การทํางานในสวนโตตอบกบัผูใช บนเว็บเบราเซอรตองอาศัยการเขียนโปรแกรมเพิ่มเติม คือ

JavaScript หรอื Java- ในมมุมองของผูใชปลายทาง ไฟล SVG และ SWF ตางกส็ามารถรองรบัความตองการไดไม

แตกตางกนั- ในฐานะนักพัฒนา การใช SWF หรอื SVG ความยากงายขึ้นกบัความถนัดของแตละบคุคล- SVG เปนมาตรฐานเปด พัฒนาจากฐานของภาษา XML ดังนั้นผูทีเ่รยีนรู SVG จะเขาใจถึง

การทํางานของ DOM (Document Object Model) และ XML (Extensible Markup Language)ไปดวย ซึ่งความรูนี้สามารถนําไปประยุกตใชกบังานอืน่ๆอกีมากทีอ่าศัยความสามารถของภาษา XML เชน Web Services หรอื ภาษาอืน่ทีม่พีื้นฐานจาก XML

เปรยีบเทียบความสามารถระหวางไฟล เปรยีบเทียบความสามารถระหวางไฟล SWF (Flash) SWF (Flash) และ และ SVG (2)SVG (2)


บทสรุปบทสรุป

จบการนาํเสนอชวงแรกจบการนาํเสนอชวงแรก

ตอบขอซักถามตอบขอซักถาม

XML

SVG GraphicsDatabase

ConverterSoftware

Inkscape/Sodipodi

Server side programming

Animation Interactive Static graphic

JavaScript

DOM, Dynamic Attribute

สรปุ สรปุ (1)(1)

SVG community web page

Proprietary software

TextDatabase

FLA

SWF

GraphicsDatabase

Macromedia Flash

Server Side programming(PHP)

Animation/Video/Movie Interactive/GUI

Embedded Action Script

สรปุ สรปุ (2)(2)

TextDatabase

ควรใช ควรใช SVG SVG หรอื หรอื SWFSWF

- - เนคเทคนําเสนอ เนคเทคนําเสนอ SVG SVG เพื่อใหขอมูล และเสนอเปนเทคโนโลยีทางเลอืกหนึ่งเพื่อใหขอมูล และเสนอเปนเทคโนโลยีทางเลอืกหนึ่งเทานั้น เทานั้น

- - กระบวนการทาํงานในสวนอืน่ๆที่อยูบนฐานของ กระบวนการทาํงานในสวนอืน่ๆที่อยูบนฐานของ XML XML หากมกีารแสดงผลหากมกีารแสดงผลที่เปนกราฟก และใช ที่เปนกราฟก และใช SVG SVG ในการแสดงผล กจ็ะสามารถทาํไดโดยใชเครือ่งมือ ในการแสดงผล กจ็ะสามารถทาํไดโดยใชเครือ่งมือ (XML processing and editing tool) (XML processing and editing tool) ชุดเดมิชุดเดมิ

- - อยางไรกต็าม อยางไรกต็าม SVG SVG สอดคลองกบัเทคโนโลยี สอดคลองกบัเทคโนโลยี XML XML ซึง่จะเปนมาตรฐานกลางซึง่จะเปนมาตรฐานกลางในการแลกเปลีย่นและสงผานขอมูลในอนาคต ในการแลกเปลีย่นและสงผานขอมูลในอนาคต

- SVG - SVG จะเหมาะสมกบังานดานนั้นๆหรอืไม ผูใชหรอืผูพัฒนางานนั้นควรเปนจะเหมาะสมกบังานดานนั้นๆหรอืไม ผูใชหรอืผูพัฒนางานนั้นควรเปนผูตัดสินในขั้นสุดทายผูตัดสินในขั้นสุดทาย

- SVG - SVG ออกแบบโดย ออกแบบโดย W3CW3C

NECTEC building internet map (SVG)

NECTEC building internet map (SWF)

SVG Training CourseSVG Training Course

หัวขอที่จะมกีารอบรม (ราง) - โครงสรางของไฟล SVG - การแปลงขอมลูแผนทีเ่ปนไฟล SVG และเรยีกใชผานอนิเทอรเน็ต - การเขียนโปรแกรมภาษา JavaScript เขาควบคุมการแสดงผล SVG แบบ Interactive - การแสดงขอมลูอรรถาธิบายรวมกบั SVG แบบ Interactive โดยดึงจากฐานขอมลู - การใช SVG Authoring Tool เบือ้งตน

ความรูพืน้ฐานที่จาํเปนตองมกีอนเขาอบรม - มคีวามรูภาษา JavaScript อยางดี - มคีวามรูเรือ่งภาษา HTML และ XML เบือ้งตน - มคีวามรูภาษา Perl หรอื PHP หรอื ASP - เขาใจการทํางานของภาษา SQL และมคีวามรูเรือ่งฐานขอมลู - เขาใจการทํางานของโปรแกรมประเภท Web Server

ระยะเวลาการอบรม 3 วัน

คําถามคําถาม

ตอบขอซักถามตอบขอซักถาม

Documents

SVG-XML สุุดยอดการแสดงผลเว ็บกราฟ็ ก · the World Wide Web (1989) The World Wide Web Consortium (W3C) is an international consortium