Inserting an SVG inline
As SVG is merely an XML document, you can insert it directly into the HTML. For example:
<div> <h3>Inserted 'inline':</h3> <span class="inlineSVG"> <svg id="svgInline" width="198" height="188" viewBox="0 0 198 188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Star 1</title> <g class="star_Wrapper" fill="none" fill-rule="evenodd"> <path id="star_Path" stroke="#979797" stroke-width="3" fill="#F8E81C" d="M99 154l-58.78 30.902 11.227-65.45L3.894 73.097l65.717-9.55L99 4l29.39 59.55 65.716 9.548-47.553 46.353 11.226 65.452z" /> </g> </svg> </span> </div>
There is no special wrapping element needed, you literally just insert the SVG markup inside the HTML markup. It's also worth knowing that if you remove any width
and height
attributes on the svg
element, the SVG will scale fluidly...