I'm in the process of updating my website by replacing large PNG images with inline SVG images.
My current code looks something like this:
<h1> <img src="logo.png" alt="Company Name" /> </h1>
And I'd like to replace it with something like this:
<h1> <svg> <title>Company Name</title> </svg> </h1>
As far as I'm concerned, this is correct HTML5 markup. But I'm a bit worried that this might affect page ranking negatively after all you can read about the importance of the H1 and TITLE tags for SEO.
Does anyone know more on this or have any tips on how to go about this?
(I'm aware that I could simply change the src-attribute of the tag to point to the SVG version of the logo, but I prefer to include it inline in order to reduce the number of HTTP requests.)