MOOC-contenido svg html5

SVG

Imágenes vectoriales SVG
Profesor: Javier López

Volver

¿Qué son las imágenes SVG?
Varios ejemplos simples

Las palabras mágicas
Un truco útil

• ¿Qué son las imágenes SVG?
Con el elemento SVG (Scalable Vector Graphics) podemos crear imágenes vectoriales redimensionables de manera dinámica o interactiva utilizando diferentes atributos. Al convertirse en
2001 en unarecomendación del W3C ya es aceptado en la mayoría de navegadores (Firefox desde la versión 1.5, Opera desde su versión 8, Chrome y Safari de manera conjunta, y
también increiblemente Internet Explorer, desde su versión 9).
Estos atributos son rect (para crear rectángulos), circle (que no hace falta traducir), line, ellipse, polygon, polyline (multi-lineas) y text.
Antes de tratarlos un poco másextensamente, vamos a presentar algunos ejemplos rápidos y socorridos, ... como no ... con banderas de algunos países, ya que la mayoría son fáciles
de dibujar.

• Varios ejemplos simples
Japón





Italia




http://www.edutopia.es/mooc/t6_SVG.html[02/08/2014 12:22:58 a.m.]

SVG


Alemania





Catalunya


Suiza






Para el dibujo de estas banderas se han utilizadoúnicamente rectángulos (rect) y un círculo (circle) dentro de sus respectivos (svg), pero existen otros atributos muy interesantes:

• Las palabras mágicas

Lo primero y obligatorio es agrupar todos los atributos dentro de un .
Cabe decir que en los casos de Catalunya y Noruega (de los ejemplos superiores) los 'rect' utilizados no se han encerrado en un para no romper la maquetación queiguala a
todas las banderas, pero para que su código sea correcto debe estar contenido entre un y un .


http://www.edutopia.es/mooc/t6_SVG.html[02/08/2014 12:22:58 a.m.]

SVG

En este caso se crea un "lienzo" de 300 píxeles de ancho por 200 píxeles de alto. Si dentro de estos 2 tags no se introduce ningún atributo no se dibuja nada.

rect
Para la creación de rectángulos y cuadradostenemos el atributo rect, que tiene las siguientes propiedades (las que no se utilicen se pueden omitir):
x: Coordenada horizontal desde donde se va a empezar a dibujar el rectángulo.
y: Coordenada vertical desde donde se va a empezar a dibujar el rectángulo.
rx: Suavidad de los bordes horizontales (el valor 0 equivale a esquinas puntiagudas "no
redondeadas")
ry: Suavidad de los bordes verticales(el valor 0 equivale a esquinas puntiagudas "no
redondeadas")
width: Anchura del rectángulo.

height: Altura del rectángulo.
fill: Color del relleno (en código hexadecimal o escribiendo directamente el nombre del
color)
stroke: Color de la línea que rodea al rectángulo.
stroke-width: Grosor de la línea (en píxeles).
opacity: Opacidad (0 es transparencia total y 1 opacidad total).



Eneste caso se trataría de un cuadrado de unas dimensiones de 60 píxeles de ancho por 60 píxeles de alto, que empieza a dibujar en las coordenadas 0/0 (tomando como inicio la
esquina superior izquierda donde está ubicado el svg), con unos ángulos suaves y redondeados (12). Con un color oro (gold) de relleno, un grosor de 1 píxel de color verde y todo con
una transparencia del 80%.

circle
Parala creación de círculos (no elipses, para los que existe un atributo propio):
cx: Coordenada horizontal del centro del círculo.
cy: Coordenada vertical del centro del círculo.
r: Radio del círculo (es la mitad de su anchura o altura total).
fill: Color del relleno.

stroke: Color de la línea que rodea al círculo).
stroke-width: Grosor de la línea (en píxeles).
opacity: Opacidad (0 estransparencia total y 1 opacidad total).



Círculo con un radio de 45px (por lo tanto medirá 90 píxeles de ancho y alto), ubicado el centro del círculo en las coordenadas 100/100. Con un color 'oliva' de relleno, un grosor de 1
píxel de color negro y todo con una opacidad del 90%.

http://www.edutopia.es/mooc/t6_SVG.html[02/08/2014 12:22:58 a.m.]

SVG

ellipse
Para la creación de...