Mobile app version of vmapp.org
Login or Join
Debbie626

: Inline SVG within H1 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"

@Debbie626

Posted in: #Html5 #Pagerank #Seo #Svg

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.)

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Debbie626

1 Comments

Sorted by latest first Latest Oldest Best

 

@Sherry384

2 ways to add title:
with css and positioning and z-index.
But this would never scale well with svg. And SVG is perfect in scaling.
You could use the foreignObject tag to add html items in your SVG.
At least every tekstbrowser, like a bot, can read that. I do not know if Google-bot will do somethig with that, but at least it is readable.
My experience is not to overestimate such details. text like svg loads much faster than an image,google rewards speed of your site:)

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme