code • SVG images - martindubenet/wed-dev-design GitHub Wiki
The best practice to integrate multiple SVG images into a site, especially if they are reused multiple times, is through the use of the <symbol> and <use> tags as described in this Mozilla documentation and that you can observe on the Google Business site (among others).
.shape {
position: relative;
width: 600px;
height: 300px;
clip-path: polygon(100% 0, 0 0, 0 100%);
background-color: black;
background: linear-gradient(315deg, #383938 0%, #010101 100%);
svg.img-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
}
svg#icon-example {
.hexagone {
fill: #383938;
}
.character-color {
fill: #fff;
}
}
<figure class="shape">
<svg class="img-container" role="img" aria-label="@Resources.Image.TriangleDescription">
<use xlink:href="#icon-example"></use>
</svg>
</figure>
…
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-example" viewbox="0 0 591.7 610" class="svg-symbol-icon icon-support">
<path class="character-color" d="M298.4 162.6c-45.1 0-73.1 19.8-95.2 54.7l42.5 32 .1-.1c15.9-20.4 25.5-32.3 48.6-32.3 16.2 0 36.3 10.4 36.3 26.2 0 11.9-9.8 18-25.9 27-18.7 10.5-43.4 23.5-43.4 56.2V360H325v-31.5c0-22.6 66.1-23.6 66.1-84.8-.1-46.1-47.9-81.1-92.7-81.1z" />
<path class="hexagone bg" d="M295.6 604.8L36.4 455.1V155.8L295.6 6.1l259.2 149.7v299.3L295.6 604.8zM102.9 416.7L295.6 528l192.8-111.3V194.2L295.6 82.9 102.9 194.2v222.5z" />
<path class="character-color" d="M296 387.9c-23.7 0-42.9 19.2-42.9 42.9 0 7.5 1.9 14.6 5.3 20.7l37.5 21.6 37.6-21.7c3.4-6.1 5.3-13.1 5.3-20.6.1-23.7-19.1-42.9-42.8-42.9z" />
<path class="hexagone left half" d="M295.7 528h-.1L102.9 416.7V194.2L295.6 82.9h.1V6.2l-.1-.1L36.4 155.8v299.3l259.2 149.7h.1z" />
</symbol>
</svg>
