当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用z-index属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。
如果指定一个元素没有填充色（使用fill=”none”"），那么在它下面的各项会显现出来，就象您在这里看到的：
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>Overlapping shapes</desc>
<g>
<ellipse cx="125" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="125" cy="50" r="25" fill="dodgerblue" />
<circle cx="125" cy="50" r="10" fill="black" />
<ellipse cx="250" cy="50" rx="50" ry="25"
fill="none" stroke="black" />
<circle cx="250" cy="50" r="25" fill="dodgerblue" />
<circle cx="250" cy="50" r="10" fill="black" />
<polygon points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="none" stroke="purple" stroke-width="4"/>
<polygon points="190,50 310,50 310,75, 275,100
225,100 190,75"
fill="none" stroke="purple" stroke-width="4"/>
<line x1="65" y1="50" x2="310" y2="50"
stroke="plum" stroke-width="2"/>
</g>
</svg>
请注意每个元素会覆盖在它之前出现的元素。