<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="http://commons.oreilly.com/wiki/skins/common/feed.css?97"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;action=history&amp;feed=atom</id>
		<title>SVG Essentials/Document Structure - Revision history</title>
		<link rel="self" type="application/atom+xml" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;action=history&amp;feed=atom"/>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;action=history"/>
		<updated>2013-06-20T09:53:00Z</updated>
		<subtitle>Revision history for this page on the wiki</subtitle>
		<generator>MediaWiki 1.11.0</generator>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=7370&amp;oldid=prev</id>
		<title>Docbook2Wiki: Initial conversion from Docbook</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=7370&amp;oldid=prev"/>
				<updated>2008-03-07T13:40:50Z</updated>
		
		<summary type="html">&lt;p&gt;Initial conversion from Docbook&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 13:40, 7 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Docbook2Wiki</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=6035&amp;oldid=prev</id>
		<title>Docbook2Wiki: Initial conversion from Docbook</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=6035&amp;oldid=prev"/>
				<updated>2008-03-07T12:51:41Z</updated>
		
		<summary type="html">&lt;p&gt;Initial conversion from Docbook&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 12:51, 7 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Docbook2Wiki</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3700&amp;oldid=prev</id>
		<title>Evanlenz: 1 revision(s)</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3700&amp;oldid=prev"/>
				<updated>2008-03-06T23:40:32Z</updated>
		
		<summary type="html">&lt;p&gt;1 revision(s)&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 23:40, 6 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Evanlenz</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3699&amp;oldid=prev</id>
		<title>Docbook2Wiki: Initial conversion from Docbook</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3699&amp;oldid=prev"/>
				<updated>2008-03-06T23:33:32Z</updated>
		
		<summary type="html">&lt;p&gt;Initial conversion from Docbook&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 23:33, 6 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Docbook2Wiki</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3241&amp;oldid=prev</id>
		<title>Evanlenz: 1 revision(s)</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3241&amp;oldid=prev"/>
				<updated>2008-03-06T22:52:40Z</updated>
		
		<summary type="html">&lt;p&gt;1 revision(s)&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 22:52, 6 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Evanlenz</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3240&amp;oldid=prev</id>
		<title>Docbook2Wiki: Initial conversion from Docbook</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=3240&amp;oldid=prev"/>
				<updated>2008-03-06T22:38:57Z</updated>
		
		<summary type="html">&lt;p&gt;Initial conversion from Docbook&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 22:38, 6 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Docbook2Wiki</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=2655&amp;oldid=prev</id>
		<title>Evanlenz: 1 revision(s)</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=2655&amp;oldid=prev"/>
				<updated>2008-03-06T22:22:01Z</updated>
		
		<summary type="html">&lt;p&gt;1 revision(s)&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 22:22, 6 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/table&gt;</summary>
		<author><name>Evanlenz</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=2654&amp;oldid=prev</id>
		<title>Docbook2Wiki: Initial conversion from Docbook</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=2654&amp;oldid=prev"/>
				<updated>2008-03-06T22:21:01Z</updated>
		
		<summary type="html">&lt;p&gt;Initial conversion from Docbook&lt;/p&gt;

			&lt;table style=&quot;background-color: white; color:black;&quot;&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;col class='diff-marker' /&gt;
			&lt;col class='diff-content' /&gt;
			&lt;tr&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;←Older revision&lt;/td&gt;
				&lt;td colspan='2' style=&quot;background-color: white; color:black;&quot;&gt;Revision as of 22:21, 6 March 2008&lt;/td&gt;
			&lt;/tr&gt;
		&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 11:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 11:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-1. Structure versus presentation'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-1. Structure versus presentation'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt56&lt;/del&gt;.png|Structure versus presentation]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt56&lt;/ins&gt;.png|Structure versus presentation]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 62:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 62:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-2. Internal stylesheet with SVG'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-2. Internal stylesheet with SVG'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt57&lt;/del&gt;.png|Internal stylesheet with SVG]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt57&lt;/ins&gt;.png|Internal stylesheet with SVG]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 86:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 86:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-3. External stylesheet with SVG'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-3. External stylesheet with SVG'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt58&lt;/del&gt;.png|External stylesheet with SVG]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt58&lt;/ins&gt;.png|External stylesheet with SVG]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 191:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 191:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-4. Grouped stick figure drawing'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-4. Grouped stick figure drawing'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt62&lt;/del&gt;.png|Grouped stick figure drawing]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt62&lt;/ins&gt;.png|Grouped stick figure drawing]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 207:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 207:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-5. Re-use of grouped stick figures'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-5. Re-use of grouped stick figures'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt64&lt;/del&gt;.png|Re-use of grouped stick figures]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt64&lt;/ins&gt;.png|Re-use of grouped stick figures]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 275:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 275:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-6. Result of using groups within defs'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-6. Result of using groups within defs'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt65&lt;/del&gt;.png|Result of using groups within defs]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt65&lt;/ins&gt;.png|Result of using groups within defs]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 341:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 341:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-7. Groups versus symbols'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-7. Groups versus symbols'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt68&lt;/del&gt;.png|Groups versus symbols]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt68&lt;/ins&gt;.png|Groups versus symbols]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 351:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Line 351:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-8. JPEG image included in an SVG file'''&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;'''Figure 4-8. JPEG image included in an SVG file'''&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt;-&lt;/td&gt;&lt;td style=&quot;background: #ffa; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;del style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials/I_4_tt69&lt;/del&gt;.png|JPEG image included in an SVG file]]&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt;+&lt;/td&gt;&lt;td style=&quot;background: #cfc; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;[[Image:SVG &lt;ins style=&quot;color: red; font-weight: bold; text-decoration: none;&quot;&gt;Essentials_I_4_tt69&lt;/ins&gt;.png|JPEG image included in an SVG file]]&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;div&gt;&amp;lt;/div&amp;gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;td class='diff-marker'&gt; &lt;/td&gt;&lt;td style=&quot;background: #eee; color:black; font-size: smaller;&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;!-- diff cache key wikicontent:diff:version:1.11a:oldid:2418:newid:2654 --&gt;
&lt;/table&gt;</summary>
		<author><name>Docbook2Wiki</name></author>	</entry>

	<entry>
		<id>http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=2418&amp;oldid=prev</id>
		<title>Docbook2Wiki: Initial conversion from Docbook</title>
		<link rel="alternate" type="text/html" href="http://commons.oreilly.com/wiki/index.php?title=SVG_Essentials/Document_Structure&amp;diff=2418&amp;oldid=prev"/>
				<updated>2008-03-04T22:37:00Z</updated>
		
		<summary type="html">&lt;p&gt;Initial conversion from Docbook&lt;/p&gt;
&lt;p&gt;&lt;b&gt;New page&lt;/b&gt;&lt;/p&gt;&lt;div&gt;{{SVG Essentials/TOC}}&lt;br /&gt;
We've casually mentioned that SVG lets you separate a document's structure from its presentation. In this chapter, we're going to compare and contrast the two, discuss the presentational aspects of a document in more detail, and then show some of the SVG elements that you can use to make your document's structure clearer, more readable, and easier to maintain.&lt;br /&gt;
&lt;br /&gt;
== Structure and Presentation ==&lt;br /&gt;
&lt;br /&gt;
As we mentioned in [[SVG Essentials/Getting Started|Chapter 1]], in [[SVG Essentials/Getting Started#Basic Shapes|Section 1.4.2]], one of XML's goals is provide a way to structure data and separate this structure from its visual presentation. Consider the drawing of the cat from that chapter; you recognize it as a cat because of its structure — the position and size of the geometric shapes that make up the drawing. If we were to make structural changes, such as shortening the whiskers, rounding the nose, and making the ears longer and rounding their ends, the drawing would become one of a rabbit, no matter what the surface presentation might be. The structure, therefore, tells you what a graphic ''is''.&lt;br /&gt;
&lt;br /&gt;
This is not to say that information about visual style isn't important; had we drawn the cat with thick purple lines and a gray interior, it would have been recognizable as a cat, but its appearance would have been far less pleasing. These differences are shown in [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-1|Figure 4-1]], albeit without the color differences. XML encourages you to separate structure and presentation; unfortunately, many discussions of XML emphasize structure at the expense of presentation. We'll right this wrong by going into detail about how you specify presentation in SVG.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-1&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-1. Structure versus presentation'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt56.png|Structure versus presentation]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Using Styles with SVG ==&lt;br /&gt;
&lt;br /&gt;
SVG lets you specify presentational aspects of a graphic in four ways; with inline styles, internal stylesheets, external stylesheets, and presentation attributes. Let's examine each of these in turn.&lt;br /&gt;
&lt;br /&gt;
=== Inline Styles ===&lt;br /&gt;
&lt;br /&gt;
[[SVG Essentials/Document Structure#svgess-CHP-4-EX-1|Example 4-1]] uses inline styles. This is exactly the way we've been using presentation information so far; we set the value of the &amp;lt;tt&amp;gt;&amp;lt;style&amp;gt;&amp;lt;/tt&amp;gt; attribute to a series of visual properties and their values as described in [[SVG Essentials/Introduction to Stylesheets|Appendix B]], in [[SVG Essentials/Introduction to Stylesheets#Anatomy of a Style|Section B.1]].&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-1&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-1. Use of inline styles'''&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;circle cx=&amp;quot;20&amp;quot; cy=&amp;quot;20&amp;quot; r=&amp;quot;10&amp;quot;&lt;br /&gt;
     style=&amp;quot;stroke: black; stroke-width: 1.5; fill: blue; fill-opacity: 0.6&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Internal Stylesheets ===&lt;br /&gt;
&lt;br /&gt;
You don't need to place your styles inside each SVG element; you can create an internal stylesheet to collect commonly-used styles that you can apply to all occurrences of a particular element, or use as named classes to apply to individual elements. [[SVG Essentials/Document Structure#svgess-CHP-4-EX-2|Example 4-2]] sets up an internal stylesheet that will draw all circles in a blue double-thick dashed line with a light yellow interior. We have placed the stylesheet within a &amp;lt;tt&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;/tt&amp;gt; element, which we will discuss later in this chapter.&lt;br /&gt;
&lt;br /&gt;
The example then draws several circles. The circles in the second row of [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-2|Figure 4-2]] have inline styles that override the specification in the internal stylesheet.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-2&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-2. Use of internal stylesheet'''&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;nowiki&amp;gt;&lt;br /&gt;
&amp;lt;svg width=&amp;quot;200px&amp;quot; height=&amp;quot;200px&amp;quot; viewBox=&amp;quot;0 0 200 200&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;defs&amp;gt;&lt;br /&gt;
&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&amp;lt;![CDATA[&lt;br /&gt;
    circle {&lt;br /&gt;
        fill: #ffc;&lt;br /&gt;
        stroke: blue;&lt;br /&gt;
        stroke-width: 2;&lt;br /&gt;
        stroke-dasharray: 5 3&lt;br /&gt;
    }     &lt;br /&gt;
    ]]&amp;gt;&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;/defs&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;circle cx=&amp;quot;20&amp;quot; cy=&amp;quot;20&amp;quot; r=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;circle cx=&amp;quot;60&amp;quot; cy=&amp;quot;20&amp;quot; r=&amp;quot;15&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;circle cx=&amp;quot;20&amp;quot; cy=&amp;quot;60&amp;quot; r=&amp;quot;10&amp;quot; style=&amp;quot;fill: #cfc&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;circle cx=&amp;quot;60&amp;quot; cy=&amp;quot;60&amp;quot; r=&amp;quot;15&amp;quot; style=&amp;quot;stroke-width: 1; &lt;br /&gt;
    stroke-dasharray: none;&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;/svg&amp;gt;&amp;lt;/nowiki&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-2&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-2. Internal stylesheet with SVG'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt57.png|Internal stylesheet with SVG]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== External Stylesheets ===&lt;br /&gt;
&lt;br /&gt;
If you want to apply a set of styles to multiple SVG documents, you could copy and paste the internal stylesheet into each of them. This, of course, is impractical for a large volume of documents if you ever need to make a global change to all the documents. Instead, you should take all the information between the beginning and ending &amp;lt;tt&amp;gt;&amp;lt;style&amp;gt;&amp;lt;/tt&amp;gt; tags (excluding the &amp;lt;tt&amp;gt;&amp;lt;![CDATA[&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;]]&amp;gt;&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt;) and save it in an external file, which becomes an external stylesheet. [[SVG Essentials/Document Structure#svgess-CHP-4-EX-3|Example 4-3]] shows an external stylesheet that has been saved in a file named &amp;lt;tt&amp;gt;ext_style.css&amp;lt;/tt&amp;gt; This stylesheet uses a variety of selectors, including &amp;lt;tt&amp;gt;*&amp;lt;/tt&amp;gt;, which sets a default for all elements that don't have any other style, and it, together with the SVG, produces [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-3|Figure 4-3]].&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-3&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-3. External stylesheet'''&lt;br /&gt;
&lt;br /&gt;
 * { fill:none; stroke: black; } /* default for all elements */&lt;br /&gt;
 &lt;br /&gt;
 rect { stroke-dasharray: 7 3; }&lt;br /&gt;
 &lt;br /&gt;
 circle.yellow { fill: yellow; }&lt;br /&gt;
 &lt;br /&gt;
 .thick { stroke-width: 5; }&lt;br /&gt;
 &lt;br /&gt;
 .semiblue { fill:blue; fill-opacity: 0.5; }&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-3&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-3. External stylesheet with SVG'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt58.png|External stylesheet with SVG]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
[[SVG Essentials/Document Structure#svgess-CHP-4-EX-4|Example 4-4]] shows a complete SVG document (including &amp;lt;tt&amp;gt;&amp;lt;?xml ...?&amp;gt;&amp;lt;/tt&amp;gt;, &amp;lt;tt&amp;gt;&amp;lt;?xml-stylesheet ...?&amp;gt;&amp;lt;/tt&amp;gt;, and the &amp;lt;tt&amp;gt;&amp;lt;!DOCTYPE&amp;gt;&amp;lt;/tt&amp;gt;) that references the external stylesheet.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-4&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-4. SVG file that references an external stylesheet'''&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;nowiki&amp;gt;&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;?xml-stylesheet href=&amp;quot;ext_style.css&amp;quot; type=&amp;quot;text/css&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;!DOCTYPE svg PUBLIC &amp;quot;-//W3C//DTD SVG 1.0//EN&amp;quot;&lt;br /&gt;
    &amp;quot;http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;svg width=&amp;quot;200px&amp;quot; height=&amp;quot;200px&amp;quot; viewBox=&amp;quot;0 0 200 200&amp;quot;&lt;br /&gt;
    preserveAspectRatio=&amp;quot;xMinYMin meet&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;line x1=&amp;quot;10&amp;quot; y1=&amp;quot;10&amp;quot; x2=&amp;quot;40&amp;quot; y2=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;rect x=&amp;quot;10&amp;quot; y=&amp;quot;20&amp;quot; width=&amp;quot;40&amp;quot; height=&amp;quot;30&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;circle class=&amp;quot;yellow&amp;quot; cx=&amp;quot;70&amp;quot; cy=&amp;quot;20&amp;quot; r=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;polygon class=&amp;quot;thick&amp;quot; points=&amp;quot;60 50, 60 80,  90 80&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;polygon class=&amp;quot;thick semiblue&amp;quot;&lt;br /&gt;
    points=&amp;quot;100 30, 150 30, 150 50, 130 50&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;/svg&amp;gt;&amp;lt;/nowiki&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;note&amp;quot;&amp;gt;&lt;br /&gt;
'''Note'''&lt;br /&gt;
&lt;br /&gt;
Inline styles will almost always render more quickly than styles in an internal or external stylesheet; stylesheets and classes add rendering time due to look up and parsing.&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Presentation Attributes ===&lt;br /&gt;
&lt;br /&gt;
Although the overwhelming majority of your SVG documents will use styles for presentation information, SVG does permit you to specify this information in the form of presentation attributes. Instead of saying:&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;circle cx=&amp;quot;10&amp;quot; cy=&amp;quot;10&amp;quot; r=&amp;quot;5&amp;quot;&lt;br /&gt;
     style=&amp;quot;fill: red; stroke:black; stroke-width: 2;&amp;quot;/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
You may write each of the properties as an attribute:&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;circle cx=&amp;quot;10&amp;quot; cy=&amp;quot;10&amp;quot; r=&amp;quot;5&amp;quot;&lt;br /&gt;
     fill=&amp;quot;red&amp;quot; stroke=&amp;quot;black&amp;quot; stroke-width=&amp;quot;2&amp;quot;/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If you are thinking that this is mixing structure and presentation, you are right. Presentation attributes do come in handy, though, when you are creating SVG documents by converting an XML data source to SVG, as you will see in [[SVG Essentials/Generating SVG|Chapter 12]]. In these cases it can be easier to create individual attributes for each presentation property than to create the contents of a single &amp;lt;tt&amp;gt;style&amp;lt;/tt&amp;gt; attribute. You may also need to use presentation attributes if the environment in which you will be placing your SVG cannot support stylesheets.&lt;br /&gt;
&lt;br /&gt;
Presentation attributes are at the very bottom of the priority list. Any style specification coming from an inline, internal, or external stylesheet will override a presentation attribute. In the following SVG document, the circle will be filled in red, not green.&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;nowiki&amp;gt;&lt;br /&gt;
&amp;lt;svg width=&amp;quot;200&amp;quot; height=&amp;quot;200&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;defs&amp;gt;&lt;br /&gt;
    &amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;&amp;lt;![CDATA[&lt;br /&gt;
        circle { fill: red; }&lt;br /&gt;
    ]]&amp;gt;&amp;lt;/style&amp;gt;&lt;br /&gt;
    &amp;lt;/defs&amp;gt;&lt;br /&gt;
    &amp;lt;circle cx=&amp;quot;20&amp;quot; cy=&amp;quot;20&amp;quot; r=&amp;quot;15&amp;quot; fill=&amp;quot;green&amp;quot;/&amp;gt;&lt;br /&gt;
&amp;lt;/svg&amp;gt;&amp;lt;/nowiki&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Again, we emphasize that using &amp;lt;tt&amp;gt;style&amp;lt;/tt&amp;gt; attributes or stylesheets should always be your first choice. Stylesheets let you apply a complex series of fill and stroke characteristics to all occurrences of certain elements within a document without having to duplicate the information into each element, as presentation attributes would require. The power and flexibility of stylesheets allow you to make significant changes in the look and feel of multiple documents with a minimum of effort.&lt;br /&gt;
&lt;br /&gt;
== Document Structure -- Grouping and Referencing Objects ==&lt;br /&gt;
&lt;br /&gt;
While it is certainly possible to define any drawing as an undifferentiated list of shapes and lines, most non-abstract art consists of groups of shapes and lines that form recognizable named objects. SVG has elements that let you do this sort of grouping to make your documents more structured and understandable.&lt;br /&gt;
&lt;br /&gt;
=== The g Element ===&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;tt&amp;gt;&amp;lt;g&amp;gt;&amp;lt;/tt&amp;gt; element gathers all of its child elements as a group, and often has an &amp;lt;tt&amp;gt;id&amp;lt;/tt&amp;gt; attribute to give that group a unique name. Furthermore, each group may have its own &amp;lt;tt&amp;gt;&amp;lt;title&amp;gt;&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;&amp;lt;desc&amp;gt;&amp;lt;/tt&amp;gt; to identify it for text-based XML applications or to aid in accessibility for visually-impaired users. In addition to the conceptual clarity that comes from the ability to group and document objects, the &amp;lt;tt&amp;gt;&amp;lt;g&amp;gt;&amp;lt;/tt&amp;gt; element also provides notational convenience. Any styles you specify in the starting &amp;lt;tt&amp;gt;&amp;lt;g&amp;gt;&amp;lt;/tt&amp;gt; tag will apply to all the child elements in the group. In [[SVG Essentials/Document Structure#svgess-CHP-4-EX-5|Example 4-5]], this saves us from having to duplicate the &amp;lt;tt&amp;gt;style=&amp;quot;fill:none; stroke:black;&amp;quot;&amp;lt;/tt&amp;gt; on every element shown in [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-4|Figure 4-4]]. It is also possible to nest groups within one another, although we won't show any examples of this until [[SVG Essentials/Transforming the Coordinate System|Chapter 5]].&lt;br /&gt;
&lt;br /&gt;
You may think of the &amp;lt;tt&amp;gt;&amp;lt;g&amp;gt;&amp;lt;/tt&amp;gt; element as analogous to the ''Group Objects'' function in programs such as Adobe Illustrator. It also serves a similar function to the concept of ''layers'' in such programs; a layer is also a grouping of related objects.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-5&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-5. Simple use of the g element'''&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;svg width=&amp;quot;240px&amp;quot; height=&amp;quot;240px&amp;quot; viewBox=&amp;quot;0 0 240 240&amp;quot;&amp;gt;&lt;br /&gt;
 &amp;lt;title&amp;gt;Grouped Drawing&amp;lt;/title&amp;gt;&lt;br /&gt;
 &amp;lt;desc&amp;gt;Stick-figure drawings of a house and people&amp;lt;/desc&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;house&amp;quot; style=&amp;quot;fill: none; stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;House with door&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;rect x=&amp;quot;6&amp;quot; y=&amp;quot;50&amp;quot; width=&amp;quot;60&amp;quot; height=&amp;quot;60&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;6 50, 36 9, 66 50&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;36 110, 36 80, 50 80, 50 110&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;man&amp;quot; style=&amp;quot;fill: none; stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;Male human&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;circle cx=&amp;quot;85&amp;quot; cy=&amp;quot;56&amp;quot; r=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;line x1=&amp;quot;85&amp;quot; y1=&amp;quot;66&amp;quot; x2=&amp;quot;85&amp;quot; y2=&amp;quot;80&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;76 104, 85 80, 94 104&amp;quot; /&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;76 70, 85 76, 94 70&amp;quot; /&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;woman&amp;quot; style=&amp;quot;fill: none; stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;Female human&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;circle cx=&amp;quot;110&amp;quot; cy=&amp;quot;56&amp;quot; r=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;110 66, 110 80, 100 90, 120 90, 110 80&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;line x1=&amp;quot;104&amp;quot; y1=&amp;quot;104&amp;quot; x2=&amp;quot;108&amp;quot; y2=&amp;quot;90&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;line x1=&amp;quot;112&amp;quot; y1=&amp;quot;90&amp;quot; x2=&amp;quot;116&amp;quot; y2=&amp;quot;104&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;101 70, 110 76, 119 70&amp;quot; /&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &amp;lt;/svg&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-4&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-4. Grouped stick figure drawing'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt62.png|Grouped stick figure drawing]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== The use Element ===&lt;br /&gt;
&lt;br /&gt;
Complex graphics often have repeated elements. For example, a product brochure may have the company logo at the upper left and lower right of each page. If you were drawing the brochure with a graphic design program, you'd draw the logo once, group all its elements together, then copy and paste them to the other location. The SVG &amp;lt;tt&amp;gt;&amp;lt;use&amp;gt;&amp;lt;/tt&amp;gt; element gives you an analogous copy-and-paste ability with a group that you've defined with &amp;lt;tt&amp;gt;&amp;lt;g&amp;gt;&amp;lt;/tt&amp;gt;.&lt;br /&gt;
&lt;br /&gt;
Once you have defined a group of graphic objects, you can display them again with the &amp;lt;tt&amp;gt;&amp;lt;use&amp;gt;&amp;lt;/tt&amp;gt; tag. To specify the group you wish to reuse, give its URI in an &amp;lt;tt&amp;gt;xlink:href&amp;lt;/tt&amp;gt; attribute, and specify the &amp;lt;tt&amp;gt;x&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;y&amp;lt;/tt&amp;gt; location where the group's (0, 0) point should be moved to. (We will see another way to achieve this effect in [[SVG Essentials/Transforming the Coordinate System|Chapter 5]], in [[SVG Essentials/Transforming the Coordinate System#The translate Transformation|Section 5.1]].) So, to create another house and set of people as shown in [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-5|Figure 4-5]], you'd put these lines just before the closing &amp;lt;tt&amp;gt;&amp;lt;/svg&amp;gt;&amp;lt;/tt&amp;gt; tag:&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#house&amp;quot; x=&amp;quot;70&amp;quot; y=&amp;quot;100&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#woman&amp;quot; x=&amp;quot;-80&amp;quot; y=&amp;quot;100&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#man&amp;quot; x=&amp;quot;-30&amp;quot; y=&amp;quot;100&amp;quot;/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-5&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-5. Re-use of grouped stick figures'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt64.png|Re-use of grouped stick figures]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== The defs Element ===&lt;br /&gt;
&lt;br /&gt;
You may have noticed some drawbacks with the preceding example:&lt;br /&gt;
&lt;br /&gt;
* The math for deciding where to place the re-used man and woman requires you to know the positions of the originals and use that as your base, rather than using a simple number like zero.&lt;br /&gt;
* The fill and stroke color for the house were established by the original, and can't be overriden by the &amp;lt;tt&amp;gt;&amp;lt;use&amp;gt;&amp;lt;/tt&amp;gt;. This means you can't make a row of multi-colored houses.&lt;br /&gt;
* The document draws all three groups: the woman, the man, and the house. You can't &amp;quot;store them away&amp;quot; and draw only a set of houses or only a set of people.&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;tt&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;/tt&amp;gt; element solves these problems. By putting the grouped objects between the beginning and ending &amp;lt;tt&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;/tt&amp;gt; tags, you instruct SVG to define them without displaying them. The SVG specification, in fact, recommends that you put all objects that you wish to re-use within a &amp;lt;tt&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;/tt&amp;gt; element so that SVG viewers working in a streaming environment can process data more efficiently. In [[SVG Essentials/Document Structure#svgess-CHP-4-EX-6|Example 4-6]], the house, man, and woman are defined so that their upper left corner is at (0, 0), and the house is not given any fill color. Since the groups will be within the &amp;lt;tt&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;/tt&amp;gt; element, they will not be drawn on the screen right away, and will serve as a &amp;quot;template&amp;quot; for future use. We have also constructed another group named &amp;lt;tt&amp;gt;couple&amp;lt;/tt&amp;gt;, which, in turn, &amp;lt;tt&amp;gt;&amp;lt;use&amp;gt;&amp;lt;/tt&amp;gt;s the &amp;lt;tt&amp;gt;man&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;woman&amp;lt;/tt&amp;gt; groups. (Note that the bottom half of [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-6|Figure 4-6]] can't use &amp;lt;tt&amp;gt;couple&amp;lt;/tt&amp;gt;, since the woman is to the left of the man.)&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-6&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-6. Example of the defs element'''&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;svg width=&amp;quot;240px&amp;quot; height=&amp;quot;240px&amp;quot; viewBox=&amp;quot;0 0 240 240&amp;quot;&amp;gt;&lt;br /&gt;
 &amp;lt;title&amp;gt;Grouped Drawing&amp;lt;/title&amp;gt;&lt;br /&gt;
 &amp;lt;desc&amp;gt;Stick-figure drawings of a house and people&amp;lt;/desc&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;defs&amp;gt;&lt;br /&gt;
 &amp;lt;g id=&amp;quot;house&amp;quot; style=&amp;quot;stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;House with door&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;rect x=&amp;quot;0&amp;quot; y=&amp;quot;41&amp;quot; width=&amp;quot;60&amp;quot; height=&amp;quot;60&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;0 41, 30 0, 60 41&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;30 101, 30 71, 44 71, 44 101&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;man&amp;quot; style=&amp;quot;fill: none; stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;Male human&amp;lt;/desc&amp;gt; &lt;br /&gt;
     &amp;lt;circle cx=&amp;quot;10&amp;quot; cy=&amp;quot;10&amp;quot; r=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;line x1=&amp;quot;10&amp;quot; y1=&amp;quot;20&amp;quot; x2=&amp;quot;10&amp;quot; y2=&amp;quot;44&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;1 58, 10 44, 19 58&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;1 24, 10 30, 19 24&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;woman&amp;quot; style=&amp;quot;fill: none; stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;Female human&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;circle cx=&amp;quot;10&amp;quot; cy=&amp;quot;10&amp;quot; r=&amp;quot;10&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;10 20, 10 34, 0 44, 20 44, 10 34&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;line x1=&amp;quot;4&amp;quot; y1=&amp;quot;58&amp;quot; x2=&amp;quot;8&amp;quot; y2=&amp;quot;44&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;line x1=&amp;quot;12&amp;quot; y1=&amp;quot;44&amp;quot; x2=&amp;quot;16&amp;quot; y2=&amp;quot;58&amp;quot;/&amp;gt;&lt;br /&gt;
     &amp;lt;polyline points=&amp;quot;1 24, 10 30, 19 24&amp;quot; /&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 '''&amp;lt;g id=&amp;quot;couple&amp;quot;&amp;gt;'''&lt;br /&gt;
 '''    &amp;lt;desc&amp;gt;Male and female human&amp;lt;/desc&amp;gt;'''&lt;br /&gt;
 '''    &amp;lt;use xlink:href=&amp;quot;#man&amp;quot; x=&amp;quot;0&amp;quot; y=&amp;quot;0&amp;quot;/&amp;gt;'''&lt;br /&gt;
 '''    &amp;lt;use xlink:href=&amp;quot;#woman&amp;quot; x=&amp;quot;25&amp;quot; y=&amp;quot;0&amp;quot;/&amp;gt;'''&lt;br /&gt;
 '''&amp;lt;/g&amp;gt;'''&lt;br /&gt;
 &amp;lt;/defs&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;amp;lt;!-- make use of the defined groups --&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#house&amp;quot; x=&amp;quot;0&amp;quot; y=&amp;quot;0&amp;quot; style=&amp;quot;fill: #cfc;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#couple&amp;quot; x=&amp;quot;70&amp;quot; y=&amp;quot;40&amp;quot;/&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#house&amp;quot; x=&amp;quot;120&amp;quot; y=&amp;quot;0&amp;quot; style=&amp;quot;fill: #99f;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#couple&amp;quot; x=&amp;quot;190&amp;quot; y=&amp;quot;40&amp;quot;/&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#woman&amp;quot; x=&amp;quot;0&amp;quot; y=&amp;quot;145&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#man&amp;quot; x=&amp;quot;25&amp;quot; y=&amp;quot;145&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#house&amp;quot; x=&amp;quot;65&amp;quot; y=&amp;quot;105&amp;quot; style=&amp;quot;fill: #c00;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/svg&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-6&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-6. Result of using groups within defs'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt65.png|Result of using groups within defs]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;tt&amp;gt;&amp;lt;use&amp;gt;&amp;lt;/tt&amp;gt; element is not restricted to using objects from the same file in which it occurs; the &amp;lt;tt&amp;gt;xlink:href&amp;lt;/tt&amp;gt; attribute may specify any valid file or URI. This makes it possible to collect a set of common elements in one SVG file and use them selectively from other files. For example, you could create a file named &amp;lt;tt&amp;gt;identity.svg&amp;lt;/tt&amp;gt; that contains all of the identity graphics that your organization uses:&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;g id=&amp;quot;company_mascot&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;amp;lt;!-- drawing of company mascot --&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;company_logo&amp;quot; style=&amp;quot;stroke: none;&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;polygon points=&amp;quot;0 20, 20 0, 40 20, 20 40&amp;quot;&lt;br /&gt;
       style=&amp;quot;fill: #696;&amp;quot;/&amp;gt;&lt;br /&gt;
    &amp;lt;rect x=&amp;quot;7&amp;quot; y=&amp;quot;7&amp;quot; width=&amp;quot;26&amp;quot; height=&amp;quot;26&amp;quot;&lt;br /&gt;
       style=&amp;quot;fill: #c9c;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;g id=&amp;quot;partner_logo&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;amp;lt;!-- drawing of company partner's logo --&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
&lt;br /&gt;
and then refer to it with:&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;identity.svg#company_logo&amp;quot; x=&amp;quot;200&amp;quot; y=&amp;quot;200&amp;quot;/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== The symbol Element ===&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;tt&amp;gt;&amp;lt;symbol&amp;gt;&amp;lt;/tt&amp;gt; element provides another way of grouping elements. Unlike the &amp;lt;tt&amp;gt;&amp;lt;g&amp;gt;&amp;lt;/tt&amp;gt; element, a &amp;lt;tt&amp;gt;&amp;lt;symbol&amp;gt;&amp;lt;/tt&amp;gt; is never displayed, so you don't have to enclose it in a &amp;lt;tt&amp;gt;&amp;lt;defs&amp;gt;&amp;lt;/tt&amp;gt; specification. However, it is customary to do so, since a symbol really is something you're defining for later use. Additionally, symbols can specify &amp;lt;tt&amp;gt;viewBox&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;preserveAspectRatio&amp;lt;/tt&amp;gt; attributes, so that a symbol can fit into the viewport established by the &amp;lt;tt&amp;gt;use&amp;lt;/tt&amp;gt; element. [[SVG Essentials/Document Structure#svgess-CHP-4-EX-7|Example 4-7]] shows that the &amp;lt;tt&amp;gt;width&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;height&amp;lt;/tt&amp;gt; are ignored for a simple group (the top two octagons), but are used when displaying a symbol. The edges of the lower right octagon in [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-7|Figure 4-7]] are cut off because the &amp;lt;tt&amp;gt;preserveAspectRatio&amp;lt;/tt&amp;gt; has been set to &amp;lt;tt&amp;gt;slice&amp;lt;/tt&amp;gt;.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-7&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-7. Groups versus symbols'''&lt;br /&gt;
&lt;br /&gt;
 &amp;lt;svg width=&amp;quot;200px&amp;quot; height=&amp;quot;200px&amp;quot; viewBox=&amp;quot;0 0 200 200&amp;quot;&amp;gt;&lt;br /&gt;
 &amp;lt;title&amp;gt;Symbols vs. groups&amp;lt;/title&amp;gt;&lt;br /&gt;
 &amp;lt;desc&amp;gt;Use&amp;lt;/desc&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;defs&amp;gt;&lt;br /&gt;
 &amp;lt;g id=&amp;quot;octagon&amp;quot; style=&amp;quot;stroke: black;&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;Octagon as group&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;polygon points=&amp;quot;&lt;br /&gt;
         36 25, 25 36, 11 36, 0 25,&lt;br /&gt;
         0 11, 11 0, 25 0, 36 11&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/g&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;symbol id=&amp;quot;sym-octagon&amp;quot; style=&amp;quot;stroke: black;&amp;quot;&lt;br /&gt;
    preserveAspectRatio=&amp;quot;xMidYMid slice&amp;quot; viewBox=&amp;quot;0 0 40 40&amp;quot;&amp;gt;&lt;br /&gt;
     &amp;lt;desc&amp;gt;Octagon as symbol&amp;lt;/desc&amp;gt;&lt;br /&gt;
     &amp;lt;polygon points=&amp;quot;&lt;br /&gt;
         36 25, 25 36, 11 36, 0 25,&lt;br /&gt;
         0 11, 11 0, 25 0, 36 11&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/symbol&amp;gt;&lt;br /&gt;
 &amp;lt;/defs&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#octagon&amp;quot; x=&amp;quot;40&amp;quot; y=&amp;quot;40&amp;quot; width=&amp;quot;30&amp;quot; height=&amp;quot;30&amp;quot;&lt;br /&gt;
 	style=&amp;quot;fill: #c00;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#octagon&amp;quot; x=&amp;quot;80&amp;quot; y=&amp;quot;40&amp;quot; width=&amp;quot;40&amp;quot; height=&amp;quot;60&amp;quot;&lt;br /&gt;
 	style=&amp;quot;fill: #cc0;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#sym-octagon&amp;quot; x=&amp;quot;40&amp;quot; y=&amp;quot;80&amp;quot; width=&amp;quot;30&amp;quot; height=&amp;quot;30&amp;quot;&lt;br /&gt;
     style=&amp;quot;fill: #cfc;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;use xlink:href=&amp;quot;#sym-octagon&amp;quot; x=&amp;quot;80&amp;quot; y=&amp;quot;80&amp;quot; width=&amp;quot;40&amp;quot; height=&amp;quot;60&amp;quot;&lt;br /&gt;
     style=&amp;quot;fill: #699;&amp;quot;/&amp;gt;&lt;br /&gt;
 &amp;lt;/svg&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-7&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-7. Groups versus symbols'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt68.png|Groups versus symbols]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== The image Element ===&lt;br /&gt;
&lt;br /&gt;
While &amp;lt;tt&amp;gt;&amp;lt;use&amp;gt;&amp;lt;/tt&amp;gt; lets you re-use a portion of an SVG file, the &amp;lt;tt&amp;gt;&amp;lt;image&amp;gt;&amp;lt;/tt&amp;gt; element includes an entire SVG or raster file. If you are including an SVG file, the &amp;lt;tt&amp;gt;x&amp;lt;/tt&amp;gt;, &amp;lt;tt&amp;gt;y&amp;lt;/tt&amp;gt;, &amp;lt;tt&amp;gt;width&amp;lt;/tt&amp;gt;, and &amp;lt;tt&amp;gt;height&amp;lt;/tt&amp;gt; attributes establish the viewport in which the referenced file will be drawn; if you're including a raster file, it will be scaled to fit the rectangle that the attributes specify. You can currently include either JPEG or PNG raster files. [[SVG Essentials/Document Structure#svgess-CHP-4-EX-8|Example 4-8]] shows how to include a JPEG image with SVG; the result is in [[SVG Essentials/Document Structure#svgess-CHP-4-FIG-8|Figure 4-8]].&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-FIG-8&amp;quot;&amp;gt;&lt;br /&gt;
'''Figure 4-8. JPEG image included in an SVG file'''&lt;br /&gt;
&lt;br /&gt;
[[Image:SVG Essentials/I_4_tt69.png|JPEG image included in an SVG file]]&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div id=&amp;quot;svgess-CHP-4-EX-8&amp;quot;&amp;gt;&lt;br /&gt;
'''Example 4-8. Use of the image element'''&lt;br /&gt;
&lt;br /&gt;
     &lt;br /&gt;
 &amp;lt;svg width=&amp;quot;310px&amp;quot; height=&amp;quot;310px&amp;quot; viewBox=&amp;quot;0 0 310 310&amp;quot;&amp;gt;&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;ellipse cx=&amp;quot;154&amp;quot; cy=&amp;quot;154&amp;quot; rx=&amp;quot;150&amp;quot; ry=&amp;quot;120&amp;quot; style=&amp;quot;fill: #999999;&amp;quot;/&amp;gt;     '''[1]'''&lt;br /&gt;
 &amp;lt;ellipse cx=&amp;quot;152&amp;quot; cy=&amp;quot;152&amp;quot; rx=&amp;quot;150&amp;quot; ry=&amp;quot;120&amp;quot; style=&amp;quot;fill: #cceeff;&amp;quot;/&amp;gt;     '''[2]'''&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;image xlink:href=&amp;quot;kwanghwamun.jpg&amp;quot;     '''[3]'''&lt;br /&gt;
     x=&amp;quot;72&amp;quot; y=&amp;quot;92&amp;quot;     '''[4]'''&lt;br /&gt;
     width=&amp;quot;160&amp;quot; height=&amp;quot;120&amp;quot;/&amp;gt;     '''[5]'''&lt;br /&gt;
 &lt;br /&gt;
 &amp;lt;/svg&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;tt&amp;gt;'''[1]'''&amp;lt;/tt&amp;gt; Create a gray ellipse to simulate a drop shadow.&amp;lt;ref&amp;gt;We'll see another way to create a drop shadow in [[SVG Essentials/Filters|Chapter 10]] in [[SVG Essentials/Filters#Creating a Drop Shadow|Section 10.2]].&amp;lt;/ref&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;tt&amp;gt;'''[2]'''&amp;lt;/tt&amp;gt; Create the main blue ellipse. Since it occurs after the gray ellipse, it is displayed above that object.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;tt&amp;gt;'''[3]'''&amp;lt;/tt&amp;gt; Specify the URI of the file to include.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;tt&amp;gt;'''[4]'''&amp;lt;/tt&amp;gt; Specify the upper left corner of the image.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;tt&amp;gt;'''[5]'''&amp;lt;/tt&amp;gt; Specify the width and height to which the image should be scaled. If these aren't in the same aspect ratio as the original picture, it will appear stretched or squashed.&lt;br /&gt;
== Notes ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;references/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Docbook2Wiki</name></author>	</entry>

	</feed>