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

Listar dispositivos de impresión

Listar dispositivos de impresión

El siguiente código te muestra una lista de los dispositivos de impresión que tenemos instalado en el sistema import jav...

Recolección, extracción y análisis de Metadatos

Recolección, extracción y análisis de Metadatos

La recolección de información (Information Gathering) es una de las partes más importantes en la planificación y ataques...

Simulador de Arduino on line

Simulador de Arduino on line

123d.circuits.io es una aplicación web propiedad de Autodesk que permite construir circuitos en un protoboard virtual. C...

¿Quieres llorar? conoce que es y como protegerse de WannaCry

¿Quieres llorar? conoce que es y como protegerse de WannaCry

Este 12 de Mayo de 2017 se produjo un ataque masivo mundial del ransomware WannaCry  el  que afecto a más de 200000 comp...

Creación de mapas con shapes – Parte 3

Creación de mapas con shapes – Parte 3

En nuestro mapa interactivo, se hará uso de un mapa departamental dividido en provincias, todo a través  de shapes, si b...

PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°...

Comparte lo que sabes

Categorias

Últimas entradas

En este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Cada versión de Linux viene con su propia terminal predeterminada para interactuar con el Sistema Operativo a través de...

Android Bolivia

MAUS