Vengo estrenando la primera
entrada, así que no los distraeré mucho, con tantas líneas de texto, cualquier
ocurrencia es buena escribirla, pero tengo el tiempo contado en mi
subconsciente, antes de quedar dormido y dejarlo para mañana.
Primero tengo que confesarles que me equivoque una y otra y otra vez, debí
consultar antes a google. Pero me gusta chocar con pared a fin que tengo el
cráneo duro adherible a mis ideas.
El objetivo es utilizar imágenes con
formato SVG de manera nativa en cualquier navegador moderno. Todos los
navegadores de uso mayoritario soportan el formato SVG en sus últimas
versiones, dentro de una página HTML5.
Esto ha permitido que los desarrolladores web puedan desligarse por fin del
programa FLASH y utilizar SVG, con todas las ventajas que eso conlleva.
¿Por qué utilizar SVG, qué
ventajas se obtienen con ello?
SVG es un formato de imágenes
vectoriales. Las imágenes de tipo vectorial son diferentes a las imágenes de
mapa de bits, que son las más comunes. Imágenes de mapa de bits son: JPG, GIF,
BMP, PNG, etc. Este tipo de imágenes tiene la caracteristica de que no son
escalables. Es decir, tienen un tamaño optimo de visualización, y si el tamaño
en el que se visualizan es menor o mayor que el tamaño propio de la imagen,
sufren un efecto de pixelado, lo que hace inviable utilizar una misma imagen de
mapa de bits para hacer una miniatura o escalarla para que aparezca más grande
de lo que es realmente.
En contraposición, el formato
SVG no está formado por un mapa de bits, sino por coordenadas de puntos (unidas
entre si por lineas rectas). Esta característica hace que las imágenes
vectoriales puedan ser escaladas hasta el infinito sin perder detalle ni sufrir
pixelización. Además suelen ser de carga más rápida que las imágenes de mapa de
bits, ya que son datos numéricos que se descargan muy rápido en el navegador.
-Venga el ejemplo!
Primero tenemos que diseñar un logotipo, en CorelDRAW, cualquier versión es
buena si tienes talento.
En la siguiente captura de pantalla podrán ver que tengo un logotipo
vectorizado.
 |
| La familia |
Una vez diseñado el logotipo en
CorelDRAW, hacemos lo siguiente:
Menu->Archivo->Guardar como o
CTRL+S, agregamos un nombre, en tipo, buscamos SVG-Scalable Vector Graphics, y
la ubicamos a nuestras necesidades, tal como se muestra en la siguiente imagen.
En mi caso la he guardado dentro de
la dirección /agregarsvgenpaginaweb, esta será el directorio con el que estoy
trabajando para tal ejemplo.
Después
de pulsar sobre el botón guardar, les aparecerá la ventana para exportar
nuestro logotipo. Por lo que en este ejemplo vamos a dejar la opción de hoja de
estilo interna.
Ahora
que tenemos la mitad del ejemplo vamos a crear un archivo desde nuestro editor
de textos, en mi caso utilizo Sublime-Text y escribimos el siguiente cuerpo
básico en HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h1>Hola mundo web!</h1>
<!-- Agregamos nuestro logotipo -->
<div>
</div>
</body>
</html>
Bien lo guardamos en nuestro
directorio que creamos anteriormente.
File->save o CTRL+S.
Ubicamos el directorio y le asignamos un nombre, index.html.
Tenemos
dos archivos, familia.svg e index.html, tal y como se muestra a continuación.
Nos
ubicamos dentro del directorio y abrimos el archivo familia.svg, claro desde un
editor de textos.
Pues
este código vamos a copiar, tal y como está dentro de nuestra etiqueta div.
<h1>Hola mundo web!</h1>
<!-- Agregamos nuestro logotipo -->
<div>
Aquí pegamos el código que se nos generó
</div>
Guardamos
nuevamente el archivo index.html, generalmente hemos de tener un servidor local
alojado si no es nuestro caso, abrimos el archivo de la misma manera ha de
salir todo bien, en este ejemplo utilizo un servidor local, por lo que lo abro
directamente desde mi navegador web.
El objetivo es tener nuestro
logotipo vectorizado, no sufrirá efecto en deformación si hacemos zoom, o tal
es el caso de evitar que nos copien nuestras imágenes del sitio.
Con
este sencillo método terminamos este ejemplo.
Saludos...
Comentarios