I am building a website for a brand. The designer sent me the company logo in an .svg format. I rarely see SVG logos on websites, and I usually work with PNG images so I have two questions :

  • Is it a good practice to use an .svg file as a site logo? Does it affect the SEO?
  • How do I embed it on the website? I've seen many practices :

<img src="logo.svg" alt="XYZ" height="87px" width="100px"/>

<svg id="logo" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <image x="0" y="0" height="600" width="600" xlink:href="logo.svg" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="280" height="53"><g fill="none" fill-rule="evenodd"><path d="..."fill="#FFF"/></svg>

Thank you for your help!


Have a look at https://caniuse.com/?search=svg to see support. Id suggest to you that svg files are coming of age and widely supported, but not yet widely used in web pages.

It is good though that a designer provides you the svg of your logo. SVG files are vectors, which means they can scale infinitely without loss.

Were it me, as a conservative person I'd likely render the svg file as a png and use that. It might be worth doing a size comparison on the svg and a png and deciding if trail blazing even buys you anything.

I believe Google can read svg files.

With respect of embedding it - https://vecta.io/blog/best-way-to-embed-svg would seem a useful read. The tldr is use an <img> tag to embed it if you are going to use one. Be careful of referencing fonts in the svg


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.