Podemos crear gran variedad de textos vistosos utilizando SVG. De forma similar a las formas geométricas podemos definir gran variedad de propiedades, ademas al tratarse de texto ahora es posible aplicar estilos como el tipo de letra, tamaño, variación, peso, etc. Veamos cómo se hacerlo.
Etiqueta text
Para crear texto en formato SVG, simplemente agregamos la etiqueta <text> dentro del elemento <svg>, en este caso es necesario la etiqueta de cierre <text/> como veremos en el ejemplo:
El texto que deseemos crear ira dentro de la etiqueta <text>, veamos un ejemplo.
<svg> <text>Este es un texto SVG</text> </svg>
Posición del texto
Los textos SVG pueden ser posicionados al igual que las figuras geométricas, para ello emplearemos los atributos X y Y.
- x.- distancia hacia el texto en el eje X.
- y.- distancia hacia el texto en el eje Y.
El punto (X,Y) es el punto donde inicia el texto, observa el gráfico para entender exactamente el punto de posición del texto.
Ejemplo:
<svg>
<text x="80" y="130">Este es un texto SVG</text>
</svg>
Resultado:
Personalizando texto
Ahora podemos personalizar el texto empleando cualquier propiedad compatible con formatos de texto. Empecemos aplicando las propiedades que ya conocemos y que tambien aplicamos en las lecciones anteriores de SVG.
- fill.– color de relleno de texto.
- stroke.– color de borde de texto.
- stroke-width.– ancho de borde del texto.
Ejemplo aplicativo:
<svg width="400" height="300">
<text x="50" y="130" fill="yellow" stroke="blue" stroke-width="5px">Este es un texto SVG</text>
</svg>
Para visualiza un resultado más atractivo agregaremos otras propiedades más, las cuales conoceremos a continuación.
Aplicando propiedades propias de texto
En el curso de CSS aprenderás todo lo que tenga que ver con personalizar y maquetar, por ahora mencionamos solo algunas propiedades para realizar los ejercicios de muestra, veamos:
- font-family.– indica el tipo de familia tipográfica o tipo de letra.
- font-size.– para establecer tamaño de letra.
- font- weight.– para establecer grosor de letra.
Para agregar estas propiedades, emplearemos el atributo style dentro de la etiqueta <text>, el atributo style contiene las propiedades que deseamos aplicar. Si aún no pasaste el curso de CSS, por ahora basta con que entiendas que style contiene instrucciones para controlar la apariencia del texto, estas instrucciones están formadas por propiedades CSS y sus respectivos valores que ya conocerás en mayor profundidad en el curso de CSS.
El código a continuación indica que el tipo de letra debe ser impact, tamaño de letra 40px y ancho de letra de 800; esta información será agregada a la etiqueta <text>; veamos.
style=»font-family:impact; font-size:40px; font-weight: 800;»
Ejemplo:
<svg width="400" height="300">
<text x="50" y="130" fill="yellow" stroke="blue" stroke-width="2px" style="font-family:impact; font-size:40px; font-weight: 800;">Este es un texto SVG</text>
</svg>
Resultado:
El resultado es un texto con relleno amarillo, borde de 2 pixeles color azul, tamaño de letra 40px. Si te fijas el primer ejemplo notarás que solo se tenia la posición y el texto establecido, por defecto se aplicaba un texto poco atractivo.
Realiza pruebas cambiando diferentes atributos.