[SOLVED] Placing an SVG-image in HTML/CSS

Help & Support
1

I am trying to place a SVG-image by reference from Stackoverflow (https://stackoverflow.com/questions/53962736/embed-svg-icon-into-html) + common knowledge/W3C instructions on how to.

Here is my tried code:

<div class='button'><img  rel="icon" type="data:image/svg+xml" src="https://{mywebsite-adr}/Home-icon.svg" decoding="async" width="20" height="20" data-file-width="16" data-file-height="16">
 </div>

Taken from this open example:
https://playcanvas.com/editor/scene/854709

It wont work … and I have also tried to upload to own website in order to eliminate CORS-causes etc without luck.

2

oops took 10 minutes before I saved as non-‘private’ :slight_smile:

3

Hi @Thomas_Due_Nielsen,

Tried opening the SVG on the browser to validate it loads but it isn’t well formed / fails to render.

4

Premise for post; questioneer is scrambling to understand SVG
A) An SVG image on a HTML page can both be written in XML-code only
B) or be a readymade image that is linked to

From B) I have tried to download my Home-icon.svg image in order to open it via Inkscapes XML-editor.
This didn’t work which is really a big surprise for me: in order to be sure of functionaity, the file is downloaded from here where it works perfectly on already ???:

Now I have tried to download this, that works within all ref’s from approach at bottom [SOLVED and thx I guess]:

image

Ref’s:
https://dev.w3.org/SVG/proposals/svg-html/svg-html-proposal.html



https://css-tricks.com/using-svg/ … PS: did skim this source, only
https://superuser.com/questions/299977/how-to-extract-an-embedded-image-from-a-svg-file

5

ps: can you edit (douce out addresses) your uploaded scrdmp-image (not so keen on having my website domains + ftp-structures laying out in the open :slight_smile: )

6

So yes an SVG is always an XML structure, either saved and loaded from a file or appended directly in HTML under the element.

The first url you post (the Wikipedia one) is directing to the HTML landing page of the Wikipedia file. If you press Original file you will get the raw .svg file which you can load in your app:

https://upload.wikimedia.org/wikipedia/commons/3/34/Home-icon.svg

PS. I’ve cropped my attached image to remove any urls.

1 Like
7

ok, thanks

8

whoops hmmm … final thing … the URL was/is only in the yellow area of your image (can it be blurred) :slight_smile:

1 Like