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 ... |
Get Designing SVG Web Graphics now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
