Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding SVG Into HTML Pages</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>
Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create a Line with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>
</body>
</html>
Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create a Rectangle with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>
Example 4
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create a Circle with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>
</body>
</html>
Example 5
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Render Text with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</text>
</svg>
</body>
</html>
Example 6
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rotate and Render Text with HTML5 SVG</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of useful information.
</tspan>
</text>
</svg>
</body>
</html>