XML.com

XML.com
  Home | Resources | FAQs |
    
Essentials > SVG:: 1
  Resource Centers
SVG คืออะไร
 
DownLoad MSWord








SVG :: XML GRAPHICS

ภาษา HTML (Hypertext Markup Language) เป็นวิธีการมาตรฐานในการสร้างหน้าเอกสารให้อยู่ในรูปแบบข้อมูลหรือข้อความที่สามารถจัดเตรียมสำหรับผู้อ่านที่เข้าชม Web Site ต่าง ๆ บนเครือข่ายอินเตอร์เนตได้ แต่ภาษา HTML ที่ผนึกรวมไป HTTP (Hyper test Transport Protocol) นั้นได้รับการพัฒนาเฉพาะในส่วนการส่งและรับข้อมูลเท่านั้น และถูกออกแบบให้เป็นตัวหลักที่เน้นเฉพาะการแสดงผลของข้อมูล แต่ไม่ได้ถูกออกแบบให้มีความสามารถในการจัดโครงสร้างของการแสดงผล ทำให้เกิดปัญหาซึ่งนับได้ว่าเป็นข้อจำกัดของภาษา HTML ที่ว่า เมื่อมีการส่ง หรือแลกเปลี่ยนข้อมูลระหว่างกัน ผู้รับข้อมูลจะไม่สามารถรู้ได้เลยว่า Content คืออะไร หรือแปลความหมายไม่ออกว่าข้อมูลที่ได้รับนั้นหมายถึงอะไร ภาษา HTML สามารถทำได้เพียงเป็น Heading ธรรมดาเท่านั้น ดังนั้น ภาษา XML (Extensible Markup Language) จึงได้ถือกำเนิดขึ้นมาเพื่อเสริมในจุดนี้

ภาษา XML เป็นภาษา Markup ที่มีโครงสร้างของภาษาเป็นข้อความ (Text-based) ซึ่งจัดเตรียมให้มีความสามารถทางด้านโครงสร้าง และสารสนเทศที่ใช้นิยามให้กับข้อมูลหรือที่เรียกว่า Metadata (data about data) ซึ่งเป็นส่วนที่เพิ่มขึ้นสำหรับนิยามความหมาย และสภาพแวดล้อมให้กับแอพพลิเคชั่น และเป็นส่วนที่ใช้ในการบริหาร และจัดการสารสนเทศบนเว็บด้วยรูปลักษณ์แบบใหม่

ภาษา XML เป็นส่วนหนึ่งของภาษา SGML (Standard Generalized Markup Language) ซึ่งได้รับการพัฒนาให้มีประสิทธิภาพสูงสุดในการทำงานบนเว็บจนเป็นภาษาที่นิยมใช้กันโดยทั่วไป ดังนั้นจึงถือได้ว่าภาษา XML เป็นภาษาที่ทรงประสิทธิภาพอันจะเป็นมาตรฐานในการใช้งานร่วมกับภาษา HTML ที่สำคัญในอนาคต

จุดมุ่งหมายของภาษา XML คือมีความต้องการให้ผู้สร้างเอกสารทั้งหลายสามารถนำไปใช้งานได้ง่ายเหมือนกับที่มันถูกใช้งานได้อย่างง่ายดายโดยนักพัฒนาโปรแกรม เพราะว่าภาษา XML มีโครงสร้างภาษาเป็นข้อความ (Text-based) ดังนั้นมันจึงทำให้มีความสามารถอ่าน และทำงานได้โดยใช้วิธีเทคนิคง่าย ๆ และไม่ซับซ้อนเกินไป แต่มันก็มีความสามารถในการจัดการ, นิยาม และจัดทำโครงสร้างข้อมูลเหมือนกับที่มีใช้ในแอพพลิเคชั่น ที่ได้ใช้เทคนิคขั้นสูง ดังนั้นความสามารถพื้นฐานของภาษา XML จึงมีความสามารถสร้างโครงสร้างให้กับข้อมูล และสามารถจัดการและแสดงผลได้

นอกจากนี้แล้ว หนึ่งในจุดเด่นของเว็บคือ ความสามารถในการรวมภาพกราฟฟิกเข้าไปกับเอกสารข้อความเพื่อแสดงผลบนอินเตอร์เน็ต ในที่นี้เราจะกล่าวถึงความสามารถของภาษา XML ในการแสดงผลทางด้าน Graphic

การแสดงผลทางด้าน Graphic ของภาษา XML นั้นเป็นการแสดงผลข้อมูลแบบ Graphic เบื้องต้นที่เรียกว่า SVG (scalable Vector Graphic)

ภาษา SVG เป็นภาษาที่สามารถประมวลผลข้อมูลแบบ Graphic 2 มิติ ประกอบด้วย

- Vector Graphic Shape ซึ่งประกอบด้วยเส้นตรง (Straight Lines) และเส้นโค้ง (Curves)

- image

- Text

SVG ประกอบด้วย Basic shape elements ต่าง ๆ ดังนี้

- Rectangle

- Circles

- Ellipses

- Lines

- Polyline

- Polygons

The 'rect' element

<!ENTITY % rectExt "" >
<!ELEMENT rect (%descTitleMetadata;,(animate|set|animateMotion|animateColor|animateTransform
%geExt;%rectExt;)*) >
<!ATTLIST rect
%stdAttrs;
%testAttrs;
%langSpaceAttrs;
externalResourcesRequired %Boolean; #IMPLIED
class %ClassList; #IMPLIED
style %StyleSheet; #IMPLIED
%PresentationAttributes-Color;
%PresentationAttributes-FillStroke;
%PresentationAttributes-Graphics;
transform %TransformList; #IMPLIED
%graphicsElementEvents;
x %Coordinate; #IMPLIED
y %Coordinate; #IMPLIED
width %Length; #REQUIRED
height %Length; #REQUIRED
rx %Length; #IMPLIED
ry %Length; #IMPLIED >

Attribute definitions:
x = "<coordinate>"
x คือ จุดพิกัดบนแกน x ของด้านหนึ่งของสี่เหลี่ยมผืนผ้า
y = "<coordinate>"
y คือ จุดพิกัดบนแกน y ของด้านหนึ่งของสี่เหลี่ยมผืนผ้า
width = "<length>"
width คือ ความกว้างของสี่เหลี่ยมผืนผ้า
height = "<length>"
height คือ ความสูงของสี่เหลี่ยมผืนผ้า

rx = "<length>"
สำหรับสี่เหลี่ยมผืนผ้ามุมมน จุดพิกัดบนแกน x
ry = "<length>"
สำหรับสี่เหลี่ยมผืนผ้ามุมมน จุดพิกัดบนแกน y

Example rect01 แสดงรูปสี่เหลี่ยมผืนผ้า

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example rect01 - rectangle with sharp corners</desc>

<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>

<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>

View this example as SVG (ต้อง Down load SGV plugin)


 




 
Contact Us | Our Mission | Privacy Policy | Advertise With Us | Site Help
Copyright © 2002 Copy เค้ามาจาก www.xml.com จะได้ดูเหมือนๆกัน