Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

SVG - Scalable Vector Graphics

SVG defines graphics in XML format.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="500" cy="50" r="40" stroke="black" stroke-width="2" fill="#990000" />
</svg> 

SVG code explanation:

1. The first line contains the XML declaration. Notice the standalone attribute, which 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.
2. The second and the third line refer to the SVG DTD. This DTD resides at w3.org, and contains all allowable SVG elements.
3. The SVG code begins with the <svg> element. This is the root element. The xmlns attribute defines the SVG namespace and the version attribute defines the SVG version to be used.
4. The <circle> element is used to draw 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 the circle.
5. The </svg> tag closes the root element and the document.

Note: Since SVG is written in XML, all elements must be properly closed!

 

Text on a Path

The <path> element is used to define a path.

The following commands are available for path data:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.

Browser Support

• Firefox
• Internet Explorer 9
• Google Chrome
• Safari

Links

• SVG Examples

top of page

Page last updated: May 31, 2012 14:26 PM