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:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
|
View example (only for SVG-enabled
browsers)
(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 <svg> element, which consists of the
opening <svg> tag and the closing </svg> tag. This is the root element.
The width and height attributes set the width and height of the SVG document.
The version attribute defines the SVG version to be used and the xmlns attribute
defines the SVG namespace.
The SVG <circle> element is used to create a circle. The cx and cy attributes
define the x and y coordinates of the center of the circle. If cx and cy are
omitted, the circle's center is set to (0, 0). The r attribute defines the
radius of the circle.
The stroke and stroke-width attributes
control how the outline of a shape appears. We set the outline of the circle to
a 2px wide, black "border".
The fill
attribute refers to the color inside a shape. We set the fill color to
red.
The closing </svg> tag closes the root SVG element and the document.
Note: All opening tags must have closing tags!
 |
 |
 |
 |
|
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
 |
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
 |
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Utilize the extensive out-of-the box features or customize your site through Ektron CMS400.NET's open architecture |
 |
Promote collaboration in your organization through project workspaces where others can efficiently find information and work together |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
|
|
 |
TAKE THE VIDEO TOUR |
 |
or download a FREE TRIAL today. |
| 
HOME
Printer friendly page
