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

Evaluar expresiones matemáticas en Java con JavaScript

Evaluar expresiones matemáticas en Java con JavaScript

Java 8 trae consigo una nueva versión del motor de JavaScript llamada Nashorn, este motor introduce mejoras de rendimien...

Google Open Source: Código Abierto +2000 proyectos

Google Open Source: Código Abierto +2000 proyectos

Google abre las puertas de Google Open Source un nuevo sitio web que une todos sus proyectos de “Código Abierto...

Campo autoincrement en PostgreSQL con pgAdminIII

Campo autoincrement en PostgreSQL con pgAdminIII

En Postgres a diferencia de MySQL, colocar un campo con un valor autonumerico incrementable es un poco más complicado pe...

Formulario de autenticación circular

Formulario de autenticación circular

En este tutorial crearemos un formulario de logueo de forma circular usando el lenguaje java y el IDE de Netbeans. Neces...

PyExifToolGUI: Interfaz gráfica para ExifTool

PyExifToolGUI: Interfaz gráfica para ExifTool

Hace un tiempo hablamos sobre ExifTool, una pequeña pero potente herramienta para la lectura y  edición de metadatos de...

Reconocimiento Óptico de Caracteres con Tess4J

Reconocimiento Óptico de Caracteres con Tess4J

El reconocimiento óptico de caracteres o OCR (Optical Character Recognition), es un proceso dirigido a la digitalización...

Comparte lo que sabes

Categorias

Últimas entradas

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

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

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

En un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

Herramientas

Generador de Enlaces a Whatsapp