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: 83

Visitas el mes pasado: 103

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 (XII)

Más sobre SVG

imagen html5

Presentación

Con lo visto hasta ahora ya podemos manejarnos de una forma básica en SVG para hacer algunos dibujos y animaciones. Todo depende de la habilidad que tengamos para realizar nuestros gráficos.

Nos hemos dejado algunas cosas por explicar, las cuales dan otras posibilidades a SVG, las diremos en esta página, aunque sea por encima.


Filtros

Los filtros son elementos que modifican el aspecto de uno o varios elementos del gráfico. Como su nombre indica "filtran" los elementos de forma que sabiéndolos utilizar bien podemos obtener algunos efectos.

Hay 16 filtros diferentes, unos inciden sobre la luz, otros sobre la dispersión de los colores, otros deforman la figura, etc.

No vamos a explicar aquí el funcionamiento de todos ellos, ya que esto requeriría otro manual completo, sin embargo vemos aquí un ejemplo para hacernos una idea de lo que éstos pueden hacer sobre las figuras.

En el recuadro de la derecha hemos puesto una figura repetida varias veces. El cuadrado de arriba a la izquierda es el original, sin aplicarle ningún filtro. A los otros cuadrados les hemos aplicado varios filtros, modificando su estado original.

De forma general un filtro se aplica mediante la etiqueta filter la cual lleva un "id" de identificación para poder ponerlo luego en el sitio deseado. Dentro de esta etiqueta se incluye la etiqueta específica del filtro, la cual llevará también sus propios atributos, unos generales, y otros específicos de cada filtro.

Por si teneis curiosidad incluyo aquí el código del ejemplo aquí visto.

<svg width="270" height="270" id="svg1"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="filtro1" x="0" y="0" width="100" height="100" filterUnits="useSpaceOnUse">
    <feGaussianBlur stdDeviation="3,2"  />
</filter>
<filter id="filtro2" x="0" y="0" width="100" height="100" filterUnits="useSpaceOnUse">
    <feColorMatrix type="hueRotate" values="180" />
</filter>
<filter id="filtro3" x="0" y="0" width="100" height="100" filterUnits="useSpaceOnUse"  >
    <feSpecularLighting in="SourceAlpha" >   
    <feSpotLight x="150" y="150" z="50" pointsAtX="200" pointsAtY="200" pointsAtZ="0"
        limitingConeAngle="80" specularExponent="3" />
    </feSpecularLighting>
</filter>
</defs>
<rect x=0 y=0 width=270 height=270 fill="aqua" />
<rect x=20 y=20 width=100 height=100 
   fill="lime" stroke="red" stroke-width="10"/>
<rect x=150 y=20 width=100 height=100 
   fill="lime" stroke="red" stroke-width="10"
	 filter="url(#filtro1)"/>
<rect x="20" y="150" width="100" height="100"
   fill="lime" stroke="red" stroke-width="10"
	 filter="url(#filtro2)"/>
<rect x="150" y="150" width="100" height="100"
   fill="lime" stroke="red" stroke-width="10" 
	 />
<rect x="150" y="150" width="100" height="100"
	 filter="url(#filtro3)"/>
</svg>

Para saber más sobre los filtros podeis consultar la página oficial del W3C donde lo explica. La página está en ingles, y puede que resute un poco complicado de entenderlo. Es la siguiente.



La aplicación Inkscape

Inkscape es un programa o aplicación que puede ayudarnos a realizar gráficos de SVG, tanto si éstos son simples, como más complicados.

Esta es una aplicación gratuíta que crea archivos SVG de una manera gráfica. Sin duda es una buena alternativa a los clásicos gráficos hechos con "flash", ya que además el usuario no necesita tener instalado en su ordenador ningún plugin.

Podemos descargar Inkscape desde su página oficial:

Desde esta página podemos elegir descargar la versión que mejor se adapte a nuestro sistema operativo. Si tenemos Windows debemos descargarnos la de "Windows / instalador", para instalarlo como cualquier otro programa.

Una vez instalado, vemos que se parece bastante a cualquier otro programa de dibujo, pero con una mayor cantidad de opciones. Como toda aplicación un poco compleja debemos aprender a utilizarlo. Para ello Inscape tiene varios tutoriales que podemos seguir y nos indican paso a paso cómo utilizarlo.

Los gráficos creados con Inscape son archivos en SVG que podemos incorporar directamente a la página como si fuera una imagen un "iframe" o un objeto incrustado con la etiqueta "object" o "embed".






Aquí acaba este manual de SVG. Espero que os haya sido util. Si quereis seguir aprendiendo podeis consultar cualquier otro manual de Aprende Web.

Volver al inicio







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