SVG tag

By mbystedt on Feb 26, 2014, 6:07:09 PM

In every SVG document, an 'svg' tag encloses all other tags. This outermost tag is the root on the DOM or document object model in every document. It defines the coordinates for the drawing area.

Presentation attributes on a 'svg' tag don't cause it to be stroked or filled. They are used for inheritance. If an inherited attribute is set on an enclosing tag then, baring any closer definition, the value set on the ancestor becomes the value.

<svg>

Attribute	Explanation
x	Top left corner when embeded. Outermost tag ignores. (default 0)
y	Top left corner when embeded. Outermost tag ignores. (default 0)
width	The width of the svg fragment. (default 100%)
height	The height of the svg fragment. (default 100%)
viewBox	The view box is the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)
preserveAspectRatio	'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default 'none')
zoomAndPan	'magnify' or 'disable'. Magnify option allows users to pan and zoom your file. Applies to outermost tag only. (default 'magnify')
-XML-	Outermost SVG tags need to setup SVG and its namespace. Example: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
Presentation Attributes	All

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
	 width="200px" height="50px"
	 viewBox="0 0 200 50"
	 zoomAndPan="disable" preserveAspectRatio="none" >
 
	 <!-- SVG code goes here -->
</svg>

Code 1. Basic SVG Document