PDF de programación - HTML en castellano. SVG / JavaScript html xhtml

HTML en castellano. SVG / JavaScript html xhtml



Buscador

Inicio > Tutoriales > Javascript > SVG / JavaScript



Secciones

Noticias
Blogs
Cursos
Artículos
Foros
Código fuente
Direcciones
Formación
Tienda
Cursos bbdd

Otras zonas
ASP en castellano
Bases de datos en
castellano
Java en castellano
PHP en castellano

Otras zonas

HTML
JavaScript
XML
y mucho más

Libros

Registro

Nombre de usuario:

Contraseña:

Tutoriales

SVG / JavaScript

Autor: Ricardo Borillo Domenech



l Introducción

Introducción

Para empezar diremos que SVG significa Scalable Vector Graphics y que define un
lenguaje basado en XML para la construcción de gráficos vectoriales 2D con multitud de
efectos y características avanzadas.

Repasando algunas de las tecnologías o estándares del W3, tenemos que:

l XML o XHTML representan los datos, la información a representar. Algunos

lenguajes basados en XML como MathML o CML definen conjuntos concretos de
tags destinados a un fin específico como son el lenguaje matemático o químico.

l CSS o XSL definen la presentación que tendrán los datos en diversos medios.

l SVG define la representación de gráficos dentro de cualquier documento.

l SMIL permite realizar animaciones basadas en tiempo.

Utilidades
Leer
comentarios
(5)
Escribir
comentario
Puntuación:
(13
votos)
Votar
Recomendar
este tutorial
Estadísticas



Patrocinados



SVG es el equivalente, basado en estándares, a la opción comercial de Macromedia:
Flash. SVG es una recomendación del W3, el contenido de cada fichero es XML y no un
formato binario cerrado.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
<circle cx="6cm" cy="2cm" r="100" style="fill:red;"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:green;"
transform="translate(-70,150)"/>
</g>
</svg>



Desde Febrero del 2004 la implementación de Mozilla que soporta SVG ha sido dotada con
la posibilidad de cambiar el backend de renderizado SVG en función de la plataforma.
Actualmente, el más avanzado es el basado en la GDI+ de Windows.

Otras Webs

Foro html

Implicaciones de este cambio:

http://www.programacion.com/html/tutorial/svg/1/ (1 de 3) [19/09/2007 8:18:48]

HTML en castellano. SVG / JavaScript html xhtml

Recursos Gratis

l Mozilla soporta documentos que contienen SVG, MathML, XHTML o XUL en un

mismo documento. Esto es posible gracias a que Mozilla soporta espacios de
nombres (XML Namespaces).

l Todo este contenido puede ser accedido via scripting utilizando el SVG DOM, el

cual es compatible con el XML DOM).

SVG es un lenguaje para la descripción de gráficos vectoriales en 2D en XML.

SVG permite la utlización de tres tipos de objectos gráficos:

l Objetos gráficos vectoriales (líneas, elipses, rectángulos, etc). Estos pueden ser

agrupados, formateados, transformados y compuestos para su visualización.

l Imágenes.

l Texto.

SVG soporta características avanzadas como:

l Transformación anidadas (matrices de transformación).

l Clipping Paths.

l Alpha Masks.

l Filtros gráficos.

l Interactividad y dinamismo, soportandos tanto de forma declarativa como vía

scripting.

El SVG DOM permite a los lenguajes de script el acceso a todos los elementos,
propiedades y atributos que componen un documento SVG. Además, existe la posibilidad
de asignar eventos a los distintos elementos (onmouseover o onclick).

Gracias a la estandarización de los elementos en SVG y su integración con XHTML,
podemos tener conviviendo scripts dentro de XHTML y SVG dentro del mismo documento.

El tipo MIME que utiliza SVG es "image/svg+xml" [RFC3023]. Se recomienda que los
ficheros SVG tengan extensión .SVG o .SVGZ (en minúsculas) en todas las plataformas.

Espacio de nombre utilizado por SVG:

http://www.w3.org/2000/svg

DOCTYPE para la versión 1.0:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

DOCTYPE para la versión 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



http://www.programacion.com/html/tutorial/svg/1/ (2 de 3) [19/09/2007 8:18:48]

Utilidades



Leer comentarios (5)
Escribir comentario
Puntuación:
(13 votos)
Votar
Recomendar este
tutorial
Estadísticas


Patrocinados


HTML en castellano. SVG / JavaScript html xhtml



Buscador

Inicio > Tutoriales > Javascript > SVG / JavaScript

Tutoriales

SVG / JavaScript

Autor: Ricardo Borillo Domenech



l Beneficios de la utilización de SVG



Secciones

Noticias
Blogs
Cursos
Artículos
Foros
Código fuente
Direcciones
Formación
Tienda
Cursos bbdd

Otras zonas
ASP en castellano
Bases de datos en castellano
Java en castellano
PHP en castellano

Otras zonas

HTML
JavaScript
XML
y mucho más

Libros

Registro

Nombre de usuario:

Contraseña:

Beneficios de la utilización de SVG

l Renderizado con antialiasing.

l Patrones de relleno y gradientes.

l Filtros y efectos avanzados.

l Clipping.

l Animaciones.

l No pierde calidad si se hace zoom o si se

redimensiona.

l Puede escalarse.

l Ideal para ser impreso.

l Pueden mostrase de forma progresiva (igual que los

GIF), no teniendo que esperar a que todo el
documento sea descargado.

l Pueden distribuirse en formato comprimido GZIP
para la reducción del tiempo de descarga .SVGZ.

l Pueden ser indexados y buscados debido a que su

contenido es XML y es textual.

l Pueden ser transformados por hojas de estilos (XSL

o CSS).

http://www.programacion.com/html/tutorial/svg/2/ (1 de 2) [19/09/2007 8:19:12]

HTML en castellano. SVG / JavaScript html xhtml



Otras Webs

Foro html
Recursos Gratis

l Integración con otras tecnologías XML del W3 y

compatible con:

m XML 1.0

m XML Namespaces

m XLink y XML Base para la referencia a

URIs

m XPointer

m CSS

m XSL

m DOM nivel 1 y 2 incluyendo DOM-Style y

DOM-Event

m SMIL 1.0. Sólo algunas de sus

funcionalidades

m HTML 4 y XHTML 1.0

m UNICODE

m WAI. Accesibilidad a contenidos web



Copyright © 1999-2006 Programación en castellano. Todos los derechos reservados.

Formulario de Contacto - Datos legales - Publicidad

Hospedaje web y servidores dedicados linux por Ferca Network

red internet: musica mp3 | logos y melodias | hospedaje web linux | registro de dominios | servidores dedicados

más internet: comprar | recursos gratis | posicionamiento en buscadores | tienda virtual | gifs animados

http://www.programacion.com/html/tutorial/svg/2/ (2 de 2) [19/09/2007 8:19:12]

HTML en castellano. SVG / JavaScript html xhtml



Buscador

Inicio > Tutoriales > Javascript > SVG / JavaScript

Tutoriales

SVG / JavaScript

Autor: Ricardo Borillo Domenech



l SVG: Estructura básica de un documento

SVG: Estructura básica de un documento

Utilidades
Leer
comentarios
(5)
Escribir
comentario
Puntuación:
(13
votos)
Votar
Recomendar
este tutorial
Estadísticas



Patrocinados



Secciones

Noticias
Blogs
Cursos
Artículos
Foros
Código fuente
Direcciones
Formación
Tienda
Cursos bbdd

Otras zonas
ASP en castellano
Bases de datos en
castellano
Java en castellano
PHP en castellano

Otras zonas

HTML
JavaScript
XML
y mucho más

Libros

Registro

Nombre de usuario:

Contraseña:



Otras Webs

Foro html
Recursos Gratis



<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
...
</svg>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html>
<body>
<embed src="http://a.com/b.svg" width="210" height="26"
type="image/svg+xml" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html>
<body>
<object type="image/svg+xml" data="layout02.svgz"
width="550" height="550">
<a href="layout02.svgz">
<img alt="layout02" src="layout02.png"/>
</a>
</object>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://ww.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html>
<body>
<object type="image/svg+xml" data="layout02.svgz"
width="550" height="550">
<embed src="http://a.com/b.svg" width="210" height="26"
type="image/svg+xml" />
</object>
</body>
</html>

http://www.programacion.com/html/tutorial/svg/3/ (1 de 2) [19/09/2007 8:19:59]

HTML en castellano. SVG / JavaScript html xhtml



Buscador

Inicio > Tutoriales > Javascript > SVG / JavaScript

Tutoriales

SVG / JavaScript

Autor: Ricardo Borillo Domenech



l SVG: Definición del sistema de coordenadas

Utilidades



Leer comentarios (5)
Escribir comentario
Puntuación:
(13 votos)
Votar
Recomendar este tutorial
Estadísticas


Patrocinados



SVG: Definición del sistema de coordenadas

En SVG el área de dibujo es infinita. A continuación
veremos varias formas de decirle al visor de SVG en qué
área estamos interesados. El área utilizado por el
documento creado se conoce como Viewport. Podemos
establecer el tamaño del Viewport utilizando los atributos
"width" y "height" del elemento <SVG>.

Los valores que pueden tomar estos atributos pueden ser
simplemente números (si expresamos el tamaño en píxeles)
o en unas unidades concretas (puntos, pulgadas, picas,
centímetros, milímetros, etc).

El origen de coordenadas comienza en la esquina superior
izquierda, incrementándose la coordenada X hacia la
derecha y la Y hacia abajo. El punto (0, 0) se conoce como
origen de coordenadas.



Secciones

Noticias
Blogs
Cursos
Artículos
F