I wanted to optimize the rendering of our logo which is in svg format. I wanted to try out inlining the svg code of the image on our site's html just so we could eliminate the need of requesting the image resource and so the image immediately renders after the HTML is loaded. My concern is, how would this affect SEO? Since the svg markup would not have any alt attribute or image src.
If you are concerned about losing traffic from your logo not appearing in an image search, then I would recommend embedding your image via the
<img> tag with
alt text, rather than inline SVG.
On the other hand, if your primary concern is traffic coming from a simple web search, the best practice for inline SVG is to format the SVG with the following attributes:
<svg role="img" aria-labelledby="title desc"> <title>...</title> <desc>...</desc> <!-- Additional SVG Content --> </svg>