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:
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):
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
Para crear imagenes vectoriales podemos utlizar programas como yEd que es gratuito o utilizar editores on-line como SVG-Editor
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! :)
Qué necesitamos: Un editor de texto que coloree el código, por ejemplo Notepad++, esto nos ayuda a trabajar mas facilmen...
Un JSpinner es un componente swing de java con una caja de texto y un par de botones que nos permiten incrementar y dec...
Guardar un reporte PDF creado en iReport no es tan diferente de solo visualizarlo en pantalla. En este ejemplo se hace u...
Cuando se hace uso de programas a veces no importa que este cree más de una instancia al mismo tiempo, por ejemplo podem...
Blockly proyecto de Google for Education, es una biblioteca en JavaScript que agrega un editor de código visual a aplica...
Song Maker es el nuevo experimento de Google Chrome Music Lab que permite al usuario crear música desde el navegador a t...
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...