제1장. SVG 소개

관련 사이트 및 예제

• SVG Homepage ( http://www.w3.org/Graphics/SVG/ )
  • SVG 1.0 spec (2001.9, http://www.w3.org/TR/SVG/ )
  • SVG 1.1 spec (2003.1, http://www.w3.org/TR/SVG11/ )
  • SVG 1.2 spec (2004.5, Working Draft, http://www.w3.org/TR/SVG12/ )
  • SVG Mobile profile (2003.1, http://www.w3.org/TR/SVGMobile/ )
• Adobe's SVG Zone ( http://www.adobe.com/svg/ )
  • Demo : 7가지 다양한 예제 ( http://www.adobe.com/svg/demos/main.html )
  • Download SVG Viewer ( http://www.adobe.com/svg/viewer/install/main.html )
• DBxGeomatics 사 Mapping/Cartography ( http://www.dbxgeomatics.com/svg.asp )
  • Introduction ( http://www.dbxgeomatics.com/SVG-Intro.asp )
  • Tutorial Demo Program ( http://www.dbxgeomatics.com/SVG-Demo.asp )
• SVG Tutorial
  • KELINDEV 사 ( http://www.kevlindev.com/tutorials/index.htm )
• 기타 예제 사이트
  • http://www.taedium.com/svg/
  • http://www.pinkjuice.com/svg/

SVG 란? : Scalable Vector Graphics & XML based

• Raster Graphics (GIF, JPEG, PNG) vs. Vector Graphics (*Flash)
  • 참고 도서 : 컴퓨터 그래픽스 배움터 3.4-3.5절 ( 생능출판사 )
• XML-based on Web :
  • Open Standard, Interoperability
  • XML(CML, MathML, SMIL, XSL, XLink, XForm), HTML, Javascript, CSS 와 호환

특징 (Adobe 사이트의 설명)

• Interactive Graphics
• user interface with web script programs : Javascript, Java, Visual Basic
• Demo example: Interactive Chart & Graph, Drawing Application
• Data-Driven Graphics
  • back-end linking : e-commerce system, database, GIS, real-time information
  • Demo example: Theater reservation
• Personalized Graphics
  • customized : dynamic generation from user interaction or database
  • Demo example: Reflection (font, style, filters)

History

• W3C
  • PNG(Portable Network Graphics), WebCGM(Computer Graphics Metafile)
• Other Vector Graphics
  • PGML(Precision Graphics Markup Language): Adobe, Sun, Netscape
  • VML(Vector Markup Language): Macromedia, Microsoft
• W3C : 1998 SVG Working Group
  • 2001.9 : SVG 1.0 spec
  • 2003.1 : SVG 1.1 spec
  • 2003.1 : Mobile SVG Profiles (SVG Tiny and SVG Basic)
  • 2003.7 : SVG Print (Working Draft 15)
  • 2004.5 : SVG 1.2 spec (Working Draft 10)

SVG의 활용

• 지도, GIS
• 전자책, 문서출판
• 애니메이션, 광고
• 기타 : 전자상거래, 교육

  => 모바일 기기의 2D 그래픽 및 애니메이션

Course Target

• create SVG file from vector data
• manipulate interactive SVG document (DOM) using Javascript
• transform XML data to SVG