APEX@IGP
Lesson 20
<def /> Definitions and Patterns
Objective: Learn to create and use definitions and patterns.
Definitions are drawing elements that can be reused anywhere in a drawing. <defs /> or definitions are very important in more complex artwork. They make creating repetitive items a lot easier to create and handle.
You use the <defs>...</defs> container immediately after the SVG element. IE. It should be at the top of the SVG. The SVG draws this first and stores it in memory, ready to be used anywhere in the drawing.
Nearly anything can be created in <defs> and they MUST have a unique ID so they can be addressed. This includes:
- Patterns with <pattern>...</pattern>
- Content that is normally contained in a <g> element
- Gradients. This is a separate lesson. These can be a linearGradient, and radialGradient.
Items defined in the <defs> must have an ID and are referenced anywhere in the SVG body, as many times as you like with the <use /> element.
<use x="100" y="100" href="#ID" style="fill: blue;" / >
x This is used to position the defined item to an X location.
y This is used to position the defined item to a Y location.
href="#ID" This is used to reference the item created in <defs>
20.1 Simple <use> Example
In the following simple example two rectangles are created in <defs> and then placed using <use> six times.
The first definition object uses fill="red" so that applies to all the rectangles.
The second definition object does not use a fill attribute and the fill attribute is included in the <use /> element.
The third definition object uses x="200" and y="200". This demonstrates that if you use x,y positioning carelessly you can have trouble placing your objects. It is usually best if definition objects are aligned to the top-left origin so they can be easily and accurately positioned with <use /> co-ordinates.
Finally there is one more complicated object in definitions that is used twice. In the top right and bottom left corners. The one at the bottom has a transform applied to demonstrate that transforms can be applied to <use /> elements.
General <defs> Code
Notice the href is used for an object and standard fill styling is used for patterns and gradients.
<defs>
<pattern id="patternName"> ... </pattern>
<g id="objectName"> ... </g>
<linearGradient id="linearGradient1"> ... </linearGradient>
</defs>
<!--Using a pattern-->
<rect x="100" y="100" width="100" height="100" fill="url(#patternName)" />
<!--Using a shape-->
<use href="#objectName" x="100" y="100" />
<!--Using a gradient-->
<rect fill="#linearGradient1" x="50" y="50" width="100" height="50" />
We will look at the <use /> and <linearGradient /> elements in their own sections. Now to explore <pattern />
20.2 Pattern
Usefully <pattern /> can be created inside a <defs> and then used anywhere on the drawing.
The same style properties apply.
Patterns allow you to fill any shape or closed path with a repeating pattern made from images. The pattern item can be another SVG shape or an image such as a PNG.
To create a pattern you must have a <defs> section in the SVG immediately after the opening <svg> element. Look at the code in the following example. There are four patterns defined, used and modified.
patternUnits this can be objectBoundingBox or userSpaceOnUse (the default).
patternTransform This can be used to modify the pattern such as skewing or scaling. In the examples above 2 has been rotated 45 degrees, and 3 has been scaleX modified.
20.3 Pattern Graphs. Thinking Education
Although our practice SVG editor has CSS defined grids, you may need them on an illustration, for example for Trigonometry lessons. Using patterns, and more interestingly patterns inside patterns, grids are easy to construct and use.
20.4 Example 1 grid paths
This first example defines the repeating pattern using paths. In the pattern it draws small 10px X 10px
<defs>
<pattern id="smallGrid"
width="10"
height="10"
patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10"
fill="none"
stroke="black"
stroke-width="1"
stroke-dasharray="2 2"
></path>
</pattern>
<pattern id="grid10" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)"></rect>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"></path>
</pattern>
</defs>
20.5 Example 2. page lines
This second example uses horizontal lines to create a notebook image. A dropshadow has been added to make it a little more interesting. More on that later.
<svg height="400" id="svgb-67" viewBox="0, 0, 400, 400" width="400">
<title>Notebook</title>
<defs>
<pattern height="30" id="hLines" patternUnits="userSpaceOnUse" width="400">
<line stroke="rgb(100,100,255)" stroke-width="2" x1="0" x2="400" y1="25" y2="25"></line>
</pattern>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<rect fill="rgb(200,100,50)" height="400" stroke="none" width="400" x="0" y="0"></rect>
<rect fill="white" height="360" stroke="none" width="360" x="20" y="20" filter="url(#shadow)"></rect>
<rect fill="url(#hLines)" height="360" stroke="none" stroke-width="0" width="360" x="20" y="20"></rect>
</svg>
SVG Editor
20.6 Exercises
Use the samples above to experiment with definitions and the pattern attribute values.
SVG Cheatsheets and Resources
Here are our standard SVG Cheatsheets you can download, print out and have ready when needed. There is also a text file containing annotated quickstarts for all major shapes and techniques.
SVG Editor. Access a full SVG Editor online at any time.