How to convert logo to html?

[robert24417421lmgj]

Hello, 

I made a logo and saved it to a .ai file. How would I take this vector file and display just the logo, without the white background on a website? Thanks

[jane-e]

---

@robert24417421lmgj wrote:

...display just the logo, without the white background on a website?

---

To put the image in website, it needs to be in a format supported by the web: try png and svg. For the html, you need to write the code to reference the image file. It will look more or less like this: 

<img src="imagename.png" alt="Name"style="width:500px;height:600px;">

Illustrator has a transparent background by default. PNG and SVG support transparency. JPEG does not — it fills in the transparency with white.

Does this answer your question? If not, please clarify.

~ Jane

[robert24417421lmgj]

Hello and thank you! Yes! I think I'm almost there. I understand how to code images to HTML so if I save the img as a SVG or PNG and drop it in my local IMG folder that I'm using for a webpage using VSCode, it will automatically just use the vectors image and not the background? I will give this a try! 

[Anna Lander · Accepted solution]

yes. You can also copy the SVG code directly into your HTML and use it to add some animation or effects.

[jane-e · Accepted solution]

---

@robert24417421lmgj wrote:

... if I save the img as a SVG or PNG ... it will automatically just use the vectors image and not the background?

---

Both SVG and PNG support transparency, but PNG (Portable Network Graphics) is raster. SVG (Scalable Vector Graphics) is vector.

SVG is not supported in older browsers, but there are workarounds with html.

https://www.w3schools.com/html/html5_svg.asp

https://css-tricks.com/using-svg/

Jane