For in class discussion of duplicating objects

The initial pumpkin:

Note the new namespace in the <svg> tag.

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.
Source of pumpkin-class.svg:Hide line numbers 
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
03:      width="679px" height="214px" viewBox="-102 -112 679 214">
04: 
05: <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
06: <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
07: <circle cx="-30" cy="-30" r="20" fill="black"/>
08: <circle cx="30" cy="-30" r="20" fill="black"/>
09: <polygon points="0,0 20,25 -20,25" fill="black"/>
10: <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
11: 
12: </svg>
13:

Creating a copy of the pumpkin:

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.
Source of pumpkin-class2.svg:Hide line numbers 
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" 
03:      xmlns:xlink="http://www.w3.org/1999/xlink"
04:      width="679px" height="214px" viewBox="-102 -112 679 214">
05: 
06: <g id="pumpkin">
07:    <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
08:    <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
09:    <circle cx="-30" cy="-30" r="20" fill="black"/>
10:    <circle cx="30" cy="-30" r="20" fill="black"/>
11:    <polygon points="0,0 20,25 -20,25" fill="black"/>
12:    <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
13: </g>
14: 
15: <use xlink:href="#pumpkin" x="50" y="50" opacity="0.5"/>
16: 
17: </svg>

Moving the pumpkin into a definitions section:

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.
Source of pumpkin-class3.svg:Hide line numbers 
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" 
03:      xmlns:xlink="http://www.w3.org/1999/xlink"
04:      width="679px" height="214px" viewBox="-102 -112 679 214">
05: 
06: <defs>
07:    <g id="pumpkin">
08:       <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
09:       <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
10:       <circle cx="-30" cy="-30" r="20" fill="black"/>
11:       <circle cx="30" cy="-30" r="20" fill="black"/>
12:       <polygon points="0,0 20,25 -20,25" fill="black"/>
13:       <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
14:    </g>
15: </defs>
16: 
17: <use xlink:href="#pumpkin" x="50" y="50" opacity="0.5"/>
18: 
19: </svg>

References:

This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!