INTRODUCTION TO WEB GRAPHICS AND DESIGN
INTRODUCTION · SYLLABUS · TUTORIALS · CLASSLIST
SVG
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics, both static and animated. It is an open standard created by the World Wide Web Consortium, which is also responsible for standards like HTML and XHTML.
SVG allows three types of graphic objects:
- vector graphic shapes (e.g. paths consisting of straight lines and curves, and areas bounded by them)
- raster graphics images / digital images
- text
Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. Text can be in any XML namespace suitable to the application, which enhances searchability and accessibility of the SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility.
SVG drawings can be dynamic and interactive. The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows straightforward and efficient vector graphics animation via ECMAScript or SMIL. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on SVG elements and other XML elements from different namespaces simultaneously within the same web page.
If storage space is an issue, SVG images are sometimes saved with gzip compression, in which case they may be called "SVGZ files". Because XML contains a lot of redundant data, XML tends to compress very well and these files can be much smaller. Often however the original vector-file (SVG) is already smaller than the rasterized version