Beispiel:SVG-Sprite-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:Grundlayout.css">
<title>SVG-Sprite - 4</title>
<style type="text/css">
a { color: steelblue; }
a:focus, a:hover { color: red; }
svg {
width: 3em;
height: 1em;
fill: currentColor;
}
.wheel {fill:black;}
aside {
background: #dfac20;
color:white;
padding:1em;
width: 10em;
border: medium solid #866a00;
}
body {
font-size: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
}
h1, svg {
grid-column: 1/-1;
}
</style>
</head>
<body>
<h1>SVG-Sprite - 4</h1>
<svg>
<symbol id="house" viewBox="0 0 80 67">
<path d="M40,0 0,35 h11 v32 h21 V43 h16 v24 h21 V35 h11 z"/>
</symbol>
<symbol id="car" viewBox="0 0 42 22">
<path d="M 0,17 V 8 L 7,6 11,0 h 15 l 6,7 10,1 v 9 z"/>
<circle class="wheel" cx="10" cy="17" r="5"/>
<circle class="wheel" cx="32" cy="17" r="5"/>
</symbol>
<symbol id="boat" viewBox="0 0 203 193">
<g stroke-width="0">
<path fill="red" d="M 90,2 C 64,3 64,17 45,18 c 0,0 19,11 45,4 3,-3 -8,-11 0,-20"/>
<path d="M 201,130 C 124,173 0,169 0,169 c 3,17 15,24 15,24 h 158 c 15,-17 34,-47 28,-63"/>
</g>
<g fill="#fff" stroke="#888" stroke-width="3">
<path d="m 101,3 c 0,0 28,81 4,148 45,-32 93,-30 93,-30 0,0 -7,-84 -97,-118 z"/>
<path d="m 95,30 c 0,0 -24,72 -75,119 0,0 60,6 73,2 18,-56 2,-121 2,-121 z"/>
</g>
</symbol>
</svg>
<article>
<h2>
Home
<svg>
<use href="#house"/>
</svg>
</h2>
<p>
<a href="">
sweet home
<svg>
<use href="#house"/>
</svg>
</a></p>
<p>
<a href="">
car
<svg>
<use href="#car"/>
</svg>
</a>
</p>
<p>
<a href="">
boat
<svg>
<use href="#boat"/>
</svg>
</a>
</p>
</article>
<aside>
<h2>
Home
<svg>
<use href="#house"/>
</svg>
</h2>
<ul>
<li><a href="">
Mein Haus
<svg>
<use href="#house"/>
</svg>
</a></li>
<li><a href="">
mein Boot
<svg>
<use href="#boat"/>
</svg>
</a></li>
</a></li>
<li><a href="">
mein Auto
<svg>
<use href="#car"/>
</svg>
</a></li>
</ul>
</aside>
</body>
</html>
