SVG - Scalable Vector Graphics

A professional PDF Converter, PDF Writer, PDF Creator, PDF Editor, HTML Converter, Postscript Converter, AutoCAD DWG Converter, as well as PCL Converter, etc.

Submit a Ticket

SVG (Scalable Vector Graphics)

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics, both static and animated, and either declarative or scripted. Images can contain hyperlinks using outbound simple XLinks. It is an open standard created by the World Wide Web Consortium.

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.

Scripting and animation
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. An extreme example of this is a complete Tetris clone game implemented as an SVG object.

Compression
If storage space is an issue, SVG images (which are just text files) can be saved with gzip compression, in which case they may be called "SVGZ files". SVG files can also be compressed with any other compression algorithm, but those are not called SVGZ files. Because XML contains verbose text, it tends to compress very well and these files can be much smaller (often more than 50%) than the original.

Impact on the World Wide Web
The widespread adoption of SVG clients, particularly those natively embedded in web browsers (as it is in Firefox versions 1.5 and 2.0, Safari 3.0 (currently in beta release) and Opera, though the implementations are quite incomplete), may bring a significant new look-and-feel to the World Wide Web. A current trend is to build dynamic web sites that behave somewhat like desktop applications, utilizing JavaScript-driven Dynamic HTML, and in many cases, the Ajax technique to transfer data between the web server and users. SVG enhances the capabilities of Ajax, by providing a rich, graphical set of page elements, well beyond those specified by HTML/CSS. The SVG Terminal module for Firefox is an early example of this. SVG is also beginning to give rise to painting, drawing, and other web-based interactive applications.

Example

SVG is an application of XML. An SVG file is therefore a simple text file, which can be viewed and edited as with any other markup.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!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" 
     version="1.1" width="520" height="520">
  <style type="text/css"><![CDATA[
    text {
      font-size: 362px;
      font-weight: bold;
      font-family: "Times New Roman", serif;
    }
    #P0 {
      fill: #d4a000;
       stroke: #000;
       stroke-width:9;
    }
    #P1 { fill: url(#tl) }
    #P2 { fill: url(#bl) }
    #P3 { fill: url(#br) }
    #P4 { fill: url(#tr) }
  ]]></style>
 
  <defs>
    <linearGradient id="dk">
      <stop offset="0"/>
      <stop offset="1" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="lt">
      <stop offset="0" stop-color="#ffe681"/>
      <stop offset="1" stop-color="#ffe681" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="tl" x1="136.4" y1="136.4" x2="167.5" y2="167.5"
                    xlink:href="#lt" gradientUnits="userSpaceOnUse"/>
    <linearGradient id="bl" x1="136.4" y1="383.6" x2="167.5" y2="352.5"
                    xlink:href="#lt" gradientUnits="userSpaceOnUse"/>
    <linearGradient id="br" x1="383.6" y1="383.6" x2="352.5" y2="352.5"
                    xlink:href="#dk" gradientUnits="userSpaceOnUse"/>
    <linearGradient id="tr" x1="383.6" y1="136.4" x2="352.5" y2="167.5"
                    xlink:href="#dk" gradientUnits="userSpaceOnUse"/>
  </defs>
 
  <path id="P0" d="M260,6.3L 6.3,260L 260,513.7L 513.7,260L 260,6.3z"/>
  <text y="380" x="200">!</text>
  <path id="P1" d="M260,12.7L 260,75L 75,260L 12.7,260L 260,12.7z"/>
  <path id="P2" d="M260,507.3L 260,445L 75,260L 12.7,260L 260,507.3z"/>
  <path id="P3" d="M260,507.3L 260,445L 445,260L 507.3,260L 260,507.3z"/>
  <path id="P4" d="M260,12.7L 260,75L 445,260L 507.3,260L 260,12.7z"/>
</svg>

Home | Site Map | VeryPDF.com | VeryPCL.com | Contact | Blog

Copyright © 2002- VeryDOC.com Company. All Rights Reserved.