Página principal » Codificación » Trabajar con texto en gráficos vectoriales escalables (SVG)

    Trabajar con texto en gráficos vectoriales escalables (SVG)

    En nuestras publicaciones anteriores, hemos usado SVG para crear formas. En este post, como decía el título, analizaremos creando texto con SVG. Hay muchas cosas que podemos hacer con el texto más allá de lo que el texto HTML simple es capaz de hacer.

    Por lo tanto, vamos a verlos.

    Implementación básica

    Pero, antes de seguir adelante, veamos cómo Texto en SVG Se forma en su nivel muy básico:

      Este es un texto de gráficos vectoriales escalables (SVG)  

    El texto en SVG, como se puede ver en el fragmento de código anterior, se define con una etiqueta suficientemente lógica, . Este elemento básicamente solo requiere X y y atributos para especificar las coordenadas de línea de base.

    Fuente de imagen: Wikipedia.org

    Y aquí es cómo se verá el texto. Por ahora parece que no hay diferencia con el texto regular en HTML..

    Estilos básicos de texto

    El texto también puede ser estilizado con propiedades CSS como peso de fuente, Estilo de fuente, y decoracion de texto que puede ser implementado a través de estilo en línea, estilo interno o estilo externo Como hemos discutido en el post anterior sobre Estilo SVG con CSS. Estos son algunos de los ejemplos..

    Negrita

     Este es el texto en el gráfico vectorial escalable (SVG) 

    Itálico

     Este es un texto en cursiva en el gráfico vectorial escalable (SVG) 

    Subrayar

     Este es un texto subrayado en el gráfico vectorial escalable (SVG) 

    Elemento

    En algunos casos, cuando solo queremos aplicar estilos o atributos a una parte particular del texto, podemos usar . Este ejemplo a continuación muestra cómo agregamos negrita, itálico y subrayar a una sola línea de texto.

     Esto es audaz, esto es cursiva y esto está subrayado 

    Modo de escritura

    El texto no solo se escribe desde de izquierda a derecha. En otras partes del mundo, Japón, por ejemplo, el texto está escrito desde de arriba hacia abajo. En SVG, esto se puede hacer usando el modo de escritura atributo.

     ぃ ぅ ぇ き  

    En el ejemplo anterior, hemos puesto varios caracteres japoneses al azar (no me preguntes su significado, realmente no tengo idea) y cambiamos la orientación con esta declaración de estilo, modo escritura: tb, dónde tuberculosis es soporte para de arriba hacia abajo.

    Contorno de texto

    El texto en SVG es básicamente un gráfico., por lo que también podemos aplicar el carrera atributo para agregar una línea de borde al texto tal como lo hicimos con las otras formas.

      Este es un texto SVG  

    En el fragmento de código anterior, hemos añadido el carrera atribuir a la elemento y eliminar el color del texto especificando el llenar atribuir a ninguna lo que resultará en la siguiente presentación de texto..

    Ruta de texto

    En SVG, el texto no solo se puede mostrar horizontal y verticalmente, sino que también puede seguir un patrón de ruta. Aquí está cómo hacerlo..

    Primero, tenemos que definir el camino. Sin embargo, crear una Ruta directamente en HTML no es tan intuitivo, necesitamos entender las coordenadas y algunos comandos que estoy seguro que la mayoría de nosotros tratará de evitar. Entonces, para simplificar este paso, personalmente sugiero abrir un editor vectorial (Inkscape o Illustrator), crear una ruta y generar el código SVG.

    Luego, ponga el elemento dentro de un elemento. defs aquí significa definición.

        

    Tenga en cuenta que también hemos añadido un carné de identidad atribuir a la . Ahora, solo tenemos que enlazar el Camino. carné de identidad a nuestro texto con elemento, como tal;

        Lorem ipsum dolor sit amet consectetur.   

    Otras lecturas: Caminos SVG

    Gradiente de texto

    También es posible agregar un fondo para rellenar el texto en SVG, y si ha tenido éxito en la sección Ruta de texto anterior, esto sería mucho más fácil.

    Primero, necesitamos definir los colores degradados..

           

    Cuando todas las definiciones necesarias están configuradas, ahora solo tenemos que agregar el texto y consultar el llenar atribuir al gradiente de carné de identidad atributo, de la siguiente manera;

     Gradiente 

    Y aquí está, el texto con degradado..

    Otras lecturas: Gradiente y patrón de SVG

    Referencias adicionales

    El texto en SVG es sin duda poderoso, hay muchas cosas que podemos hacer más allá de lo que podemos acomodar en esta publicación. Entonces, a continuación, hemos reunido algunas referencias más para atender su interés en este tema..

    • Acerca de las fuentes en SVG - Divya Manian
    • Documentación oficial de texto SVG - W3.org
    • SVG Dovumentation en Mozilla Dev. Red con ejemplos y herramientas - MDN
    • Atributo de modo de escritura SVG - MDN
    • Ver demostración
    • Descargar fuente