内联 SVG

Created: November-22, 2018

SVG 可以直接写入 HTML 文档。可以使用 CSS 和 JavaScript 对内联 SVG 进行样式设置和操作。

<body>
    <svg class="attention" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
        <path id="attention" d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-5,13l0,106q0,8,5,13t12,6l108,0q7,0,12,-6t5,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-122,0q-7,0,-14,6q-5,4,-5,12l9,255q0,5,6,9t13,3l103,0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-1,70q-10,17,-26,26t-35,10l-858,0q-18,0,-35,-10t-26,-26q-21,-35,-1,-70l429,-786q9,-17,26,-27t36,-10t36,10t27,27Z" />
    </svg>
</body>

然后可以使用相应的 CSS 类设置上面的内联 SVG：

.attention {
    fill: red;
    width: 50px;
    height: 50px;
}

结果如下：

StackOverflow 文档