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:SELFHTML-Beispiel-Grundlayout.css">
<title>SVG-Sprite - 4</title>
<style>
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 96 96">
<path d="M40,13 L1,48 H12 V80 H32 V56 H48 V80 H68 V48 H79z"/>
</symbol>
<symbol id="car" viewBox="0 0 40 25">
<path id="body" d="M0,20 v-7 h7 l7,-7 h14 l7,7 h7 v7z" />
<circle class="wheel" cx="10" cy="20" r="5" />
<circle class="wheel" cx="32" cy="20" r="5" />
</symbol>
<symbol id="boat" viewBox="0 0 960 960">
<g transform="translate(0.0,511.000000) scale(0.1,-0.1)">
<path fill="red" d="M4058.4,4971.4c-167.3-42.6-279.9-112.6-596.2-355.9C3158,4381.3,2975.5,4287,2723,4241.4l-200.8-36.5l136.9-100.4c307.2-228.1,784.8-359,1174.2-325.5c261.6,21.3,596.2,124.7,672.3,206.9c48.7,54.8,48.7,70-15.2,322.4c-79.1,304.2-82.1,371.1-21.3,538.4c33.5,91.3,33.5,124.7,6.1,143C4420.4,5023.1,4216.6,5014,4058.4,4971.4z"/>
<path fill="white" stroke="blue" stroke-width="100" d="M5007.5,4402.6C5238.6,3344,5354.2,2635.3,5433.3,1820c51.7-547.5,51.7-2354.4,0-2859.4c-48.7-465.4-164.3-1162-246.4-1472.3l-57.8-231.2l173.4,139.9c1079.9,870,2226.7,1326.3,3355.2,1332.4l416.7,3.1l18.2,246.4c12.2,136.9,6.1,438-12.2,666.2c-194.7,2324-1444.9,3957.5-3592.5,4684.5c-158.2,54.7-334.6,109.5-392.4,121.7C4998.3,4472.6,4995.3,4469.5,5007.5,4402.6z"/><path fill="white" stroke="blue" stroke-width="100" d="M4578.5,2784.3c-602.3-1843.4-1584.8-3659.4-2689-4973.5c-115.6-136.9-206.9-255.5-200.8-261.6c21.3-21.3,681.4-139.9,939.9-170.3c632.7-76,1514.9-21.3,1925.5,118.6c155.1,54.8,158.2,57.8,194.7,219c66.9,282.9,188.6,1180.3,225.1,1648.7c51.7,666.2,18.3,2129.3-60.8,2716.4c-57.8,431.9-173.4,1073.8-194.7,1095.1C4715.4,3182.8,4651.6,3006.4,4578.5,2784.3z"/>
<path d="M8864.6-2034c-1006.9-611.4-2384.8-991.7-4289.1-1183.3c-644.9-63.9-2476.1-91.3-3206.2-45.6c-316.4,18.3-581,27.4-590.1,18.3c-39.6-39.5,60.8-438,161.2-641.9c76-158.2,161.2-267.7,292-386.3l182.5-167.3l-228.1-21.3l-231.2-21.3v-149v-149.1h146c237.3,0,547.5,82.1,778.7,206.8l216,115.6l167.3-100.4c459.3-276.8,1031.2-282.9,1530.1-15.2l219,115.6l158.2-97.3c255.5-152.1,471.5-209.9,800-206.9c319.4,0,614.5,85.2,833.5,231.2l115.6,79.1l139.9-88.2c483.7-298.1,1149.8-304.2,1615.3-15.2l167.3,103.4l142.9-88.2c206.9-127.8,465.4-209.9,736.1-231.2l234.2-18.2v152.1v152.1l-188.6,21.3c-106.5,9.1-243.4,33.4-304.2,48.7l-112.6,33.4l152.1,188.6c377.2,471.5,727,1417.5,727,1974.2c0,179.5-54.7,331.5-115.6,325.5C9101.8-1894.1,8989.3-1958,8864.6-2034z"/></g>
</symbol>
</svg>
<article>
<h2>
Home
<svg>
<use href="#house"/>
</svg>
</h2>
<p>
<a href="">
sweet home
<svg>
<use href="#house"/>
</svg>
</a>
<a href="">
car
<svg>
<use href="#car"/>
</svg>
</a>
<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>
