Tweet
First of all, SVG (Scalable Vector Graphics) is awesome:
For example:
renders as:
Previously this kind of functionality was only available with a viewer, like Adobe's, which limited adoption.
Firefox and upcoming Gecko 1.8-based browsers will support it natively.
Hooray for the future of web graphics.
SVG allows three types of graphic objects:
1. vector graphic shapes (e.g. paths consisting of straight lines and curves, and areas bounded by them)
2. raster graphics images / digital images
3. 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.
1. vector graphic shapes (e.g. paths consisting of straight lines and curves, and areas bounded by them)
2. raster graphics images / digital images
3. 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.
SVG is to graphics what XHTML is to text, MathML is to mathematical equations and CML is to the description of chemical molecules.
SVG is similar in scope to Macromedia's proprietary Flash technology: among other things it offers anti-aliased rendering, pattern and gradient fills, sophisticated filter-effects, clipping to arbitrary paths, text and animations. What distinguishes SVG from Flash, is that it is a W3 recommendation (i.e. a standard for all intents and purposes) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.
SVG is similar in scope to Macromedia's proprietary Flash technology: among other things it offers anti-aliased rendering, pattern and gradient fills, sophisticated filter-effects, clipping to arbitrary paths, text and animations. What distinguishes SVG from Flash, is that it is a W3 recommendation (i.e. a standard for all intents and purposes) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.
For example:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="6cm" cy="2cm" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" fill="green"
transform="translate(-70,150)"/>
</g>
</svg>
Previously this kind of functionality was only available with a viewer, like Adobe's, which limited adoption.
Firefox and upcoming Gecko 1.8-based browsers will support it natively.
Hooray for the future of web graphics.
I was gonna write a smug reply about how Opera already supported it, but Opera crashes everytime it tries to load SVG... It looks like 8.01 will fix that though.
Comment