Beruflich Dokumente
Kultur Dokumente
Text based
Based on XML
Compatible with current web technologies:
XML, HTML, DHTML, CSS, JavaScript, Java, VB,
PNG, GIF, JPG, ASP, JSP and others
ADVANTAGES OF SVG
SVG files can be read and modified by a large range of tools (e.g.
notepad).
SVG files are smaller and more compressible than JPEG and GIF
images.
SVG images are scalable .
SVG images can be printed with high quality at any resolution .
SVG images are zoom able. Any part of the image can be zoomed
without degradation.
Text in SVG is selectable and searchable (excellent for making maps).
SVG works with Java technology.
SVG is an open standard.
SVG files are pure XML.
ADVANTAGES OF SVG (CONT.)
100%
100%
200%
200%
SVG FOUNDATIONS IN XML
An SVG is written in XML 1.0 syntax in a text editor, or
generated by a drawing program
SVG abides by XMLs strict coding rules
SVG contains elements and attributes, as does XML
SVG COORDINATE SYSTEM
SVG is based on mathematical formulas, like traditional vector
graphics
SVG elements are placed on the X and Y axis
EXAMPLE SVG CODE
Example:
<rect x=10 y=10 width=20 height=20/>
Produces 20x20 rectangle at position (10, 10)
Similarly:
<circle cx=10 cy=10 r=20/>
Produces a D=40 circle centered at (10, 10)
XML CODE FOR A SIMPLE SVG
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010909//EN"
"http://www.w3c.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<svg width="600" height="400">
<rect x="1" y="1" width="598" height="398"
style="fill:#00FF00"/>
<text x="210" y="25" style="fill:#FFFFFF; stroke:none;
font-family:Arial, sans-serif; font-size:22">
Hello World!
</text>
</svg>
ADVANCED CAPABILITIES OF SVG
</svg>
SVG COORDINATE SYSTEMS
Vector objects:
rectangle, circle, ellipse, line, polyline,
polygon, path
Raster images
Text
RECTANGLE
Translate - transform=translate(20,100)
Rotate - transform=rotate(30)
Scale - transform=scale(2.5)
Skew - transform=skewX(30)
transform=skewy(30)
ANIMATION
http://www.w3.org/TR/SVG/