TEXTO SVG EN HTML5

Ahora podemos crear gran variedad de textos vistosos con HTML5 en SVG, 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. Mejor veamos cómo se hace paso a paso.

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.

Te recomendamos leer:  Rectángulos en svg HTML5

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:

Ahí está, 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. ¿Ves la diferencia? Porsupuesto.

Por ahora es suficiente, ya sabes como crear textos en SVG y ese era el objetivo. Sigue aprendiendo que esto no acaba. ¡Vamos!

Lecciones de HTML5
5 1 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML