Как использовать иконки SVG от W3.org на моем сайте?

Question

Я часто просматриваю элементы на веб-сайтах и ​​постоянно вижу такие вещи, как:

<svg width="13" height="13" viewBox="0 0 13 13" version="1.1"
xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" data-ui-test="undefined-svg">
<use x="0" y="0" width="13" height="13" xlink:href="/images/icons/icon_definitions.svg#heart"></use></svg>

Как я могу использовать такие значки на своем веб-сайте? Я попытался зайти на W3.org, чтобы узнать, как это сделать, но не очень понятно, как это сделать, если вообще смогу. Кто-нибудь хочет объяснить?

Answer 1

Вы увидите похожий код, если откроете любой файл .svg в каком-либо текстовом редакторе. Это просто двумерный вектор, описанный на языке XML, который можно напрямую использовать в HTML.

SVG - это язык на основе XML для описания двух трехмерная векторная и смешанная векторная / растровая графика. источник: w3.org / TR / SVG2 /

В качестве примера вы можете проверить iconsvg.xyz . Каждую из этих иконок можно загрузить как .svg, но вы можете увидеть их код прямо над кнопкой загрузки.