FANDOM


Scalable Vector Graphics
Blank

Filename extension .svg
Internet media type image/svg+xml
Developed by W3C +
Initial release September 4, 2001
Latest release 1.2T
Type Vector graphics file format
Standard SVG 1.1
SVG Tiny 1.2
Website Scalable Vector Graphics (SVG)
Compressed SVG
Blank

Filename extension .svgz
File formats category - v  e   edit

Scalable Vector Graphics (SVG) is an XML format for rendering two-dimensional vector graphics. Aside from being a graphics format, SVG also offers interactivity, similar to HTML's image map functionality. It also has some animation functionality.

SpecificationEdit

Document type definitionEdit

The DTD for an SVG image is:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Data typesEdit

Defined data types for an SVG document are:

integer
Basically a long integer. Ex. 9, -2.
number
Single-precision real number value. (May be in either decimal or scientific notation) Ex. 6.1, -6E-5.
length
A measurement of length. A number with an optional unit. May also be a percentage. Ex. 12px, 10pt, 1in, 20, 90%.
coordinate
A measurement of length from the origin.
list (of x)
A list of values.
number-optional-number
A special list of numbers with one or two elements.
angle
An angle measure with an optional unit (deg, rad, grad).
color
An sRGB color. May be a color keyword or number specification.
paint
Type of paint to use.
percentage
A percentage used as reference to another measure such as length.
transform-list
uri
A Uniform Resource Identifier.
frequency
Used in aural CSS. A number followed by either Hz (hertz) or kHz (kilohertz).
time
A measure of time. A number followed by either ms (millisecond) or s (second).

Document structureEdit

An SVG image must be a valid SVG document with the "<svg>" root element, which has the following attributes:

Attribute name Type Description
xmlns[:prefix] Identifies the XML namespace
version number The SVG version. There are currently two versions, 1.0 and 1.1.
x coordinate The x-coordinate of the region to render an embedded svg element. Default is 0. Not useful for the outermost (e.g. the root svg) svg element.
y coordinate The y-coordinate of the region to render an embedded svg element. Default is 0. Not useful for the outermost (e.g. the root svg) svg element.
width length The proposed width of the document. For embedded svg elements, the width of the rectangle to render the element.
height length The proposed height of the document. For embedded svg elements, the height of the rectangle to render the element.

The <g> element enables grouping of different items in the document.

PathsEdit

Paths are shape outlines which can be filled, stroked or used as clipping path. Paths are defined by the <path> element.

Path dataEdit

Path data has its own syntax in a d attribute. Example:

<path d="M 50 50 L 90 90 L 0 100 z"/>
Move to (moveto)

A move to command starts a new point. The effect is as if the "pen" were lifted and moved to a new location. An uppercase "M" is absolute, a lowercase "m" is relative. At least one coordinate pair (separated by a space) is required. When more than one coordinate pairs are represent, those will represent implicit line to commands. Multiple subpaths may be specified by specifying multiple move to commands.

Close path (closepath)

A close path command closes the current path (or subpath) and creates a line from the current point to the current subpath's initial point. Both uppercase and lowercase "z"s specify a close path command.

Line to (lineto, horizontal lineto, vertical lineto)

A line to command draws a line from the current point to a new point. "L" (absolute) and "l" (relative) specifies a line to command with coordinate pairs; at least one coordinate pair (separated by a space) is required. "H" (absolute) and "h" (relative) specifies a horizontal line to command with an x-coordinate. "V" (absolute) and "v" (relative) specifies a vertical line to command with a y-coordinate. More than one line to commands draw a polyline.

Cubic Bézier curve commands (curveto, smooth curveto)

"C" (absolute) and "c" (relative) specify a cubic Bézier curve from the current point of the current path or subpath to the third coordinate using the first coordinate as the control point at the beginning of the curve and the second coordinate as the control point at the end of the curve; three coordinate pairs are used and at least one is required. More than one group of coordinate pairs specify a polybézier.

"S" (absolute) and "s" (relative) is similar to the above, except that he first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. There are only two coordinate pairs in this command.

Basic shapesEdit

These are basically the same as a path that would draw the specified shape.

Rectangle

Rectangles and rounded rectangles are specified using the <rect> element. Example:

<rect x="100" y="100" width="100" height="50" fill="blue" rx="3" />
Circle

Circles are defined using a center point and a radius with the <circle> element. Example:

<circle cx="200" cy="200" r="20" />
Ellipse

Ellipses are defined by its center point and two radii with the <ellipse> element. Example:

<ellipse cx="200" cy="200" rx="50" ry="150" />
Line

Lines are defined using the <line> element. Example:

<line x1="100" y1="100" x2="200" y2="250" />
Polygon

Custom polygons are defined using the <polygon> element. These are defined using a space-separated list of points in the polygon. Example:

<polygon points="100,100 100,200 300,400 200,90" />

TextEdit

Text can be included using the <text> element. Text is placed in the content of the element.

PaintingEdit

SVG paths or text may be stroked, filled or outlined using a solid or gradient color or a pattern with any level of transparency. Colors may also be inherited from the parent using "currentColor". SVG uses the sRGB color space by default.

ExampleEdit

<?xml version="1.0"?>
<!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://wwww.w3.org/2000/svg">
    <circle cx="200" cy="300" r="70" fill="black" />
</svg>

ReferencesEdit

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.