Welcome to yEd Q&A!
Here you can ask questions and receive answers from other members of the community and yEd developers. And you can tell us your most wanted feature requests.


Kubernetes SVG icons imported wrong

0 votes


When importing labeled Kubernetes SVG icons, text on them is not centered as is supposed to be. Is there a workaround?

P.S. yEd version 3.22 on MacOS.

in Help by

1 Answer

0 votes
Best answer

The Kubernetes SVG icons use text-anchor:middle; in the CSS styles for <tspan> elements (together with text-align:center) to center the corresponding text, e.g.

However, text-anchor is not a CSS property but an SVG attribute. The proper (and working) usage for text-anchor would be

Strictly speaking, the Kubernetes SVG icons do not conform to the SVG and CSS specifications. The Apache Batik toolkit that yEd uses for displaying SVG documents on the other hand strictly adheres to the SVG and CSS specifications and thus ignores the invalid CSS property.

The only fix for this problem is correcting all the Kubernetes SVG documents to properly use text-anchor as an SVG attribute instead of a CSS property.

E.g. compare this corrected icon with the original one.

by [yWorks] (160k points)
Amazing! Thanks a lot for this in-depth answer!
Legal Disclosure | Privacy Policy