apike.ca

SVG tag

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
1
2
3
4
5
6
7
8
9
10
11
<?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
Related Topics