SVG

BOTELLO ROMERO JUAN AARON

CARRANZA GOMEZ J. LEONARDO
CHAVEZ ESPINOZA JAIR
ESPINOZA MENDOZA GERARDO
 QU ES SVG?
Scalable Vector Graphics.
(Grficos Vectoriales Redimensionables)

Es un formato de grficos vectoriales

bidimensionales, tanto estticos como animados, en
formato XML.
Es muy til para su uso online, por su flexibilidad y
por la capacidad de ofrecer grficos con calidad.
 ALGUNAS VENTAJAS...
SVG es vectorial, lo que supone tener todas las ventajas
de cualquier formato vectorial. Es escalable, pesa poco y
permite una definicin mayor a tamaos reducidos,
mucho mayor que los archivos bitmap (formato de
imagen de mapa de bits).

El formato es igual al que se utiliza con cualquier

programa vectorial como Corel Draw o Adobe Illustrator.
STANDARD ABIERTO Y COMPATIBLE.
SVG es un formato abierto, estndar y basado en
XML. Aunque las primeras versiones no se podan
ver en los diferentes navegadores, hoy ya es un
estndar que funciona sin problemas en todos los
navegadores.

A ser un formato basado en XML necesitamos

cierto control de cdigo para hacer que un archivo
SVG funcione adecuadamente.
TIPOS DE OBJETOS GRFICOS

La especificacin de SVG permite tres tipos de

objetos grficos:

Elementos geomtricos vectoriales.

Imgenes de mapa de bits/digitales.

Texto.
 ELEMENTOS GEOMTRICOS
Los elementos geomtricos son objetos provistos de
atributos genricos bsicos y optativos o por defecto.
Todos los objetos se encuentran enmarcados en una
ventana, con un ancho (width) y un alto (height)
determinados con nmeros enteros.

Esta ventana posee un sistema de coordenadas cuyo

origen est situado en la parte superior izquierda y en el
cual los valores positivos de x y y se orientan a la
derecha y hacia abajo respectivamente.
 ATRIBUTOS
Todos los objetos comparten algunos atributos genricos:

Todo elemento visual de una figura tiene un color con 4

posibles expresiones con el color negro por defecto.

Toda figura tiene un contorno cuyo grosor y color

pueden ser modificados, respectivamente.

Casi todas las figuras tienen un relleno que puede ser

modificado en color, fill, difuminado o filtrado de
distintas formas.
 ICONOS RESPONSIVE
En la actualidad todas las webs estn migrando al
formato RESPONSIVE, as que nos encontramos
multitud de iconos que se redimensionan en funcin del
ancho de la pantalla.

Normalmente el funcionamiento suele ser sustituir un

icono bitmap por otro ms pequeo.

Con SVG podemos utilizar el mismo y que se vaya

reduciendo poco a poco, o bien que utilizar varios
tamaos pero que todos ellos sean SVG con la ventaja
de la mejor visualizacin al ser vectorial.
EJEMPLO
NAVEGADORES QUE
SOPORTAN SVG.

Mozilla Firefox
Opera
Windows Internet Explorer
Apple Safari
Google Chrome
Microsoft Edge
VENTAJAS DE LAS IMGENES
VECTORIALES
Mantienen la calidad y nitidez a cualquier resolucin.

Estn formadas por una serie de pixeles o puntos coloreados y

al redimensionarlas o aumentar el zoom se pixelizan y pierden
calidad.

Las imgenes vectoriales contienen las instrucciones para el

navegador o programa de visualizacin de cmo crear la
imagen.

Es por eso que al aumentar el zoom siguen mostrndose

ntidamente a cualquier resolucin.
 FIGURAS BASICAS
Cualquier objeto que deseemos aadir con SVG debe
tener su cdigo dentro de la etiqueta <svg> ... </svg>

Para dibujar un crculo bsico pondremos el siguiente

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

circle: Esta etiqueta con este nombre indica que se dibujar un crculo.

cx=n cy=n: Los atributos cx y cy indican las coordenadas del centro del crculo. con cx se indica
la distancia horizontal en pixeles desde el borde izquierdo del contenedor al centro del crculo.
cy es la distancia en pxeles desde el borde superior al centro del crculo.

r=n: Con este atributo indicamos la longitud del radio de la circunferencia medido en pxeles.

stroke="color": indica el color de la lnea exterior que delimita a la figura. Como valor se pone
un color. Este puede ir escrito en cualquier nomenclatura aceptada por HTML5
stroke-width=n: indica el grosor de la lnea exterior que delimita a la figura. El valor ser un
nmero que indica el nmero de pixeles.

fill="color": indica el color de relleno del interior de la figura. Como valor se pone un color que
puede ir escrito en cualquier nomenclatura aceptada por HTML5.
GRACIAS POR SU
ATENCION