-1

Hello,

I have recently been working on a project that requires me to embed an embedded svg through a url. It goes somewhat like this. <svg data> -> index.html -> <img src="index.html">

Can I get some help with this?

I have tried placing the svg data into an <img> tag in index.html but when I try to embed said image through <img src="./img/img.html"> it does not seem to work.

WillDevv12
  • 33
  • 4
  • An SVG image needs to be an SVG document, not an HTML document so this will never work. You'd need it to be img.svg and that would need to be a valid SVG document with the SVG namespace defined etc. – Robert Longson Apr 06 '23 at 03:32
  • You can load **external** SVGs and _inject/embed_ them in your HTML with the [ Web Component](https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd) – Danny '365CSI' Engelman Apr 06 '23 at 10:07

1 Answers1

0

There are several ways to use SVG:

  1. CSS background-image

    body { background-image: url(happy.svg); }

  2. SVG as an

    body { background-image: url(happy.svg); }

    You use the data attribute to specify the URL of the resource that you'll use by the object, which is the SVG image in our case.

  3. You can also use

    <embed src="happy.svg" />

    Keep in mind, however, that this method has limitations, too. According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon is generally not wise if you want your site to be operable on the average user's browser.

Mandarin
  • 54
  • 5