Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Gráficos Vectoriales SVG

Gráficos Vectoriales SVG

Autor jc mouse jueves, febrero 23, 2012

Las imagenes SVG (Scalable Vector Graphics) (Ver Wikipedia) son un tipo de imagen ya bastante antiguo pero poco conocido y por tanto poco usado en paginas web, sin embargo este tipo de imagen vectorial tiene muchas propiedades interesantes:

  • Tamaño reducido para imagenes simples de grandes dimensiones
  • El formato en que se guarda es XML por tanto puede editarse desde un editor de texto
  • Puede agregarse y editarse texto facilmente
  • Tiene manejadores de eventos onMouseOver y onClick
  • Puede combinarse con JavaScript para crear animaciones

Por ejemplo podemos para crear una bandera (mi bandera ROJO-AMARILLO-VERDE) y agregarle algo de texto, para realizar esto utilizamos el siguiente código:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="750">
   <!-- Bandera de Bolivia en SVG -->
   <rect fill="#FF0000" height="100" width="450"/>
   <rect fill="#F6FF00" height="100" width="450"  y="100"/>
   <rect fill="#008403" height="100" width="450"  y="200"/>   
   <g font-family="sans-serif" font-size="32" >
      <text xml:space="preserve" x="0" y="340" stroke="none">VIVA BOLIVIA CARAJO!!!</text>
   </g>
</svg>

Utilizamos cualquier editor de texto (notepad++ recomendado) y salvamos el archivo con extensión «*.svg» para verlo utilizamos cualquier navegador (Firefox):

Bandera Bolivia SVG

Bandera de Bolivia en SVG

La imagen SVG pesa 1kb, la misma imagen en JPG esta en 6.8 KB en baja calidad, las diferencias son notables a que no 🙂

Como dijimos SVG tambien acepta eventos y combinado con JS podemos hacer cosas verdadeamente interesante como este tetris hecho en SVH y JavaScript

JUGAR AQUI

Para crear imagenes vectoriales podemos utlizar programas como yEd que es gratuito o utilizar editores on-line como SVG-Editor

 

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Impresión de Interfaz Gráfica de Usuario

Impresión de Interfaz Gráfica de Usuario

En este post veremos como imprimir secciones de un formulario en java implementando la Interface Printable. La clase que...

B4A: Basic para Android

B4A: Basic para Android

Basic 4 Android es un IDE (Entorno de Desarrollo Integrado) para Android basado en Basic (no es Visual Basic, pero se pa...

Envía tu nombre a Marte en la Mars 2020 Rover

Envía tu nombre a Marte en la Mars 2020 Rover

La misión espacial de la NASA, el Mars  2020 Rover Mission esta proyectada para lanzarse en julio de 2020 y su llegada s...

Incrustar reporte en formulario java

Incrustar reporte en formulario java

Jasperreport nos brinda su propio visor de reportes, sin embargo en ocasiones queremos mostrar los informes directamente...

Configura tu smartphone y PC para testear aplicaciones

Configura tu smartphone y PC para testear aplicaciones

Cuando desarrollamos aplicaciones para android como programadores nos interesa la velocidad al tiempo de depurar el códi...

API completo y ligero para el uso de webcams desde java

API completo y ligero para el uso de webcams desde java

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

Comparte lo que sabes

Categorias

Últimas entradas

En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario.  Sin mas que...

Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...

En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...

En este tutorial conoceremos una forma de conectar una aplicación en Laravel con tres bases de datos diferentes, 2 en My...

Herramientas

Generador de Enlaces a Whatsapp