APEX@IGP
Lesson 25
<symbol> and More
Objective: Learn to create and use the <symbol> element.
<symbol>s are defined shapes and images of any complexity that can be used anywhere in an SVG illustration using the <use /> element. There are a lot of reasons for publishers, and especially education publishers to plan a powerful <symbol> strategy because of their reusability. An obvious use is icons.
<symbol> is a stand-alone element. It does not go in <defs>. It also has two very important attributes; preserveAspectRatio and viewBox. You can think of a <symbol> as an insertable SVG image.
A powerful feature of <symbol> is that once it is set in one SVG illustration it can be used in all other illustrations on the page.
This page has a version of the IGP logo in an SVG file that is invisible. The logo is used on all the other illustrations.
Attributes in <symbol>
ID The unique identifier for a symbol to allow it to be reused with a <use> element href="#ID" attribute. Each ID must be unique on a webpage, or if in an ePub unique in the whole book.
viewBox This is the standard SVG viewBox with four numbers min-x, min-y, width and height. Eg: viewBox="0, 0, 400, 400"
preserveAspectRatio This is only applicable if viewBox has been applied. IE. If there is no viewBox this attribute does not work. This indicates whether or not to force uniform scaling. This is very big and we will look at it separately.
Simple <symbol>
Here is the symbol. Not too complicated but illustrates the use of multiple shapes and text demonstrating that a symbol can be as complex as you like.
<symbol id="symbol1">
<rect fill="LightGray" height="75" width="80" x="0" y="0"></rect>
<circle cx="40" cy="20" r="20" fill="red"></circle>
<circle cx="60" cy="55" r="20" fill="green"></circle>
<circle cx="20" cy="55" r="20" fill="blue"></circle>
<g font-face="sans-serif" fill="white" font-weight="bold"
text-anchor="middle">
<text x="40" y="25">R</text>
<text x="60" y="60">G</text>
<text x="20" y="60">B</text>
</g>
</symbol>
Image 1 shows the symbol at the size and position it was draw. Images 2, 3 and 4 are the symbol inserted into the drawing with the following very simple code. Notice they are all the same size.
<use href="#symbol1" x="100" y="30"></use> <use href="#symbol1" x="200" y="30"></use> <use href="#symbol1" x="300" y="30"></use>
If you want more control over your image you need to use viewBox and preserveAspectRatio.
Here we have used a symbol defined in the previous SVG and inserted it into and SVG with a viewBox that is only 100px high. The symbol has adapted to the viewBox.
So now let's redefine the <symbol> giving it a viewBox. An SVG viewBox always tries to fill it's viewport. So if we just put a <symbol> into a <use> element without defining the size of the <use> element it will fill the viewport. You can see this below.
<symbol id="symbol4" viewBox="0,0,80,75"> ... </symbol> <use fill="gray" href="#symbol4" x="0" y="0"></use>
We don't usually want that to happen. So it becomes necessary to control the size of the <use> element to get the control needed. In the first example we have made the <use> element the same size as the viewPort. The next two examples show different sizes that allow the <symbol> to be scaled. One is larger, the next is smaller. You can see the effects of the height and width attributes.
<symbol id="symbol4" viewBox="0,0,80,75"> ... </symbol> <!-- 1. --> <use fill="gray" href="#symbol4" x="20" y="20" height="75" width="80"></use> <!-- 2. --> <use fill="gray" href="#symbol4" x="120" y="20" height="150" width="160"></use> <!-- 3. --> <use fill="gray" href="#symbol4" x="320" y="20" height="50" width="50"></use>
This is probably enough power for most uses of <symbol>, but here is another simple one.
SVG Symbols can be used anywhere in the HTML text once they have been declared in an SVG element somewhere. Here we are using it in a standard FX icon block. It's position is controlled by CSS.
<svg class="para-icon-rw"><use height="60" href="#symbol4" width="60" x="0" y="0"></use></svg>
23.6 Exercises
Use the samples above to experiment with <clipPath> and various shapes. 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.