First introduced as a public draft in 1999 and as a recommendation (SVG 1.0) in 2001 by the World Wide Web Consortium, the Scalable Vector Graphics (SVG) serve an important role for presenting graphics on the Web as well as in offline and mobile devices. Short for Scalable Vector Graphics, a vector graphics file format that enables two-dimensional images to be displayed in XML pages on the Web. Vector images are created through text-based commands formatted to comply with XML specifications. In contrast to JPEG and GIF images on the Web, which are bitmapped and always remain a specified size, SVG images are scalable to the size of the viewing window and will adjust in size and resolution according to the window in which it is displayed. the current version is 1.1.
SVG graphics can include geometric forms such as lines, points, polygons, curves, circles--as well as text and embedded digital images. These graphics can be displayed, transformed, shaded, textured, animated, and made interactive. SVG is an open standard, which means that its specification is publicly available (at W3C) and many SVG freeware and commercial software tools are available from a wide variety of developers and vendors.
SVG graphics are vector graphics defining shapes such as points, lines, curves, and polygons. This is in contrast to raster graphics, such as those used in a digital photograph, which are based on a large set of individual pixels. SVG graphics are represented in data files that are plain text which is readable by humans and easily edited using a simple text editor.
Below is the list The SVG 1.1 specification defines 14 important functional areas or feature sets.
| SVG Features | Functionalities |
| Path | Clipping path, and coordinates. |
| Basic Shapes | Straight line path, polygons, circles and ellipses. |
| Text | Unicode character text included in an SVG file is expressed as XML character data. |
| Painting | SVG shapes can be filled and/or outlined (painted with a colour, a gradient or a pattern). Also Fills can be opaque or have various degrees of transparency |
| Colour | Colours can be applied to all visible SVG elements, either directly or via the 'fill', 'stroke' and other properties. Also hexadecimal value, RGB decimal and RGB in percentage. |
| Gradients and Patterns | Opacity gradients, Colour gradients can be linear or radial (circular). |
| Clipping, Masking and Compositing | Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both 'inside' and 'outside' regions that can be painted (with colors, gradients and patterns) independently. |
| Filter Effect | Filter effects are defined by filter elements in other word s To apply a filter effect to a graphics element or a container element the 'filter' property is set on a given element. |
| Interactivity | Hyper linking and event handling |
| Linking | Hyper linking , SVG images can contain hyperlinks to other documents, using XLink. |
| Scripting | All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. Scripting language are ECMAScript and JavaScript which are closely related. |
| Animation | SVG content can be animated using the built-in animation elements such as <animate>, <animateMotion> and <animateColor> and the usage of SMIL which stands for Synchronized Multimedia Integration Language. |
| Fonts | As with HTML and CSS, text in SVG may reference external font files, such as system fonts |
| Metadata | Metadata properties includes images creating and description |
The code below is a simple example to demonstrate the SVG graphics.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="526" height="233">
<rect x="13" y="14" width="500" height="200" rx="50" ry="100"
fill="none" stroke="blue" stroke-width="10" />
</svg>
Output Results
Figure: 1.0
Seeing that I have specified the code above it is a simple XML documents with declared in the namespace and then coordinates of the graphic is defined. In this case, a round circle with blue fills around it.
Reference: SVG -Scalable Vector Graphics (2010)[Online] Viewed At: http://www.w3.org/TR/SVG/[Accessed 24-12--2010]
No comments:
Post a Comment