<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- As a file in a folder, no different from GIF/JPG/PNGs. -->
<img src="arrow.svg">
<!-- But we can instead include its contents, and then style them in CSS! -->
<svg width="48" height="40" viewBox="0 0 48 40" xmlns="http://www.w3.org/2000/svg">
<line x1="2" y1="20" x2="44" y2="20" stroke="black" />
<polyline points="26,4 44,20 26,36" fill="none" stroke="black" />
</svg>
</body>
</html>
index.html
body {
padding: 20px;
display: grid; /* Just for some separation. */
row-gap: 20px;
}
svg {
background-color: deepskyblue; /* Just to see the edges! */
line {
stroke: tomato;
stroke-width: 4;
}
polyline {
fill: gold;
stroke: none; /* Override the attribute in the code. */
}
}