CSS Avanzado | Imágenes SGV

CSS3 incorpora la posibilidad de que a través de código

el navegador pueda dibujar (y mostrar) imágenes
vectoriales en pantalla a tiempo real. En este tema
vamos a ver cómo funciona y con qué etiquetas
contamos para dibujar nuestras propias obras de arte.
Con el elemento SVG (Scalable Vector Graphics)
podemos crear imágenes vectoriales redimensionables
de manera dinámica o interactiva utilizando diferentes
atributos.
CSS Avanzado | Imágenes SGV

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ás extensamente, 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.
CSS Avanzado | Imágenes SGV
CSS Avanzado | Imágenes SGV
CSS Avanzado | Imágenes SGV
CSS Avanzado | Imágenes SGV

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.
Lo primero y obligatorio es agrupar todos los atributos
dentro de un <svg>.
Cabe decir que en los casos de Catalunya y Noruega (de los
ejemplos anteriores) los 'rect' utilizados no se han
encerrado en un <svg> para no romper la maquetación que
iguala a todas las banderas, pero para que su código sea
correcto debe estar contenido entre un <svg> y un </svg>.
CSS Avanzado | Imágenes SGV

<svg width="300" height="200">

</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.
CSS Avanzado | Imágenes SGV

rect
Para la creación de rectángulos y cuadrados tenemos el
atributo rect, que tiene las siguientes propiedades (las
que no se utilicen se pueden omitir):
CSS Avanzado | Imágenes SGV

rect
Para la creación de rectángulos y cuadrados tenemos el
atributo rect, que tiene las siguientes propiedades (las
que no se utilicen se pueden omitir):
CSS Avanzado | Imágenes SGV

rect
<rect x="0" y="0" rx="12" ry="12" width="60"
heigh="60" fill="gold" stroke="green" stroke-
width="1" opacity="0.8"/>
En este 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%.
CSS Avanzado | Imágenes SGV

circle

Para la creación de círculos (no elipses, para los que

existe un atributo propio):
CSS Avanzado | Imágenes SGV

circle

Para la creación de círculos (no elipses, para los que

existe un atributo propio):
CSS Avanzado | Imágenes SGV

circle
<circle cx="100" cy="100" r="45" fill="olive"
stroke="black" stroke-width="1" opacity="0.9"/>

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%.
CSS Avanzado | Imágenes SGV

ellipse

Para la creación de círculos (no elipses, para la que

existe un atributo propio):
CSS Avanzado | Imágenes SGV

ellipse

Para la creación de círculos (no elipses, para la que

existe un atributo propio):
CSS Avanzado | Imágenes SGV

ellipse
<ellipse cx="100" cy="100" rx="50" ry="25"
fill="purple" stroke="black" stroke-width="1"/>

Ellipse con un radio horizontal de 50px (por lo tanto mediría 100

píxeles de ancho), y un radio vertical de 25 (tendrá una altura
total de 50 píxeles) ubicado (el centro de la elipse) en las
coordenadas 100/100. Con un color púrpura de relleno y un
grosor de 1 píxel de color negro (sin transparencia, ya que se ha
omitido -opacity-).
CSS Avanzado | Imágenes SGV

line

Se puedan crear líneas rectas, pudiendo especificar el

tipo de línea:
CSS Avanzado | Imágenes SGV

line

Se puedan crear líneas rectas, pudiendo especificar el

tipo de línea:
CSS Avanzado | Imágenes SGV

line
<line x1="0" y1="0" x2="260" y2="40"
stroke="fuchsia" stroke-width="4" stroke-
dasharray="18,7,9,20"/>
Línea que va desde la posición 0,0 (esquina superior izquierda definida por el svg)
hasta 260 píxeles a la derecha y 40 hacia abajo (osea, será una línea diagonal) de
un color fucsia de 4 píxeles de grosor y con un tipo de línea discontinua.
Los 4 valores de stroke-dasharray (18,7, 9,29) indican (por parejas) la continuidad
de la línea. Así, los dos primeros valores (18,7) indican, el primero, un tramo visible
de una longitud de 18 píxeles, seguido de un tramo de linea no visible de 7 píxeles.
Seguidamente, los dos valores siguientes (9,20), indican un tramo de 9 píxeles de
línea visible, seguido de 20 píxeles de tramo no visible, repitiendo dichos valores
hasta el final de la longitud de la línea.
CSS Avanzado | Imágenes SGV

polyline

Con más potencia que line, con polyline es posible crear

múltiples líneas que normalmente forman figuras con
una forma abierta.
CSS Avanzado | Imágenes SGV

polyline
<polyline points="0,90, 10,90, 10,40, 40,10, 50,20,
50,10, 60,10, 60,30, 70,40, 70,90, 80,90"
fill="none" stroke="black" stroke-width="3"/>
Con estas líneas se dibuja el contorno de una casa. Las líneas se describen
por parejas, siendo los valores del primer punto (0,90, coordenada situada
en la esquina inferior izquierda del espacio definido por el svg), que
describe una línea que se extiende hasta las coordenadas descritas en el
siguiente par de valores (10,90). Es decir, la primera línea se extiende desde
la coordenada (x=0/y=90) hasta la coordenada (x=10/y=90).
Así, estos primeros 4 valores dibujan una línea horizontal de 10 píxeles.
Para todo este conjunto de líneas se utiliza un color negro de 3 píxeles de
grosor sin ningún tipo de relleno.
CSS Avanzado | Imágenes SGV

polygon

Con más potencia que line y muy parecido a polyline,

con polygon es posible crear figuras de forma
normalmente cerradas, a diferencia que polyline, que
está más orientado a figuras abiertas.
CSS Avanzado | Imágenes SGV

polygon

Con más potencia que line y muy parecido a polyline,

con polygon es posible crear figuras de forma
normalmente cerradas, a diferencia que polyline, que
está más orientado a figuras abiertas.
CSS Avanzado | Imágenes SGV

polygon
<polygon points="50,0, 82,100, 0,37, 100,37,
20,100, 50,0" fill="gold" stroke="black" stroke-
width="3"/>

<polygon points="50,0, 62,37, 100,37, 70,61,

82,100, 50,75, 20,100, 31,61, 0,37, 39,37, 50,0"
fill="gold" stroke="black" stroke-width="3"/>
CSS Avanzado | Imágenes SGV

polygon
Con estos dos polígonos se representan dos estrellas basadas en una misma
forma. El primer polígono compuesto por 5 líneas y el segundo, algo más
elaborado, compuesto por 10 líneas.
Las líneas se describen y dibujan siempre por parejas. Por ejemplo, en la primera
estrella, los valores del primer punto (50,0: situado en la esquina superior central)
describe una línea que va hasta las coordenadas descritas en el siguiente par de
valores (82,100). Así, estos primeros 4 valores dibujan una línea en diagonal que
va desde el punto superior de la estrella hasta su extremo inferior derecho. Ambos
polígonos tienen definido un relleno (fill) y una línea con color (negro) y grosor (3),
por lo que podemos ver que, aunque comparten la misma forma, ambas estrellas
son bastante diferentes en cuanto a su construcción.

Sin embargo, si en ambos polígonos sustituimos stroke="black" por stroke="none",

el resultado visual de ambos polígonos es idéntico, ¿o no?...
CSS Avanzado | Imágenes SGV

text

Permite "dibujar" texto (vectorial), pudiendo

personalizar la rotación de cada una de las letras que
componen dicho texto.
CSS Avanzado | Imágenes SGV

text

Permite "dibujar" texto (vectorial), pudiendo

personalizar la rotación de cada una de las letras que
componen dicho texto.
CSS Avanzado | Imágenes SGV

text
<text x="30" y="35" rotate="17 0 -9 11 10 -3"
fill="red" stroke="white" stroke-width="2">
Javier
</text>
Con este cógido se crea un imagen vectorial de un texto en el que se han definido una
serie de parámetros comunes para todo el texto (tipo de letra, tamaño, colores y
posición), al mismo tiempo que se definido un grado de rotación diferente para cada una
de las letras que forman el texto (siendo 17º para la letra "J", 0 grados para la "a" o bien
-9º, que realiza una rotación de la letra "v" hacia la izquierda.
Aunque lo más sorprendente de ésto es que este texto (vectorial) sigue siendo texto y que
por lo tanto se puede seleccionar como si de texto plano se tratase ... inténtalo que es
gratis ...
CSS Avanzado | Imágenes SGV

Un truco
¿Qué pasaría si nos pasamos un par de horitas definiendo
coordenada a coordenada un dibujo complejo y cuando
acabamos nos damos cuenta de que queremos MOVER todo el
dibujo unos píxeles a la derecha o arriba para que cuadre y
encaje en el html correctamente?

Al estar definidas todas las coordenadas píxel a píxel, lo único

que podríamos hacer sería mover el SVG entero.
Para ello podemos colocar al final del código un sencillo
'transform' para mover todo el código anterior los píxeles que
deseemos...
CSS Avanzado | Imágenes SGV

Un truco
<text x="30" y="35" rotate="17 0 -9 11 10 -3"
fill="red" stroke="white" stroke-width="2"
transform="translate(20,5)">
Javier
</text>
Con este 'transform' final moveríamos todo el código anterior 20
píxeles a la derecha y 5 píxeles hacia abajo (pudiendo utilizar
números negativos si queremos moverlo hacia la izquierda o
hacia arriba).