SVG EN HTML5

Anterior
Avanzar

En esta lección conoceremos y aprenderemos sobre los gráficos SVG en HTML5, ahora es posible crear imágenes con código html, desde simples lineas hasta complejos gráficos bidimensionales de alta calidad, SVG es un formato de imagen particular y lo veremos porqué.

Svg en HTML5

Svg por sus siglas en inglés (scalable vector graphics) significa gráficos vectoriales escalables..

Prácticamente svg es un formato de imagen bidimensional.

Etiqueta <svg>

La etiqueta svg nos permite crear imágenes bidimensionales en formato svg.

Para crear imágenes svg primero crearemos la etiqueta <svg> con sus respectivos atributos como width (ancho) y height  (alto), para que me entiendas esto creara un lienzo con sus respectivas dimensiones y dentro podremos crear nuestros gráficos vectoriales escalables.

<svg  width="240" height="250">...</svg>

Si no se indica width y height el valor por defecto será del 100%.

Svg poseerá un sistema de coordenadas, donde el punto de origen (0,0) será la esquina superior izquierda, la coordenada x aumenta su valor haca la derecha y la coordenada y aumenta su valor hacia abajo.

(0,0)

Dentro de <svg> podemos crear desde simples lineas, figuras geométricas como círculos, cuadrados, rectángulos, triángulos, polígonos, elipses, trayectorias, etc. Hasta complejas imágenes como logos o cualquier otra imagen.

Además podemos darle estilo con css y funcionalidades con JavaScript.

Los gráficos resultantes son vectoriales, por lo tanto nunca pierden su resolución aunque los agrandemos.

Seguro estas empezando con esto y no quiero reventarte la cabeza, ¡así que nos ponemos manos a la obra con ejemplos sencillos!.

Te recomendamos leer:  TEXTO SVG EN HTML5

Bordes y rellenos de gráficos dentro de SVG

De ahora en adelante aprenderemos a crear gráficos en svg, empezando por simples lineas, rectángulos, círculos, polígonos, elipses, curvas, etc.

En todos los gráficos mencionados anteriormente entra en juego dos aspectos muy importantes y será mejor conocerlos de una vez para que podamos trabajar con ejemplos concretos en las siguientes lecciones.

Pues bien todos los gráficos SVG poseen borde y relleno, la apariencia de estos dos aspectos pueden ser controlados mediante mediante varias propiedades que evidentemente irán en la etiqueta de apertura de cada gráfico.

Por ahora nos enfocaremos en conocer las propiedades que nos permitan controlar el borde y fondo, veamos.

Propiedad stroke SVG

Las propiedades relacionadas al borde son: el ancho de borde, el color, el estilo, etc.

  • stroke.- permite definir el color.
  • stroke-width.- ancho de borde.
  • stroke-linecap.- estilo de terminación de borde.
  • stroke-dasharray.- estilo de borde discontinua.
  • stroke-opacity.- opacidad de borde.

Propiedad fill svg

Las propiedades relacionadas al estilo de fondo de figuras SVG

  • fill.- color de fondo.
  • fill-opacity.- opacidad de fondo.
  • fill-rule.- color total o parcial.

Los valores que pueden tomar estas propiedades son diversos como los veremos en los respectivos ejemplo.

Lo importante aquí es que sepas que existen propiedades especificas que nos permiten controlar el borde y relleno de dibujos SVG. Por ahora es suficiente, vamos a las aplicaciones.

Lecciones de HTML5
Anterior
Avanzar
0 0 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

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