Skip to main content
Participant
May 12, 2022
Answered

How to convert logo to html?

  • May 12, 2022
  • 1 reply
  • 1542 views

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

This topic has been closed for replies.
Correct answer jane-e

@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

 

1 reply

jane-e
Community Expert
Community Expert
May 12, 2022

@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

 

Participant
May 12, 2022

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
Inspiring
May 12, 2022

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