Inline SVG

suggest change

SVG can be written directly into a HTML document. Inline SVG can be styled and manipulated using CSS and JavaScript.

    <svg class="attention" xmlns="" xmlns: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" />

The above inline SVG can then be styled using the corresponding CSS class:

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

The result looks like this:

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents