How can I put a SVG image code into HTML file without the usage of img tag?

Jo227oSim245es
March 12, 2024
154 views
3 votes
3 Answers

I have a SVG image. I know I can use it in an image tag but this way I cannot style the path tags of the svg.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.993" fill="#000000" d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/></g>
<g><path style="opacity:0.959" fill="#000000" d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/></g>
<g><path style="opacity:0.959" fill="#000000" d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/></g>
</svg>

So this is the code inside my svg image. I want it inside the HTML file.

I’ve tried to put it without the xml and doctype tags of course. But without success.

<svg class="icon handbrake" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
     <path style="opacity:0.993" fill="#000000" d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/>
     <path style="opacity:0.959" fill="#000000" d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/>
     <path style="opacity:0.959" fill="#000000" d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/>
</svg>

Just to be clear, I don’t want this: <img src="assets/icons/handbrake.svg">

Tags: html svg

Answers

You can inject a SVG with the <load-file> Web Component I wrote:

Full Dev.to blog post:
https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

All code required:

// Define <load-file> Web Component once, doesn't matter when it is defined
customElements.define("load-file", class extends HTMLElement {
  async connectedCallback() {
    this.shadowRoot || this.attachShadow({mode: "open"});
    this.shadowRoot.innerHTML = await (await fetch(this.getAttribute("src"))).text();
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"));
    this.hasAttribute("replaceWith") && this.replaceWith(...this.shadowRoot.childNodes)
  }
})

svg,load-file {
  width: 150px;
  display: inline-block;
}

<!-- USE Web Component : replace <load-file> with SVG -->
<load-file replaceWith src="//load-file.github.io/heart.svg"></load-file>

<load-file src="//load-file.github.io/heart.svg">
<!-- create <load-file> with shadowDOM, inject <style> -->
  <style shadowRoot>
    path:nth-child(2n+2) {
      fill: GREEN; /* shadowDOM style does NOT style global DOM */
    }
  </style>
</load-file>

You can add SVGs directly to HTML. I would just include the viewBox attribute and preserveAspectRatio="xMidYMid meet" to keep the aspect ratio consistent.

.handbrake {
  color: rebeccapurple;
  display: block;
  fill: currentColor;
  height: auto;
  transition: color 180ms ease;
  width: 200px;
}

.handbrake:hover {
  color: orange;
}

<svg class="icon handbrake" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 398" preserveAspectRatio="xMidYMid meet">
  <g fill-rule="evenodd">
    <path d="M235.5-.5h40C353.8 10.6 409 52.3 441 124.5c27.3 78.3 14 148.6-40 211a207 207 0 0 1-125.5 62h-40c-87.6-13-145-61.7-172.5-146-18.9-81.7 2.6-150.6 64.5-206.5a206.6 206.6 0 0 1 108-45.5Zm17 89c10.3-.2 16.1 4.8 17.5 15 .7 45 .7 90 0 135-1 8.7-5.7 13.7-14.5 15-8.8-1.3-13.6-6.3-14.5-15-.7-45-.7-90 0-135 .7-7.5 4.5-12.5 11.5-15Zm1 190c14.6 2.2 19.1 10.2 13.5 24-7.7 8-15.3 8-23 0-5.4-11.5-2.2-19.5 9.5-24Z"/>
    <path d="M-.5 221.5v-46c5.6-52.3 24.8-99 57.5-140 7.1-7 15-7.8 23.5-2.5A17.1 17.1 0 0 1 83 53.5c-53 67.1-66 141.4-39 223a226 226 0 0 0 39 67c4.7 15.2-.8 23-16.5 23.5-2.4-.7-4.8-1.7-7-3a264.9 264.9 0 0 1-60-142.5Zm512-46v46a264.9 264.9 0 0 1-60 142.5c-10.3 5.8-18.5 3.6-24.5-6.5a29 29 0 0 1 1-14c53-67.1 66-141.4 39-223a226 226 0 0 0-39-67c-5.2-16.8 1-24.6 18.5-23.5 3 1 5.6 2.9 7.5 5.5 32.7 41 51.9 87.7 57.5 140Z"/>
  </g>
</svg>

FYI I ran your SVG through https://jakearchibald.github.io/svgomg/ to optimize it.

You can get a lot of mileage with the <use> element

In this example I have removed the fill and style from your SVG and given the groups a classname so we can target them. The SVG is embedded on-page but hidden with CSS.

Elsewhere in the page I have used this SVG multiple times and restyled each instance to illustrate how it could work for you.

:root {
  --g1opacity: 0.993;
  --g2opacity: 0.959;
  --g3opacity: 0.959;
}

#mysvg {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -9999px;
}

#mysvg .g1 {
  opacity: var(--g1opacity);
}

#mysvg .g2 {
  opacity: var(--g2opacity);
}

#mysvg .g3 {
  opacity: var(--g3opacity);
}

.mysvg1 {
  width: 200px;
  fill: red;
}

.mysvg2 {
  width: 100px;
  fill: blue;
}

.mysvg_bounds {
  display:block;
  max-width:300px;
  padding:10px 10px 2em;
  color: orange;
  border: 1px solid #ccc;
  resize: both; 
  overflow: hidden;
}

.mysvg_bounds svg {
  width: 100%;
  height:100%;
  aspect-ratio:1;
  fill: currentColor;
}

svg:hover {
  --g2opacity: 0.2;
  --g3opacity: 0.2;
  fill: purple;
}

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="398px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="g1"><path d="M 235.5,-0.5 C 248.833,-0.5 262.167,-0.5 275.5,-0.5C 353.784,10.624 408.951,52.2907 441,124.5C 468.343,202.773 455.01,273.107 401,335.5C 366.395,370.719 324.561,391.386 275.5,397.5C 262.167,397.5 248.833,397.5 235.5,397.5C 147.918,384.421 90.4184,335.755 63,251.5C 44.1335,169.779 65.6335,100.946 127.5,45C 159.111,19.4077 195.111,4.24107 235.5,-0.5 Z M 252.5,88.5 C 262.79,88.2893 268.623,93.2893 270,103.5C 270.667,148.5 270.667,193.5 270,238.5C 269.085,247.249 264.252,252.249 255.5,253.5C 246.748,252.249 241.915,247.249 241,238.5C 240.333,193.5 240.333,148.5 241,103.5C 241.713,95.9701 245.546,90.9701 252.5,88.5 Z M 253.5,278.5 C 268.106,280.706 272.606,288.706 267,302.5C 259.333,310.5 251.667,310.5 244,302.5C 238.615,290.955 241.781,282.955 253.5,278.5 Z"/></g>
<g class="g2"><path d="M -0.5,221.5 C -0.5,206.167 -0.5,190.833 -0.5,175.5C 5.14748,123.215 24.3141,76.5481 57,35.5C 64.1348,28.503 71.9681,27.6696 80.5,33C 85.9216,39.2833 86.7549,46.1166 83,53.5C 29.9793,120.615 16.9793,194.948 44,276.5C 53.1732,301.196 66.1732,323.53 83,343.5C 87.6577,358.723 82.1577,366.557 66.5,367C 64.0506,366.275 61.7173,365.275 59.5,364C 25.3602,322.542 5.36016,275.042 -0.5,221.5 Z"/></g>
<g class="g3"><path d="M 511.5,175.5 C 511.5,190.833 511.5,206.167 511.5,221.5C 505.64,275.042 485.64,322.542 451.5,364C 441.159,369.772 432.992,367.606 427,357.5C 426.19,352.743 426.524,348.076 428,343.5C 481.02,276.389 494.02,202.055 467,120.5C 457.827,95.8038 444.827,73.4705 428,53.5C 422.821,36.6833 428.987,28.85 446.5,30C 449.562,31.0608 452.062,32.8941 454,35.5C 486.686,76.5481 505.853,123.215 511.5,175.5 Z"/></g>
</svg>
<!-- above SVG is hidden off-screen -->
<!-- We can use copies of it below -->

<h3>Using the <tt>&lt;use&gt;</tt> element</h3>

<svg class="mysvg1" viewBox="0 0 512 398">
   <use xlink:href="#mysvg"></use>
</svg>
<svg class="mysvg2" viewBox="0 0 512 398">
   <use xlink:href="#mysvg"></use>
</svg>

<div class="mysvg_bounds">
  <svg viewBox="0 0 512 398">
     <use xlink:href="#mysvg"></use>
  </svg>
  Resize me.
</div>

Please signup or login to give your own answer.

Click here to cancel reply.