Here is a simple drawing of a pumpkin:
This is just a simple SVG with several shapes. Here is the file we used to draw the pumpkin:
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="202px" height="212px" viewBox="-101 -111 202 212"> 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:
The following image consists of three copies of the pumpkin:
The source code is below:
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: <defs> 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: </defs> 15: 16: <use xlink:href="#Pumpkin"/> 17: <use xlink:href="#Pumpkin" x="250" y="0"/> 18: <use xlink:href="#Pumpkin" x="475" y="0"/> 19: 20: </svg>
The second example is drawn by creating three links to a definition of a pumpkin shape as a group of shapes.
Important: The reader should notice that we have changed the first two lines of the SVG file. We added the following text to the SVG tag:
This allows us to include things from the XML Linking Language. This enables us to link within our file. You need to include this part of the SVG tag whenever you link!
The <defs/> tag includes definitions of one or more objects. There should only be one of these, and it should appear at the beginning of the SVG file.
Inside the <defs/> tag we have placed a <g/> tag, which represents a group of objects. And inside of the <g/>, we have placed all the SVG code which we used to create a pumpkin. Also, we have specified an id <g/> for our group of objects, id="Pumpkin". The id of an object should be unique.
After defining the pumpkin, we have included copies in lines 16-18 with the <use/> tag. By setting the attribute xlink:href="#Pumpkin", we are making a copy of the object in our document with id given by Pumpkin. The optional attributes x and y specify a translation that is done to our object before including it. By default, these values are both zero indicating that no translation is to be applied.
