Introduction to SVG

Prepared by K.M.SO

Department of Computer Science ver. 2 last update: June 2004

Introduction

 What is SVG  Advantage and disadvantage of using SVG  Graphics systems  XML basic  What environments can view SVG  Installing the Adobe SVG viewer  SVG syntax, structure and rendering order

What is SVG ?

 SVG stands for S calable V ector G raphics  SVG is a language for describing 2D vector and mixed vector/raster graphics in XML.

 SVG drawings can be dynamic and interactive  vector graphics animation via scripting

SVG background

 An open standard developed by W3C organization.

 SVG specification is available in: http://www.w3.org/TR/2000/CR-SVG-20001102/  first drafted by W3C since Nov1999 – lack of supporting applications until June 2000, Adobe released plugins for both IE and Netscape  Current status: Candidate Recommendation meaning that the specification is maturing and is now ready for more widespread implementation testing.

 Supported by Sun, Adobe and IBM.

 Plug-in is required.

Motivation for SVG

       Text based language.

Simple to program.

Takes advantage of existing tools - XML, CSS, XSL.

Powerful graphics capabilities - high performace, full animation support.

Open standard.

Extendable - MathML for instance.

Searchable.

SVG is Scalable (1)

   In terms of graphics scalable means not being limited to single, fixed units.

In terms of Web scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word

SVG is Scalable (2)

 SVG graphics is scalable to different display resolutions and color spaces.

 The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages.

 SVG graphics can be magnified to see fine detail, or to aid those with low vision.

SVG is Vector Graphics

    Uses of the power of transformations, coordinate systems, units and vector-based shapes.

Rendering is done on the client side - using local processing power.

represented in text formats.

Can include Bitmap images

Bitmapped Graphics

    Bitmapped images are widely used over the Internet: attached to HTML documents using tag. Main formats: GIF, JPEG, BMP.

Represented in Binary format.

Image processing is done on server side and image is transferred as is to client.

Vectors vs Bitmaps(1)

    Size : Vectors cost much less to represent than bitmaps. Example: a diagonal blue line on 640X480 window costs ~3000 bytes with a Bitmap. Same line using Vector Graphics ~20 bytes.

Bitmaps have problems with resolution and colors when viewed and printed on different kinds of screens and printers at different sizes. Transformations can be applied on vectors to solve this problem.

Vectors vs Bitmaps(2)

   Format representation - Bitmaps are binary files, vector based graphics can be represented as text files. Drawing instruction include text, and so are selectable and searchable. Links can be created to any part of a vector based image.

Flexibility - Vectors are much more flexibly to changes (transformations and different text styles).

Vectors vs Bitmaps(3)

 Animation is much simpler using vectors.

  Accessibility to editing - easier to edit quickly a textual file than a binary file.

Interactivity – the ease of using scripts allows very good interactivity.

Vectors vs Bitmaps(4)

PNG SVG

Vector Graphics Formats

   SVF Simple Vector Format. Plug-in for CAD drawing representation - 1996. No more development after 1997. Limited, no animation. http://www.softsource.com/svf DWF Drawing Web Format. Plug-in can be used with Javascript - but with no animation enabled. http://www.autodesk.com/whip/ Flash Marcomedia’s Vector Graphics Format. The most up to date. Supports full multimedia features. Occupies about 70% of the market. http://www.macromedia.com/software/flash

Vector Graphics Formats(2)

   VML Vector Markup Language - based 2D vector format by Microsoft - not developed after 1998. Limited to one single platform - Microsoft.

http://www.w3.org/TR/NOTE-VML WebCGM computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings. http://www.w3.org/Graphics/WebCGM VRML Virtual Reality Modeling Language devoted to 3D, supports 2D as well - complicated for simple presentations. Http://www.web3d.org

Other Vector Graphics Tools

  2D APIs combined with ActiveX Microsoft platforms.

limited to Java2D binary program with graphical 2D output inserted in web pages as applet - platform independent, but requires more than basic scripting programming skills.

SVG is XML

 SVG is defined by XML  a new way to put images on Web pages  SVG conforms to a certain structure defined by XML and the SVG DTD

Markup Languages based on XML

 XML is a meta-language – A language for creating other languages.

 Markup Languages that have been created using XML – MathML – Chemical Markup Language (CML) – Scalable Vector Graphics (SVG) – Wireless Markup Language (WML) – Geography Markup Language (GML) – Synchronized Multimedia Integration Language (SMIL) – ...

What is XML?

    XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to describe data XML tags are not predefined in XML. You must define your own tags

XML Document

 XML declaration – Defines the XML version (=1.0) and the character encoding used in the document  Root element – One and only one Root element  Child element of the Root – Inside the Root element

XML Document

 All XML elements must have a closing tag (except the declaration, which is not part of XML)  Tags are Case sensitive  Elements must be properly nested  Attribute values must be always be quoted   White Space is Preserved Comments in XML

– This is a comment -->

XML Elements have Relationships

 Elements are related as parents and children  Elements can have different content types – Element content – Mixed content – Simple content – Empty content – Attributes (name/value pairs)

Element Naming

 XML elements follow these naming rules: – Names can contain letters, numbers, and other characters – Names must not start with a number or punctuation character – Names must not start with the letters xml (or XML or Xml ..) – Names cannot contain spaces – Avoid “-” and “.” in names – “:” should not be used in element names, it is reserved for Namespaces

Parsed Data & CDATA

 All text in an XML document will be parsed by the parser  Only text inside a CDATA section is ignored by the parser  Escape Characters – Illegal XML characters have to be replaced by entity references – Entity references always start with the “&” and end with “;” character

“

Well Formed ” and “Valid” XML

  A “Well Formed” XML document has correct XML syntax (properly nested, must have closing tags and etc ….) A “Valid” XML document is a “Well Formed ” XML document which conforms to the rules of a Document Type Definition (DTD)  Any errors will stop you.

Well formed vs Valid SVG (1)

  Well formed SVG document:

').appendTo(ul); if (item = data[item], item.children) { li.append('') __draw_directory(item.children, li, item.id); } else { li.append(''); } var a = $('> a', li).addClass('item').text(item.name) .append($('')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); });