Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 327

Visitas el mes pasado: 122

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


tutorial SVG
W3Scools
Using SVG with HTML5 tutorial
Alejandro Castillo Cantón
Agregar SVG a una página web
msdn.microsoft.com
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
W3C Recommendation 16 August 2011
Introducción a SVG
http://sabia.tic.udc.es

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




SVG (VII)

Incluir elementos

imagen html5

Incluir imágenes

Para incluir imágenes en un contenedor SVG utilizaremos la etiqueta image la cual tiene varios atributos:

El ancho y el alto (width y height) no son automáticos, por lo que hay que ponerlos siempre y hay que tener en cuenta las proporciones, para que no haya distorsión de la imagen.

Como ejemplo hemos hecho un SVG con tres imágenes. El código es el siguiente:

<svg width=270 height=220>
<rect x=0 y=120 width=270 height=100 fill="#ffb6b7"/>
<image xlink:href="objetos/estrella.gif" x=40 y=10 width=150 height=50 />
<image xlink:href="objetos/bobesponja.gif" x=10 y=50 width=150 height=135 />
<image xlink:href="objetos/garfield.gif" x=120 y=80 width=130 height=90 />
<svg>

El resultado es el dibujo que se ve aquí a la derecha. En él hemos incluido tres imágenes. La imagen de la estrella es un gif animado y las otras son gif transparentes.


Patrones

Un patrón es un elemento que se repite como una imagen de fondo que podemos poner para rellenar figuras. El elemento que podemos poner para rellenar puede ser una imagen o unas figuras en SVG creadas por nosotros.

Para crear un patrón utilizaremos la etiqueta pattern. Esta se usa de forma parecida a las etiquetas para degradados de color. Por lo tanto la etiqueta pattern estará incluida dentro de una etiqueta defs.

Pondremos una atributo id para identificar el patrón con un nombre, de la misma manera que hacemos con los degradados de color.

Pattern crea un subespacio rectangular dentro del contenedor, para ello pondremos los atributos x, y, width y height:

<pattern id="nombre_id" x="0" y="0" width="50" height="50">

Para que la etiqueta funcione debemos poner también el atributo patternUnits = "userSpaceOnUse". Este atributo es parecido al atributo gradientUnits de los degradados de color. Tiene también el valor objectBoundingBox, sin embrgo este valor no funciona bien en todos los navegadoes, por lo que usaremos userSpacingOnUse.

El atributo viewBox Crea un contenedor virtual en el que se verá la imagen. Como valor tiene cuatro números, los dos primeros son la esquina superior izquierda del contenedor, y los otros dos el ancho y el alto del mismo. La imagen se adapta al espacio que indicamos, de manera que a mayor espacio indicado ésta se vera más pequeña. Veremos esto en temas posteriores.

Vemos aquí un ejemplo:

<pattern id="nombre_id" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse" viewBox="0 0 50 50">

Con esto completamos la etiqueta pattern. Después, dentro de la etiqueta "pattern", incluimos otra etiqueta con el contenido que queremos que se repita , y luego cerramos la etiqueta "pattern" (</pattern>).

Para ver el contenido como imagen de fondo en una figura o elemento, en la etiqueta haremos referencia al patrón en la etiqueta fill fill="url(#nombre_id) donde nombre_id es el valor de la etiqueta id del patrón (pattern).

En el ejemplo de la derecha hemos puesto una imagen que se repite. El código de este SVG es el siguiente:

<svg width="270" height="200" >
<defs>
<pattern id="patron1" x="0" y="0" width="30" height="30"
   patternUnits="userSpaceOnUse" viewBox="0 0 50 50" >		
   <image xlink:href="europa.gif" x="0" y="0" width="50" height="50" >
</pattern>
</defs>
<ellipse cx="135" cy="100" rx="110" ry="90"
    stroke="red" stroke-width="3" fill="url(#patron1)"/>
</svg>

Bandera de Europa

La imagen empleada para el SVG anterior es la que veis aquí a la derecha. La he puesto ahí por si quereis copiarla para practicar con este ejemplo.

Mediante el atributo viewBox, aunque el espacio real que ocupa la imagen es 30 x 30 píxeles (atributos width y height), esta se ve en un espacio virtual de 50 x 50. Esto es lo que permite verla entera en un tamaño más pequeño.

Podemos crear nuestras propias figuras para incluirlas como imagen de fondo. Vemos aquí un ejemplo en el que hemos creado una figura como imagen de fondo.

El código para crear la figura se pone dentro de la etiqueta pattern.

En la figura de relleno hemos puesto primero un rectángulo del mismo tamaño de la imagen para rellenar el fondo. Seguimos después con un círculo que colocamos en el centro, y ponemos luego mediante una ruta (path) las líneas que unen los círculos.

El código para la figura que vemos aquí a la derecha es el siguiente.

<svg width="270" height="200">
<defs>
<pattern id="patron2" x="0" y="0" width="30" height="30"
     patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
     <rect x="0" y="0" width="100" height="100" fill="#ceedff"/>
     <circle cx="50" cy="50" r="38"
       stroke="#990099" stroke-width="2" fill="#ffb6b7"/>
     <path d="M 50,0 L 50,10 M 50,90 L 50,100 M 0,50 L 10,50 M 90,50 L 100,50 z"
       stroke="#990099" stroke-width="2" fill-opacity="0"/>	
</pattern>
</defs>
<ellipse cx="135" cy="100" rx="120" ry="90"
     stroke="#663366" stroke-width="5" fill="url(#patron2)"
</svg>

Marcadores

Un marcador es un pequeño dibujo o símbolo que puede introducirse en los vértices de algunas figuras, concretamente en líneas, polilíneas, polígonos y rutas, y también al principio y final de las mismas.

Para incluir un marcador en una de estas figuras lo haremos de manera parecida a los patrones. Primero dentro de un elemento defs creamos la figura con la etiqueta marker y después la incluimos en el elemento mediante una serie de atributos.

Uno de los usos más corrientes de los marcadores es hacer puntas de flecha para líneas y otros elementos. Haremos aquí un ejemplo de una línea con una punta de flecha a la vez que vamos explicando su funcionamiento.

Utilizaremos la etiqueta <marker> ... </marker>, dentro de esta etiqueta dibujaremos mediante una ruta (path) el triángulo de la punta de flecha. En primer lugar ponemos la etiqueta SVG y dentro de ella una etiqueta defs donde irá el marcador:

<svg width="250" height="100" >
<defs>

Seguimos con la etiqueta marker, la cual tiene los siguientes atributos:

<marker id="flecha" markerWidth="10" markerHeight="6">

Los atributos markerWidth y markerHeight indican el ancho y el alto de la caja que contiene el dibujo a insertar (en este caso el triángulo de punta de flecha). Debemos poner también el atributo id para poder referirnos luego a este marcador desde el elemento en que lo insertamos.

Debemos indicar también el punto, dentro de esta caja que coincidirá con el vértice, o final de línea en este caso, para ello ponemos los atributos refX y refY (coordenadas "x" e "y" respecto a la caja creada anteriormente)

<marker id="flecha" markerWidth="10" markerHeight="6" refX="5" refY="3">

El atributo orient indica el ángulo que tomará el marcador. Como valor podemos poner un número, que será el número de grados que gire, o también la palabra "auto" que lo alineará con el principio o final de línea, o si el marcador está en un vértice lo pone en un ángulo que será la media entre las dos lineas.

Por último el atributo markerUnits puede tomar los valores UserSpaceOnUse que toma como unidad de medida para la caja del marcador la que tiene el SVG (normalmente el pixel), o strokeWidth, que toma como unidad de medida el grosor de la línea (por ejemplo si la línea mide 3px -stroke-width="3"-, el tamaño de la caja se multiplica por 3).

<marker id="flecha" markerWidth="10" markerHeight="6" refX="5" refY="3 orient="auto" markerUnits="strokeWidth" >

Después dentro de la etiqueta marker insertamos el elemento que hará de punta de flecha, para ello hacemos una ruta que dibuja un triángulo

<path d="M 0 3 L 10 0 L 10 6 z" fill="blue">

Cerramos la etiqueta "marker" y también la etiqueta defs:

</marker>
</defs>

Nos falta dibujar la línea en la que insertaremos el marcador. Para insertar un marcador en un elemento (linea, polígono, ruta, etc) usaremos en ese elemento los siguientes atributos:

Como valor de estos atributos pondremos una referencia al elemento de la forma "url(#id_marcador)" donde id marcador es el valor que le hemos dado al atributo id de la etiqueta marker.

Dibujamos la línea con el marcador con el siguiente código

<line x1="10" y1="90" x2="220" y2="10"
stroke="blue" stroke-width="3" marker-end="url(#flecha)" />

Por último sólo nos queda cerrar la etiqueta svg para completar el dibujo.

</svg>

La figura nos quedará como hemos visto en el dibujo de arriba a la derecha.

Señal de stop

Hemos hecho otro ejemplo, en el que añadimos una imagen en los puntos de intersección de una polilínea.

Aprovechamos el marcador hecho en el SVG anterior para ponerlo al final de la línea.

Para poner todas las imágenes en horizontal en el marcador hemos puesto el atributo orient="0", y para controlar que la imagen tenga el tamaño que se indica en markerWidth y markerHeight hemos puesto un viewBox con el tamaño de la imagen.

El resultado es el que ves aquí a la derecha, y el código que hemos empleado es el siguiente:

<svg width="270" height="200">
<defs>
<marker id="stop" markerWidth="10" markerHeight="10"
    refX="25" refY="25" 
    orient="0" markerUnits="strokeWidth"
    viewBox="0 0 50 50">
<image xlink:href="../objetos/stop.gif" x="0" y="0" width="50" height="50" 
</marker>
</defs>
<polyline points="0,5 70,30 50,120 160,30 110,110 230,180 200,50"
    stroke="blue" stroke-width="3" fill-opacity="0"
    marker-mid="url(#stop)" marker-end="url(#flecha)" />
</svg>

Aquí hemos utilizado también el marcador que hemos hecho en el ejemplo anterior. Esto es posible porque están los dos en la misma página. De no ser así deberíamos haber incluido dentro de la etiqueta defs los dos marcadores.






En la siguiente página veremos otro elemento imprescindible para poder hacer gráficos SVG con una cierta calidad, las transformaciones

Transformaciones



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com