Embedded Files
Rectangle (original)
Rectangle (original)
<!DOCTYPE html>
<html>
<body>
<h2>A rectangle with rounded corners</h2>
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="150" x="10" y="10" rx="20" ry="20" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Rectangle (Modified)
Rectangle (Modified)
<!DOCTYPE html>
<html>
<body>
<h2>A rectangle primitive</h2>
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="50" x="10" y="10" rx="20" ry="20" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Circle (original)
Circle (original)
<!DOCTYPE html>
<html>
<body>
<h2>A circle with opacity</h2>
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" stroke="green" stroke-width="3" fill="red" opacity="0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Circle (Modified)
Circle (Modified)
<!DOCTYPE html>
<html>
<body>
<h2>A circle with opacity</h2>
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" stroke="purple" stroke-width="3" fill="blue" opacity="0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Elipse (original)
Elipse (original)
<!DOCTYPE html>
<html>
<body>
<h2>A white ellipse inside a yellow ellipse</h2>
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Elipse (Modified)
Elipse (Modified)
<!DOCTYPE html>
<html>
<body>
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="230" ry="30" fill="red" />
<ellipse cx="220" cy="50" rx="190" ry="20" fill="pink" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Line (original)
Line (original)
<!DOCTYPE html>
<html>
<body>
<h2>A thick vertical line</h2>
<svg height="210" width="300" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Line (Modified)
Line (Modified)
<!DOCTYPE html>
<html>
<body>
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="230" ry="30" fill="red" />
<ellipse cx="220" cy="50" rx="190" ry="20" fill="pink" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Polygon (original)
Polygon (original)
<!DOCTYPE html>
<html>
<body>
<h2>A polygon formed as a star</h2>
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Polygon (Modified)
Polygon (Modified)
<!DOCTYPE html>
<html>
<body>
<h2>A polygon formed as a star</h2>
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:blue;stroke:black;stroke-width:5;fill-rule:even;"/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Page updated
Google Sites
Report abuse