DEV Community

Discussion on: How to kern lettering with SVG's dx attribute.

Collapse
 
masakudamatsu profile image
Masa Kudamatsu

I just found out on my own the use of dx attribute for kerning, and reached this article after googling if anyone else has already discovered it. Glad to learn that I'm not alone.

I found tweaking a series of values for dx is a lot easier to kern than using <span> for individual characters. Also, if SVG is used inline in HTML, it's more readable for developers.

If we need an HTML semantic mark up like h1 and h2, maybe we can use the visually-hidden technique (my own article about it :-)) to hide it from sighted users (but not from search engines and screen reader users) and place a kerned title text in SVG instead.