Last article demonstrate
how to Embed Scalable Vector Graphics(svg) in HTML5. svg image can be place as separated file, and link from HTML5.
To create a seperated svg file using normal text editor, add the name space in svg file.
mysvg.svg
<svg width="400" height="300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="300" height="200" stroke="red" stroke-width="5" fill="#00f" />
<rect x="100" y="100" width="200" height="100" stroke="green" stroke-width="5" fill="#555" />
<rect x="25" y="25" width="50" height="50" stroke="#000" stroke-width="5" fill="none"/>
<rect x="75" y="75" width="50" height="50" stroke="#fff" stroke-width="5" fill="none"/>
</svg>
To link to external svg file using <img> as normal.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg</title>
</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>
<p>Link svg from external file.</p>
<img src="mysvg.svg"></img>
</body>
</html>
No comments:
Post a Comment