O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required