#1
|
|||
|
|||
SVG Tutorial
SVG stands for Scalable Vector Graphics.
SVG defines graphics in XML format. In our SVG tutorial you will learn about SVG. SVG is a language for describing 2D-graphics and graphical applications in XML. What you should already know Before you continue, you should have some basic understanding of the following:
What is SVG?
Sun Microsystems, Adobe, Apple, IBM, and Kodak are some of the organizations that have been involved in defining SVG. Advantages of using SVG over other image formats (like JPEG and GIF) are:
The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash relies on proprietary technology that is not open source. Look at a directory of SVG enabled software and services. Viewing SVG Files All browsers support SVG files nowadays, except for Internet Explorer, which needs a plug-in. Those are available for free, as for example the Adobe SVG Viewer. |
#2
|
|||
|
|||
SVG Example
SVG is written in XML.
SVG Example The following example is an example of a simple SVG file. SVG files must be saved with an .svg extension: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg"> (To view the SVG source, open the example and right-click in the example window. Select "View Source".) Code explanation: The first line contains the XML declaration. Notice the standalone attribute! This attribute specifies whether the SVG file "stands alone", or contains a reference to an external file. standalone="no" means that the SVG document has a reference to an external file - in this case, the DTD. The second and the third line refer to the external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". The DTD resides at the W3C and it contains all allowable SVG elements. The SVG code begins with the tag closes the root SVG element and the document. Note: All opening tags must have closing tags! |
#3
|
|||
|
|||
SVG In HTML Pages
SVG files can be embedded into HTML documents with the
|
#4
|
|||
|
|||
SVG <rect>
SVG has some predefined shape elements that can be used and manipulated by developers.
SVG Shapes SVG has some predefined shape elements that can be used and manipulated by developers:
The The To understand how this works, copy the following code into Notepad and save the file as "rect1.svg". Place the file in your Web directory: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> stroke:rgb(0,0,0)"/> Code explanation:
Let's look at another example that contains some new attributes: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> fill-opacity:0.1;stroke-opacity:0.9"/> Code explanation:
Define the opacity for the whole element: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> opacity:0.9"/> Code explanation:
Last example, create a rectangle with rounded corners: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> stroke-width:5;opacity:0.5"/> Code explanation:
|
#5
|
|||
|
|||
SVG <circle>
The
The The Copy the following code into Notepad and save the file as "circle1.svg". Place the file in your Web directory: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> Code explanation:
|