Casita con SVG

     Esta la animación de una casa, consiste en cambio de colores entre un muro y otro en determinado tiempo y por un periodo indefinido, en la parte superior encontramos círculos continuos que se forman consecutivamente, bastante sencillo.

Descarga la casita aqui...

Pepsi

El logo de Pepsi se realizo para trabajar con los path, se solicita que el logo evaluado sea el logo de Volkswagen
Para descargar codigo clic aqui

Bochito

Para descargar codigo clic aqui

Gato completo

Para descargar el codigo clic aqui

Hoja externa

Para descargar codigo clic aqui

Logo de Coca-Cola

Para descargar codigo clic aqui

Flor

Para descargar el codigo da clic aqui

Estrella en SVG

Para descargar codigo clic aqui

Cabeza de gato en SVG

Para descargar el codigo clic aqui

Logo de Volkswagen en SVG

hecho con SVG

Original

Para descargar el codigo da clic aqui

Piramide en SVG

Para descargar el codigo da clic aqui

Tiro al blanco

Para descargar el codigo da clic aqui

Bandera de México

En esta practica se desarrollo la Bandera de nuestro pais, con ayuda de rectangulos y degradados.

Para descargar el codigo da clic aqui

CONCEPTOS BÁSICOS DE SVG

• Figura básica. figuras predefinidas en SVG para su fácil diseño. En este trabajo nos concentraremos en línea y polilínea, aunque también SVG define rectángulo, círculo, elipse y polígono.

• Estilo. También referenciado como estilamiento, es la capacidad de enriquecer el formato de las figuras. Incluye instrucciones para el color de relleno, el color del borde y el ancho del borde, entre otros.

• Vista. Es un cuadro que delimita el espacio del usuario y lo transporta al lienzo, a fin de transformar adecuadamente las coordenadas de los puntos.
• Espacio del usuario. Es el espacio donde el usuario puede expresar los objetos del documento, el cual no es necesariamente del tamaño del lienzo.
• Pincel. Propiedad que indica cómo se pintará la línea que contiene a la figura. Esta propiedad puede incluir el grosor de la línea, el color y el estilo (Punteado, continuo, doble, etc.).
• Relleno. Propiedad que indica cómo se pintará el interior de la figura a tratar, en caso de que ésta se encuentre cerrada. Esto quiere decir que el último punto de la figura debe de ser igual al primero. El pintado de la figura no es únicamente el color, sino el estilo y el efecto que se utilizará para pintarlo (features).
• Propiedad. Se trata de instrucciones sobre cómo pintar la figura que se está tratando. En SVG se hace similarmente a como se define el estilo en el lenguaje HTML, mediante estilos en el lenguaje CSS (Hojas de estilo en cascada).Fragmento SVG. Es la etiqueta principal de XML que contiene al documento. La sintaxis de SVG permite más etiquetas svg dentro de la primera etiqueta svg.
• Contenedor. Algunos elementos del lenguaje pueden contener más elementos, ya sea para modificarlos en estilo o para agruparlos.
• Lienzo. Superficie sobre la que se pinta, puede ser la pantalla o una hoja de papel.

SVG

Scalable Vector Graphics (SVG) es una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en formato XML.
Si analizamos esta información lo que quiere decir es que podemos definir gráficos apoyándonos en vectores, lo que nos puede proporcionar una ventaja muy grande frente a otros formatos que se basan en mapas de bytes, y más aun manteniendose dentro del estándar de XML.

SVG se convirtió en una recomendación del W3C en septiembre de 2001, por lo que ya ha sido incluido de forma nativa en el navegador web del W3C Amaya. La versión 1.5 de Mozilla Firefox soporta gráficos hechos con SVG y desde su versión 8, también el navegador Opera ha implementado SVG 1.1 Tiny en su núcleo. Otros navegadores web, como Internet Explorer, necesitan un conector o plug-in, para lo que se puede utilizar el Visualizador SVG de Adobe.

El SVG permite tres tipos de objetos gráficos:

• Formas gráficas de vectores (p.e. caminos consistentes en rectas y curvas, y áreas limitadas por ellos)
• Imágenes de mapa de bits /digitales.
• Texto

Los objetos gráficos pueden ser agrupados, transformados y compuestos en objetos previamente renderizados, y pueden recibir un estilo común. El texto puede estar en cualquier espacio de nombres XML admitido por la aplicación, lo que mejora la posibilidad de búsqueda y la accesibilidad de los gráficos SVG. El juego de características incluye las transformaciones anidadas, los clipping paths, las máscaras alfa, los filtros de efectos, las plantillas de objetos y la extensibilidad.

El dibujado de los SVG puede ser dinámico e interactivo. El Document Object Model (DOM) para SVG, que incluye el DOM XML completo, permite animaciones de gráficos vectoriales sencillas y eficientes mediante ECMAScript o SMIL. Un juego amplio de manejadores de eventos, como "onMouseOver" y "onClick", pueden ser asignados a cualquier objeto SVG. Debido a su compatibilidad y relación con otras normas Web, características como el scripting pueden ser aplicadas a elementos SVG y a otros elementos XML desde distintos espacios de nombre XML simultáneamente dentro de la misma página web.

Si el espacio de almacenamiento es un problema, las imágenes SVG pueden salvarse comprimidas con gzip, en cuyo caso pasan a ser imágenes SVGZ. Debido a la verbosidad del XML, este tiende a comprimirse muy bien, y estos ficheros pueden ser mucho más pequeños. Aun así, a menudo el fichero vectorizado original (SVG) es más pequeño que la versión de mapa de bits.

La continua aparición de dispositivos que acceden a la web, tales como  PDA's o moviles dan cada vez más importancia a los gráficos vectoriales dada la flaxibilidad que estos aportan. Sin embargo SVG no fue el primer formato gráfico vectorial ya que existian otros tales como SWF, pero con el inconveniente de que no estaban desarrollados especificamente en el entorno web. En la misma línea de actuación que SVG tenemos Shockwave Flash, que aun siendo un lenguaje cerrado gana la batalla a SVG hasta ahora, pero en el futuro las posibilidades de SVG ganan enteros al poder insertarse este en páginas XML a diferencia de Flash que es una solución externa a este y privada.

SVG al ser un vocabulario de XML ha de serguir las caracteristicas que este define, por tanto debe tener una raíz que albergue a todo documento, que sera en este caso <svg>. A su vez, cada apertura ha de tener su correspondiente cierre. El código entre <svg> </svg> puede insertarse dentro de un documento XML que a su vez podria ser otro SVG.

NAVEGADORES

• Firefox: implementa SVG en forma nativa desde su versión 1.5. A través del tiempo fue mejorando el cumplimiento del estándar, pero con alto consumo de procesador. En la nueva versión 3.5 de Firefox se puede comprobar que el render SVG se ha modificado y mejorado.
• Opera: al igual que Firefox también implementa SVG en forma nativa, pero con poco consumo de procesador. La versión 9.5 Beta, incorpora la posibilidad de llamar en forma externa a una imagen en formato svg. Usando <image> o <use>.
• MSIE: No implementa directamente SVG, por lo que se debe conseguir una extensión de la firma Adobe. Este módulo externo no permite mezclar SVG con HTML (XHTML). Microsoft no ve con futuro a este estándar por lo que apostó al VML. El 5 de enero de 2010, Microsoft publicó que pasarían a formar parte del grupo de trabajo SVG en la W3C.2
• Safari: Su versión 3.1 (para computadores con sistema operativo Windows o Mac OS X) implementa SVG tanto para imágenes como para texto avanzado.
• Chrome: Desde su primera versión implementa SVG de forma nativa (ya que utiliza WebKit).

HISTORIA DE GRAFICOS

1950. La graficación por computadora tuvos sus inicios con el surgimiento de las compuntadoras digitales. Una computadora digital cmo la Whirlwhin de la Mit fue de las primeras en utilizar una pantalla capaz de presentar gráficos.

 Surgio el primer sistema de dibujo por computadora, la DAC-1 (Desing Augmented by Computers). Fue creapo por General Motors e IBM. La DAC-1 permitia al usuario describir un automóvil en 3D con la capacidad de rotar.

1959.

1960 - 1970. Ivan Suterland (estudiante de MIT), creó un progroma que llámo Sketchpad, mediante el cual podía realizar trazos en la pantalla de la computadora auxiliandose de una pluma de luz. En 1961 otro estudiante de MIT, Steve Rusell creó el primer juego de video, llamado guerra espacial. Escrito para la DEC PDP-1, la Guerra Espacial fue un éxito inmediato.

1970- 1980. Los años 70considerado la instroducción de los gráficos por computadora en el mundo de la televisión. Computer Image Corporation (CIC), desarrolló sistemas complejos de la dotación física y e software tales como ANIMAC, SCANIMATE y CAESAR.

1980 - 1990. Turner Whitted publicó un artículo en el año 80 sobre un nuevo método de representación para simular superficies altamente reflexivas. Conocido hoy como Ray Tracing.

1999 - 2000. En la pelicula Jurassic Park revoluciona los efectos visuales, al crear dinosaurios como nunca antes se habian visto, con la ayuda de las computadoras

MAPA DE BITS

Una imagen rasterizada, también llamada bitmap, imagen matricial o pixmap, es una estructura o fichero de datos que representa una rejilla rectangular de pixeles o puntos de color, denominada raster, que se puede visualizar en un monitor de ordenador, papel u otro dispositivo de representación.

A las imágenes rasterizadas se las suele caracterizar técnicamente por su altura y anchura (en pixels) y por su profundidad de color (en bits por pixel), que determina el número de colores distintos que se pueden almacenar en cada pixel, y por lo tanto, en gran medida, la calidad del color de la imagen.

Los gráficos rasterizados se distinguen de los gráficos vectoriales en que estos últimos representan una imagen a través del uso de objetos geométricos como curvas de Bézier y polígonos, no del simple almacenamiento del color de cada pixel. El formato de imagen matricial está ampliamente extendido y es el que se suele emplear para tomar fotografías digitales y realizar capturas de vídeo. Para su obtención se usan dispositivos de conversión analógica-digital, tales como escáneres y cámaras digitales.

La palabra “raster” tiene su origen en el latín rastrum (rastrillo), que se deriva de radere (raspar).

RESOLUCIÓN DE UNA IMAGEN DE MAPA DE BITS

La resolución de una imagen es el un concepto que suele confundir bastante, principalmente porque no es un concepto único, sino que depende del medio en el que la imagen vaya a ser visualizada o tratada. Así, podemos hablar de resolución de un archivo digital, resolución de impresión, resolución de semitono, resolución de escaneado, etc.

Tal vez el concepto más ligado a la propia naturaleza de la imagen digital sea el de resolución del archivo digital, definida como el número de píxeles distintos que tiene una imagen por unidad de longitud, es decir, la densidad de éstos en la imagen. Sus unidades de medida son los píxeles por pulgada (ppp o ppi, pixels per inch, en inglés) o los píxeles por centímetro (más raramente). Cuanto mayor sea esta resolución, más contenedores de información (píxeles) tiene el fichero digital, más calidad tendrá la imagen y más peso en Kb tendrá el fichero.

IMAGENES VECTORIALES

Una imagen vectorial es una imagen digital formada por objetos geométricos independientes (segmentos, polígonos, arcos, etc.), cada uno de ellos definido por distintos atributos matemáticos de forma, de posición, de color, etc. Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color. Este formato de imagen es completamente distinto al formato de los gráficos rasterizados, también llamados imágenes matriciales, que están formados por píxeles. El interés principal de los gráficos vectoriales es poder ampliar el tamaño de una imagen a voluntad sin sufrir el efecto de escalado que sufren los gráficos rasterizados. Asimismo, permiten mover, estirar y retorcer imágenes de manera relativamente sencilla. Su uso también está muy extendido en la generación de imágenes en tres dimensiones tanto dinámicas como estáticas.

Uno de los primeros usos de las gráficas vectoriales se dio en la Fuerza Aérea de los Estados Unidos. Este sistema de gráficas por vectores se usó hasta 1999 en el control aéreo y es probable que se siga utilizando en algunos sistemas
Hoy en día los principales usos de las gráficas vectoriales se da en dibujos lineales y gráficos con formas nítidas, como planos, mapas, diagramas, logos. Estas gráficas sirven para este tipo de trabajo porque son precisas, editables, escalables, etc. También se utilizan para crear formas simples (iconos, pequeñas ilustraciones, etc). Pero también se pueden usar para aplicaciones más artísticas, ya que los programas actuales de dibujo pueden crear imágenes de gran calidad.
Las aplicaciones de las gráficas vectoriales se pueden ver también en la animación por gráficos; aunque sin duda su introducción en las páginas web creó un considerable avance porque permiten incluir gráficos de tamaño modificable que no pierden calidad, muy útiles en logos, planos, diagramas, etc.
Otras formas de uso de las gráficas vectoriales pueden ser en textos, en multimedia y en la creación de escenarios 3D.

CARACTERISTICAS DE LAS GRAFICAS VECTORIALES

Las gráficas vectoriales se construyen a partir de puntos, líneas, curvas o polígonos. Estas son controladas por cálculos y fórmulas matemáticas.
En las graficas cada vector tiene un contorno, con un color y un grosor que se pueden cambiar en cualquier momento.
Cada objeto dentro del dibujo se maneja independientemente del resto. Se puede escalar, distorsionar y cambiar de forma o de posición sin afectar los otros elementos del dibujo.
Si se modifica el tamaño de las imágenes y de los objetos que las componen no se pierde la calidad de estas.
Cualquier efecto que se aplique a los objetos puede rectificarse en cualquier momento, debido a que el dibujo es siempre editable.
Las letras se pueden convertir en contornos modificables, descomponiendo un texto en los objetos vectoriales que lo componen.
Es fácil reutilizar un dibujo o parte de éste en otros proyectos.
Estas gráficas se guardan en archivos muy compactos, ya que sólo requiere las fórmulas matemáticas necesarias para generar cada uno de los vectores.

GRAFICACIÓN

Una gráfica es una representación de datos, generalmente numéricos, mediante líneas, superficies o símbolos, para ver la relación que guardan entre sí. También puede ser un conjunto de puntos, que se plasman en coordenadas cartesianas, y sirven para analizar el comportamiento de un proceso, o un conjunto de elementos o signos que permiten la interpretación de un fenómeno.

La graficación por computadora es una de las áreasmas importantes de las ciencias de la computación y su principal objetivo es establecer los principios, técnicas y algoritmos para la generación y manipulación de imágenes mediante una computadora.
Las imágenes pueden ser de distinta complejidad, en dos dimensiones hasta modelos tridimensionales donde se requiere producir imágenes de aspecto real.
Desde que las computadoras aparecieron se intento producir imágenes que pudieran verse a través de la pantalla. Al paso del tiempo los componentes electrónicos y computadoras han ido mejorando, y se ha llegado a unpunto, que de hoy en día podemos contar con una computadora por muy sencilla que sea con alguna herramienta grafica.

Este campo puede ser dividido en varias áreas: Interpretado 3D en tiempo real (a menudo usado en juegos de vídeo), animación de computadora, captura de vídeo y creación de vídeo interpretado, edición de efectos especiales (a menudo usado para películas y televisión), edición de imagen, y modelado (a menudo usado para ingeniería y objetivos médicos). El desarrollo en la gráfica realizada por computadora fue primero alimentado por intereses académicos y patrocinio del gobierno. Sin embargo, cuando las aplicaciones verdaderas mundiales de la gráfica realizada por computadora (CG) en televisión y películas demostraron una alternativa viable a efectos especiales más a las tradicionales y las técnicas de animación, los comerciales han financiado cada vez más el avance de este campo.

GRAFICOS 2D DE COMPUTADORA

El primer avance en la computación gráfica fue la utilización del tubo de rayos catódicos. Hay dos acercamientos a la gráfica 2d: vector y gráficos raster. La gráfica de vector almacena datos geométricos precisos, topología y estilo como posiciones de coordenada de puntos, las uniones entre puntos (para formar líneas o trayectos) y el color, el grosor y posible relleno de las formas. La mayor parte de los sistemas de vectores gráficos también pueden usar primitivas geométricas de forma estándar como círculos y rectángulos etc. En la mayor parte de casos una imagen de vectores tiene que ser convertida a una imagen de trama o raster para ser vista.

Los gráficos de tramas o raster (llamados comúnmente Mapa de bits) es una rejilla bidimensional uniforme de pixeles. Cada pixel tiene un valor específico como por ejemplo brillo, transparencia en color o una combinación de tales valores. Una imagen de trama tiene una resolución finita de un número específico de filas y columnas. Las demostraciones de computadora estándares muestran una imagen de trama de resoluciones como 1280 (columnas) x 1024 (filas) pixeles. Hoy uno a menudo combina la trama y lo gráficos vectorizados en formatos de archivo compuestos (pdf, swf, svg)

GRÁFICOS 3D DE COMPUTADORA

Con el nacimiento de las estaciones de trabajo (como las máquinas LISP, Paintbox computers y estaciones de trabajo Silicon Graphics) llegaron los gráficos 3D, basados en la gráfica de vectores. En vez de que la computadora almacene la información sobre puntos, líneas y curvas en un plano bidimensionales, la computadora almacena la posición de puntos, líneas y típicas caras (para construir un polígono) en un Espacio de tres dimensiones.

Los polígonos tridimensionales son la sangre de prácticamente todos los gráficos 3d realizados en computadora. Como consiguiente, la mayoría de los motores de gráficos de 3D están basados en el almacenaje de puntos (por medio de 3 simples coordenadas Dimensionales X,Y,Z), líneas que conectan aquellos grupos de puntos, las caras son definidas por las líneas, y luego una secuencia de caras crean los polígonos tridimensionales.

El software actual para generación de gráficos va más lejos de sólo el almacenaje de polígonos en la memoria de computadora. Las gráficas de hoy no son el producto de colecciones masivas de polígonos en formas reconocibles, ellas también resultan de técnicas en el empleo de Shading(Sombreadores), texturing(Texturizado o mapeado) y la rasterización (En referencia a mapas de bits).