Adding SVG icon

[radiant]

Hi,

I have a couple of icons that look very pixelated on the screen.

Even with a large file, they appear pixelated when using a mobile device. 

I was reading through all the threads about .SVG an wasn't able to figure out how to add an .svg image to the body of my page. 

I understand that SVG file needs to be uploaded in the ASSETS sction, and that it needs to be added to the page with "<embed code>" element, but I'm confused about what else needs to be done...

Does anyone know where to find a solution? 

[Adam7 · Accepted solution]

Any images added to the assets folder can be linked like this in the embed code element, @radiant:

<img src="/files/theme/imagname.svg" />

There are other attributes you can add to that which you can read about here:

https://www.w3schools.com/tags/tag_img.asp

[Adam7 · Accepted solution]

Any images added to the assets folder can be linked like this in the embed code element, @radiant:

<img src="/files/theme/imagname.svg" />

There are other attributes you can add to that which you can read about here:

https://www.w3schools.com/tags/tag_img.asp

[radiant · Accepted solution]

Works!

You are awesome Adam, thank you! 

I also added: 

<img src="/files/theme/inspection.svg"
height="80px"
width="80px"
/>

To resize the icon to the size i wanted (in case anyone reading has the same question). 

[Adam7]

That's great, @radiant!

[obitoak]

When I host my SVG on a third party file hoster and link it in the README.md my SVG is displayed normally. You can see the SVG shaking and going through various colors. But when I upload the SVG to weebly and reference the SVG in the README.md it is black but still shaking. Reference - SVG to WordPress

[Bernadette3]

Can you also post a link to your site, @obitoak? Thanks! 

[mathewHSA]

This is not working for me.

Is the "theme" part of that code supposed to be the name of the theme that I'm using?

[BJ5]

No, that's the file path fo anything you upload to the Assets folder of your theme.

[PezGurly]

I followed these instructions to the tee but all I get is a broken image link icon.

I uploaded the .svg file to my assets folder. Then I added the embed code tool where I wanted to place the image. In there, I pasted the following code:  <img src="files/theme/workdetail-calltoaction.svg" />. What am I doing wrong?

[Adam7]

Try using the full URL to the image instead, @PezGurly, e.g. https://www.mysite.com/files/theme/imagename.svg (don't forget to re-publish, too).

[man946]

I added to the SVG image to the Assets. Use the same embedded code mentioned with my file name. I cannot see my image appearing.

[Sunnybrook1]

Same for me, doesn't display the SVG I uploaded to the assets folder of my theme, thinking there's more to it or something has changed between now & when this solution was last proposed...