Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 362

Visitas el mes pasado: 320

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


tutorial SVG
W3Scools
Using SVG with HTML5 tutorial
Alejandro Castillo Cantón
Agregar SVG a una página web
msdn.microsoft.com
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
Introducción a SVG
http://sabia.tic.udc.es

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




SVG (II)

Figuras básicas

imagen html5

Dibujar figuras básicas

Cualquier dibujo o figura que dibujemos con SVG debe tener su código dentro de la etiqueta <svg> ... </svg>, hecho que daremos por supuesto en algunos de los ejemplos que aquí pongamos. No hay que olvidar que debemos indicar también la altura y la anchura del contenedor que genera esta etiqueta.

Los dibujos que hagamos en esta página estatán todos incluídos dentro de una etiqueta "svg" como ésta:

<svg width=200 height=200> ... código del dibujo ... </svg>

En la etiqueta indicamos la altura y anchura del contenedor del dibujo. Además para que encaje en nuestra página hemos puesto el siguiente código CSS en la hoja de estilos:

svg { margin: 1em 3em 1em 1em; float: right; border: 1px solid black; }

Dibujar un círculo

Para dibujar un círculo básico pondremos el siguiente código:

<svg width=200 height=200>
<circle cx=100 cy=100 r=90 stroke="blue" stroke-width=2 fill="orange">
</svg>

Explicamos a continuación el código. En él hay unos elementos que son imprescindibles:

El resto de atributos definen el estilo y se pueden utilizar con otras figuras:

Cabe destacar que en todo contenedor SVG tenemos un origen de coordenadas que en principio estará en la esquina superior derecha con el valor 0,0. Desde ahí se miden los pixeles para trazar los elementos del dibujo, tal como hemos hecho aquí para buscar el centro del círculo.

Todos los valores numéricos que indican distancia, de no indicar otra cosa se miden en píxeles. También podemos ponerlos en porcentaje siempre y cuando lo indiquemos. Esto es válido también para el resto de figuras que hagamos.


Cuadrados y rectángulos:

Para dibujar un rectángulo lo haremos con el siguiente código:

<svg width=200 height=200>
<rect x=10 y=30 width=180 height=140 stroke="green" stroke-width=2 fill="lime"/>
</svg>

Como en el dibujo anterior hemos utilizado los atributos stroke, stroke-width y fill para indicar el color del borde, el grosor del borde y el color de relleno respectivamente. Los demás elementos de la etiqueta son los siguientes:

Podemos también dibujar el rectángulo con las esquinas redondeadas, para ello sólo tenemos que añadir los atributos rx y ry cuyo valor será el radio horizontal y vertical de la esquina.

El ejemplo que vemos a la derecha tiene el siguiente código:

<svg width=200 height=200>
<rect x=10 y=40 rx=20 ry=20 width=180 height=120 fill="orange" stroke="purple" stroke-width=2 />
<svg>

Para dibujar un cuadrado no tenemos más que dibujar un rectángulo en el que la anchura y la altura sean iguales.


Dibujar una elipse

Para dibujar una elipse utilizaremos el siguiente código:

<svg height="200" width="200">
  <ellipse cx=100 cy=100 rx=95 ry=60
  stroke="red" stroke-width=2 fill="yellow" />
</svg> 

Como en las figuras anteriores utilizamos los atributos stroke, stroke-width y fill para indicar el color del borde, el grosor del borde, y el color de relleno.

El resto de elementos de esta etiqueta son:


Polígonos

Para dibujar un polígono cualquiera utilizaremos un código como el siguiente:

<svg height="200" width="200">
  <polygon points="100,10 190,190 10,190"
  stroke="purple" stroke-width=2 fill="aqua"/> 
</svg> 

Como en las figuras anteriores indicamos el borde y el relleno con los atributos stroke, stroke-width y fill.

El nombre de la etiqueta polygon indica que lo que estamos dibujando es un polígono.

El atributo points indica los puntos de las esquinas del polígono. Escribimos aquí una serie de números por parejas. Los dos números de la pareja van separados por una coma, y cada pareja se separa de las demás por espacios en blanco. La primera pareja de números indica las coordenadas x e y respectivamente del primer punto. La segunda pareja indica las coordenadas x e y del segundo punto, y así sucesivamente, con cada pareja de números más que pongamos indicamos las coordenadas del siguiente punto. Al llegar al último punto el polígono busca el primer punto para cerrarse automáticamente.

Al ir poniendo los puntos se va trazando la línea que delimita el polígono, por lo que es importante el orden en el que éstos se ponen para trazar la línea correctamente. Por otra parte debemos poner un mínimo de tres puntos para que el polígono tenga una superficie.


Líneas rectas

Para dibujar una línea recta lo haremos con un código como el siguiente:

<svg height=200 width=200>
  <line x1=5 y1=5 x2=190 y2=190 stroke="red" stroke-width=2/>
</svg> 

Los atributos stroke y stroke-width indican el color y grosor de la línea respectivamente.

El nombre de la etiqueta line indica que lo que dibujamos es una línea.

los atributos x1 y y1 indican respectivamente las coordenadas horizontal y vertical del principio de la línea.

los atributos x2 y y2 indican respectivamente las coordenadas horizontal y vertical del final de la línea.

La línea se traza desde el punto indicado como principio al punto indicado como final.


Estilo de líneas

Podemos poner un remate al final de la línea con el atributo stroke-linecap, el cual puede tener los siguientes valores:

Para poder apreciar las diferencias las líneas deben ser bastante gruesas como para que se vea el remate.

El atributo stroke-dasharray permite hacer líneas discontinuas. Como valor se ponen una o varias parejas de números. En cada par de números el primero es la longitud de línea que se ve y el segundo la longitud que está oculta. El patron se repite a lo largo de toda la línea.

Por ejemplo la ultima línea del ejemplo de la derecha tiene el siguiente atributo stroke-dasharray="12,4 2,4 2,4".

El contenedor SVG de la derecha muestra una serie de líneas con estos atributos. su código es el siguiente:


<svg width=200 height=200>
<line x1=20 y1=20 x2=180 y2=20 stroke="navy" stroke-width=10 stroke-linecap="butt"/>
<line x1=20 y1=50 x2=180 y2=50 stroke="navy" stroke-width=10 stroke-linecap="round"/>
<line x1=20 y1=80 x2=180 y2=80 stroke="navy" stroke-width=10 stroke-linecap="square"/>
<line x1=20 y1=110 x2=180 y2=110 stroke= navy stroke-with=2 stroke-dasharray="2,2"/>
<line x1=20 y1=140 x2=180 y2=140 stroke= navy stroke-with=2 stroke-dasharray="6,6"/>
<line x1=20 y1=170 x2=180 y2=170 stroke= navy stroke-with=2 stroke-dasharray="12,4 2,4 2,4"/>
</svg> 


Polilíneas

Una polilínea es una sucesión de líneas rectas en la que cada una empieza donde acaba la anterior. También se le llama línea quebrada. Para dibujar una polilínea pondremos un código como el siguiente:

<svg height=200 width=200>
  <polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170"
	stroke="red" stroke-width=4 fill="yellow" />
</svg> 

El nombre de la etiqueta polyline indica que se traza una polilínea.

Los atributos stroke y stroke-width nos dan el color y el grosor de la línea.

El atributo fill crea un relleno en la figura. Para ello traza una línea recta del primer punto al último y rellena con el color indicado las zonas que quedan dentro.

El atributo points funciona como en el polígono, es decir, cada pareja de números indica las coordenadas de un punto. Al contrario que en el polígono, aquí el último punto no se cierra con el primero.






En la siguiente página seguiremos incluyendo figuras con SVG

Dibujar rutas



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com