The following tags are used to create separate visible and invisible drawing areas inside an SVG document.

The ‘svg’ tag – Reloaded

The ‘svg’ element has been used in this tutorial only to create one drawing area in a SVG document. Another way to use it is to create additional drawing areas in a SVG document. Why would you want to do that? So you can change the view box to suit your needs. Consider a SVG document which shows a mathematical graph inside it. It is highly unlikely that the coordinates used for the graph and the SVG document match. This new view box can match the mathematical graph and be placed into the SVG document.

Example 1. An SVG fragment inside a document. (Download)

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

Basically using this element creates an SVG document fragment. SVG documents are self-contained XML documents with one SVG document fragment and zero or more SVG elements placed inside. SVG document fragments can be placed inside of other SVG document fragments. This creates a new view box and all objects placed inside it use the new coordinates created by it.

It is a quick way to create a rectangular mask as (by default) everything outside the viewing space is clipped away. Adding ‘overflow=”visible”‘ to a svg tag disables this mask.

Patterns

Creating a pattern is like creating a small SVG document. You define the coordinates you want the view to show and the size of the view. Then you add shapes into your pattern. The pattern repeats when an edge of the view box (viewing area) is hit. Any shapes outside of your pattern’s view box are clipped (removed) by default. Like a gradient, you have to define a pattern before you create something which uses it.

<defs>     <pattern id="checkerPattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
             viewBox="0 0 10 10" >
                      <rect x="0" y="0" width="5" height="5" fill="lightblue" />
         <rect x="5" y="5" width="5" height="5" fill="lightblue" /> 
    </pattern>  
</defs>
Code 1. A simple pattern. This is the background used in all examples.

That’s a pretty simple pattern and that’s all there is to it. The contents of the pattern are “drawn” relative to the new coordinate system you create. The pattern is never drawn directly and always referenced so it should be placed in a ‘defs’ tag.

The shapes inside a pattern can’t be animated. They ignore all events. You can reference the contents of a pattern and change them from outside. The pattern will also ignore the ‘display’ attribute and always display. Place your mouse over the example above! The pattern is animated from outside.

Markers can be placed on the vertices of lines, polylines, polygons and paths. These elements can use the marker attributes ‘marker-start’, ‘marker-mid’ and ‘marker-end’ which inherit by default or can be set to ‘none’ or the URI of a defined marker.

You must first define the marker before you can reference it via its URI. Any kind of shape can be put inside marker. They are drawn on top of the element they are attached to.

<defs><marker id="myMarker" viewBox="0 0 10 10" 
  refX="1" refY="5" markerUnits="strokeWidth" 
  orient="auto" markerWidth="4" markerHeight="3">     
<polyline points="0,0 10,5 0,10 1,5" fill="darkblue" /> 
</marker></defs> ....  <line x1="20" y1="10" x2="130" 
  y2="140" stroke="blue" stroke-width="20" 
  marker-end="url(#myMarker)" />