29: Texto SVG - Trucos CSS

Anonim

Hay un elemento en SVG. No es una gran sorpresa: es para poner texto en el SVG. No contornos de formas de letras (aunque también puede hacer eso) sino texto web normal real. Texto web normal, accesible, compatible con SEO y seleccionable.

Las fuentes a las que tiene acceso son las mismas que el resto del documento. Entonces, si carga una fuente @ font-face, podrá usarla en el SVG.

Lo que creo que es genial es que el tamaño de las fuentes es relativo al documento SVG, al igual que todas las formas y demás. Entonces, si diseña algo muy deliberado y perfecto tipográficamente en el SVG, mantendrá esa integridad a medida que el SVG cambie de tamaño. Eso sería difícil de lograr en HTML / CSS. Aquí hay un artículo sobre eso.

Una limitación: el texto no se puede ajustar. Eso puede ser un inconveniente bastante significativo, pero esa característica viene en SVG 2.