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

WorldMap: Construye y comparte mapas en la nube

WorldMap: Construye y comparte mapas en la nube

Harvard WorldMap es una plataforma de mapeo de código abierto en línea, desarrollado por el Centro de Análisis Geográfic...

Lectura y edición de metadatos con ExifTool

Lectura y edición de metadatos con ExifTool

En este post te hablaremos sobre una interesante herramienta para le lectura y edición de metadatos que no te debe de fa...

Simulador de la Asamblea Legislativa Plurinacional de Bolivia

Simulador de la Asamblea Legislativa Plurinacional de Bolivia

simuladorasamblea.bo es una herramienta digital  desarrollado por los Analistas de Datos Rafael López Valverde y  Sergio...

Actualizar JComboBox al cambiar valor de otro JComboBox

Actualizar JComboBox al cambiar valor de otro JComboBox

Cuando se trabaja con base de datos, estos datos son dinámicos, cambian con el tiempo y es necesario que esos cambios se...

Crea un blog sin base de datos con Grav

Crea un blog sin base de datos con Grav

Existen muchas plataformas CMS de código abierto excelentes, como Joomla y WordPress, así como algunas plataformas emerg...

La Programación, Básica en la Educación

La Programación, Básica en la Educación

La programación y la electrónica están a la orden del día. Cada vez son más importantes y prácticamente forman parte de...

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp