• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 2. SVG Document Overview > Nested SVG Elements

Nested SVG Elements

A <svg> element is like other SVG elements in that it can be nested within a <svg> element containing the SVG document. For example, to nest a <svg> element that is 100 x 100 pixels inside a <svg> element that is 400 pixels wide x 300 pixels high, you could use this code:

Listing 2.1. (NestedSVG.svg)

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/PR-SVG-20010719/ 
       DTD/svg10.dtd"> 
<svg width="500" height="400"> 
<svg x="100" y="100" width="300" height="200"> 
<rect x="1" y="1" width="298" height="198" 
style="stroke:red; stroke-width:2; 
fill:none;"/> 
<rect x="50" y="50" width="200" height="100" 
style="fill:#EEEEEE; 
stroke:blue;"/> 
</svg> <!-- The end tag of the nested <svg> element --> 
</svg> <!-- The end tag of the outer <svg> element --> 


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint