Here a very short summary (by example) from "Icon System with SVG Sprites" of how to create an embedded icon in a HTML page using svg.
You can use all the following statements directly on the "body" of your html page for testing (it is better to specify the "style" block in the css section).
Example
Defining the Icon for Android-"Local" in svg:
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<defs>
<symbol id="icon-location" viewBox="0 0 16 24">
<title>Location</title>
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</symbol>
</defs>
</svg>
Specifying positioning of icons of class "icon":
<style>
[class^="icon"] {
width: 22px;
height: 22px;
position: relative;
top: 2px;
margin-right: 0px;
}
</style>
Using the elements from above:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<defs>
<symbol id="icon-location" viewBox="0 0 16 24">
<title>Location</title>
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</symbol>
</defs>
</svg>
<style>
[class^="icon"] {
width: 22px;
height: 22px;
position: relative;
top: 2px;
margin-right: 0px;
}
</style>
</head>
<body>
<svg class="icon-location">
<use xlink:href="#icon-location"/>
</svg>
in Android controls the Location <b>not only</b> the GPS.
</body>
</html>
Result:
No comments :
Post a Comment