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





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 (I)

Introducción

SVG
Sobre ésta página

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

Visitas este mes: 284

Visitas el mes pasado: 504

Qué es SVG

SVG (Scalable Vector Grafics) significa Vectores Gráficos Escalables. Dicho así tal vez no lo entendamos, pero lo entendremos mejor si decimos que es una aplicación para hacer dibujos, banners, gráficos, etc. tanto estáticos como animados.

Con SGV podemos hacer las mismas cosas que con canvas, sin embargo su forma de trabajar es diferente.

Mientras que con canvas los dibujos se crean mediante píxeles (mapa de bits). con SVG se crean mediante gráficos vectoriales. Esto significa que el dibujo se adapta al tamaño, de forma que al ampliarlo o reducirlo en la pantalla se muestra siempre uniforme y no muestra los contornos de los píxeles para ampliaciones muy grandes. Esto en pantalla tal vez no tenga mucha inportancia, pero si queremos imprimirlo en un tamaño grande los dibujos hechos con SVG muestran un mejor acabado.


Características de SVG

SVG es fácil de usar, ya que se basa en el lenguaje XML, es decir el mismo lenguaje de etiquetas que usa HTML. Esto significa que no tenemos que usar (en principio) javascript ni otro lenguaje diferente del HTML para incorporar figuras SVG en la página, ya que el XML es el mismo lenguaje de base que utilizan tanto HTML como SVG. Podemos por tanto crear las figuras y dibujos con SVG mediante etiquetas que incorporamos al lenguaje HTML.

Incluir elementos SVG en la página se puede hacer desde el mismo código HTML. SVG dispone de una serie de etiquetas y atributos para introducir los elementos. Vemos aquí a la derecha un círculo hecho mediante SVG. el código que hemos puesto para poder verlo es el siguiente:

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

No vamos a explicar de momento este código, ya que en páginas posteriores veremos cómo trabajar con SVG. Lo que queremos ver aquí es que con un simple código de etiquetas y atributos podemos crear dibujos en la página.

Al estar el código SVG formado por los mismos elementos que el HTML podemos también aplicarle los lenguajes CSS y javascript.

Con CSS podemos indicar el estilo de los distintos elementos. Para ello disponemos además de las propiedades habituales de CSS de algunas propiedades especiales para estos elementos que veremos más adelante.

Con javascript podemos dar movimiento a los elementos creados con SVG y realizar otra serie de efectos (aparición, desaparición, agrandar, etc.). También podemos realizar estos efectos mediante CSS3. Sin embargo también podemos crear animaciones mediante el código SVG, sin necesidad de utilizar javascript ni CSS3, Veremos todo esto más adelante en este manual.


Introducir código SVG en la página

Cómo se ha visto anteriormente para introducir un elemento SVG en la página podemos utilizar la etiqueta <svg> ... </svg>. Este es el elemento contenedor dentro del cual dibujaremos los demás elementos.

Debemos indicar mediante los atributos witdh y height la anchura y la altura del elemento contenedor, o podemos indicarlo también mediante codigo CSS. En todo caso hay que dar siempre una altura y anchura este elemento.

También podemos poner el elemento SVG en un archivo aparte, para después incorporarlo a la página en el sitio que queramos. Para ello creamos un nuevo archivo en el que incorporamos el código SVG.

El archivo tendrá la siguiente sintaxis:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
... código del contenido de SVG
</svg> 

El código va encerrado dentro de la etiqueta "svg". Al ser éste un lenguaje XML es conveniente poner en la etiqueta los atributos de este lenguaje es decir

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

Después pondremos el código en SVG y al final cerramos la etiqueta "svg".

Todo ello lo guardaremos en un archivo aparte con la extension .svg, por ejemplo circulo.svg.

Para incluir después este archivo en la página podemos hacerlo de varias maneras:

En cualquier caso debemos incluir la ruta del archivo, y la altura y anchura de la ventana donde veremos el SVG (atributos "height" y "width").


Compatibilidad con navegadores.

SVG es compatible con todos los navegadores en sus versiones modernas, si bien en Internet explorer sólo es compatible con las versiones 9 en adelante. Para versiones anteriores es necesario usar un plugin. Podemos usar "Adobe SVG Viewer, el cual nos lo podemos descargar desde la página de Adobe:

http://www.adobe.com/devnet/svg/adobe-svg-viewer-download-area.html

Si el navegador del usuario no es compatible podemos advertirselo para que cambie a otro dentro de la etiqueta "svg", como texto de la misma, por ejemplo:

<svg width=200 height=200>
<circle cx=100 cy=100 r=90 stroke="blue" stroke-width=3 fill="aqua"/>
Tu navegador no es compatible con SVG, por favor cambia a Firefox, Chrome, Opera o Safari.
</svg>

hemos incluido un texto dentro de la etiqueta SVG. Este texto sólo se verá si el navegador no es compatible, de esta manera advertimos al usuario de que la página no se verá de forma completa.




En la siguiente página veremos cómo incluir figuras sencillas con SVG

Figuras básicas



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