HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/z6Nq9-Q_BP6x/amnt.svg" alt="Dotted Line" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="grape" data-name="Grape"><path d="M756 477c-38 4-33 64 8 59 39-4 30-63-8-59z" fill="#021d5d" stroke="#021d5d"/><path d="M96 477c-38 5-30 64 8 60 39-5 30-64-8-60z" fill="#021d5d" stroke="#021d5d"/><path d="M261 477c-38 4-30 64 8 60 39-5 32-64-8-60z" fill="#021d5d" stroke="#021d5d"/><path d="M343 477c-38 6-31 65 10 59 38-5 28-64-10-59z" fill="#021d5d" stroke="#021d5d"/><path d="M179 477c-39 4-32 64 8 59 38-4 30-63-8-59z" fill="#021d5d" stroke="#021d5d"/><path d="M426 477c-38 5-30 64 8 60 39-5 30-64-8-60z" fill="#021d5d" stroke="#021d5d"/><path d="M838 477c-38 5-31 66 10 59 38-6 28-64-10-59z" fill="#021d5d" stroke="#021d5d"/><path d="M590 477c-38 5-31 65 10 59 38-5 28-64-10-59z" fill="#021d5d" stroke="#021d5d"/><path d="M921 477c-38 5-30 64 8 60 38-5 30-64-8-60z" fill="#021d5d" stroke="#021d5d"/><path d="M674 477c-38 4-32 63 6 60 39-4 33-63-6-60z" fill="#021d5d" stroke="#021d5d"/><path d="M509 477c-38 4-31 64 7 60s31-64-7-60z" fill="#021d5d" stroke="#021d5d"/></g></svg>
CSS background-image
.dotted-line {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/z6Nq9-Q_BP6x/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.dotted-line {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/z6Nq9-Q_BP6x/amnt.svg") center / contain no-repeat;
}
React
import DottedLineSvg from "./dotted-line.jsx"; // from the React tab above
<DottedLineSvg width={48} height={48} />
