1

i have created an SVG which has an image embedded. I did this because i want the descriptions to be scalable. The problem is, when i load the SVG only in chrome, the image is displayed. When the svg is embedded in an img tag in the html though, i dont see the image. When i write the svg code in the html file on the other hand the image is displayed.

I think the problem might be a pathing issue but im not sure as i dont get any errors displayed.
The SVG and IMG are in the same folder.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1189.851" 
height="539.932">
<image overflow="visible" width="1190" height="540" href="/pics/mashup/e-55211-10-piww-000.png" 
transform="translate(0 -.034) scale(.9999)"/>
<g stroke="#1D1D1B" stroke-width="4.693" stroke-miterlimit="10">
<path fill="#FFF" d="M998.689 395.155l-10.44 21.628-67.39-33.204 10.454-21.633z"/>
<path fill="#FFF" d="M911.808 448.549l-22.247-8.621 26.866-70.699 22.247 8.625zM889.081 
449.676h23.832v36.11h-23.832z"/>
<path fill="#FFF" d="M920.424 447.646c-2.273 10.825-12.828 17.741-23.553 15.44-10.729-2.301-17.576-12.942- 
15.299-23.79 2.283-10.839 12.828-17.75 23.563-15.45 10.715 2.305 17.572 12.952 15.289 23.8zM1012.159 
414.767c-4.812 9.959-16.71 14.093-26.559 9.24-9.863-4.854-13.955-16.857-9.148-26.825 4.804-9.959 16.696- 
14.089 26.555-9.239 9.858 4.857 13.951 16.861 9.152 26.824zM946.415 380.806c-3.928 10.345-15.413 15.514- 
25.66 11.55-10.229-3.969-15.34-15.577-11.417-25.917 3.933-10.34 15.422-15.514 25.656-11.545 10.248 3.968 
15.362 15.564 11.421 25.912z"/>
<path fill="none" stroke-linecap="round" d="M980.243 420.437c-6.976 7.153-6.77 18.754.453 25.931M1009.065 
446.372c6.972-7.159 6.774-18.75-.444-25.94"/>
</g>

I tried both and they dont work when loaded from an img tag, but do work when opened in browser or inspecting the element:

href="/pics/mashup/e-55211-10-piww-000.png"
href="e-55211-10-piww-000.png"

Thats how i want it to work.

<li class="c-linkedarea" data-content="img2 img" data-display="flex">
   <img src="/pics/mashup/e-55211-10-piww-000.svg" alt="Microwall VPN Funktionsgrafik">
</li>

Thanks in advance

Blue Lovag
  • 693
  • 2
  • 8
  • 18
  • 1
    have a look at using object element https://stackoverflow.com/a/4482962/13772586 – Beki Mar 31 '21 at 10:32
  • Thank you so much, that approach works! You can post it as answer, if u dont i answer it my own because i saw many ppl searched for it without an answer. – Blue Lovag Mar 31 '21 at 11:46
  • Okay, I will post it as an answer and elaborate on it a little more myself – Beki Apr 01 '21 at 02:43

1 Answers1

0

The solution to your question has been perfectly addressed by Erik Dahlström in his post here

Here is what CSS tricks has to say about it:

If “inline” SVG just isn’t your jam (remember it does have some legit drawbacks like being hard to cache), you can link to an SVG file and retain the ability to affect its parts with CSS by using .

Basically, you need to put your svg source inside the html <object> element like below:

<object data="pathToYourSVG.svg" type="image/svg+xml">
  <img src="backUpImgFileIfSVGDoesNotWork.jpg" />
</object>
Beki
  • 1,344
  • 1
  • 12
  • 22