1<html>
2<body>
3
4<h1>My first SVG</h1>
5
6<svg width="100" height="100">
7 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
8</svg>
9
10</body>
11</html>
1//In SVG, to get a higher larger Z index you should move the element down in the DOM tree
2$('g.element').remove().appendTo('svg'); // with jquery
1<!-- external svg -->
2<img src="mySvgImage.svg" />
3
4<!-- internal svg example -->
5<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
6 <rect width="100" height="100" x="50" y="50"/>
7</svg>
1<svg width="100%" height="100%" viewBox="0 0 100 100"
2 xmlns="http://www.w3.org/2000/svg">
3 <style>
4 /* <![CDATA[ */
5 circle:hover {
6 fill: orange;
7 stroke: black;
8 stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
9 }
10 /* ]]> */
11 </style>
12
13 <circle cx="50" cy="50" r="40" />
14</svg>
15
1<svg width="100" height="100"> <!-- Draws a circle -->
2 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
3</svg>
4<svg width="400" height="100"> <!-- Draws a rectangle -->
5 <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
6</svg>
7<svg width="300" height="200"> <!-- Draws a star -->
8 <polygon points="100,10 40,198 190,78 10,78 160,198"
9 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
10</svg>