NorfiPC
NorfiPC » Diseño web » Imágenes SVG

Qué son las imágenes SVG, como crearlas y usarlas, ejemplos prácticos


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Creación de gráficos vectoriales SVG y empleo en las páginas web de internet para mostrar diagramas, figuras, logos, iconos, texto y otros elementos sencillos. Códigos para insertarlos o impregnarlos.
Las imágenes SVG, como crearlas, ejemplos de usos prácticos
En ocasiones necesitamos crear manualmente dibujos, ilustraciones, diagramas, esquemas o figuras para acompañar y complementar un artículo en nuestro blog o sitio web.
Las imágenes tradicionales en estos casos no ayudan o se hace muy complejo editarlas en un software.
La mejor opción en estos casos es usar imágenes vectoriales.
Son las imágenes que hemos visto en dibujos animados, publicidad, juegos y en muchas otras tareas en la web.
Se caracterizan por su pequeño tamaño, sencillez y nitidez.
Hay varios formatos de imágenes o gráficos vectoriales, pero el mejor de ellos es el SVG.


Las imágenes o gráficos SVG


SVG es la abreviatura en ingles de Scalable Vector Graphics (Gráficos Vectoriales Escalables).
Es un nuevo estándar usado para la creación y representación de gráficos e imágenes vectoriales en las páginas web y aplicaciones de internet, aunque también se pueden emplear en la computadora offline.
SVG es un lenguaje gráfico que emplea el formato XML.
Las imágenes en este formato a diferencia de las tradicionales se pueden editar usando editores de texto plano como NotePad+ o hasta con el Bloc de Notas de Windows.
El formato SVG es recomendado por el W3C y es compatible por la mayoría de los navegadores web modernos.
Las imágenes SVG se caracterizan por su pequeño tamaño y por ser imágenes vectoriales.
Imagen vectorial SVG cuyo código ha sido impregnado en esta página Imagen VECTORIAL
Son usadas en las páginas cuando se necesita mostrar o representar elementos sencillos que no necesitan de alta resolución como gráficos, diagramas, mapas, logotipos, iconos, texto, etc.
En este artículo compartimos de forma sencilla, de forma tal que pueda ser entendido por todos, como crear las imágenes SVG, como insertarlas en las páginas web o usarlas offline en la computadora.

Diferencias entre las imágenes SVG y los archivos SVG

Imágenes SVG
Consisten de código impregnado en el HTML de las páginas que el navegador renderiza como imágenes vectoriales, que se pueden escalar sin perder la calidad.
Se usa en caso de elementos gráficos simples que requieren de poca cantidad de código.

Los archivos SVG
Son son archivos de texto con la extensión SVG que contienen el código para renderizar las imágenes vectoriales. Se pueden enlazar a una página como un archivo de imagen externo.
Se pueden abrir con programas de edición de imágenes vectoriales o con el navegador Internet Explorer. Este navegador permite también guardar las imágenes en formato PNG o BMP.
Una imagen en formato SVG puede ser hasta 30 veces menor que una similar en formato PNG.


Ventajas de las imágenes vectoriales


1- La principal ventaja de las imágenes vectoriales es que siempre mantienen la calidad y nitidez a cualquier resolución.
Las imágenes tradicionales que usan los formatos JPG, PNG, BMP, GIF y otros similares, son imágenes en mapa de bits, matriciales o rasterizadas.
Están formadas por una serie de pixeles o puntos coloreados y al redimensionarlas o aumentar el zoom se pixelizan y pierden calidad.
Las imágenes vectoriales contienen las instrucciones para el navegador o programa de visualización de cómo crear la imagen.
Es por eso que al aumentar el zoom siguen mostrándose nítidamente a cualquier resolución.
Se puede comprobar lo anterior con la siguiente imagen.
Es un logotipo de muestra creado en formato SVG usando InkScape. Mide 800 x 500 pixeles y solo 3 KB.
Da un clic encima de ella para abrirla en una nueva pestaña y entonces aumenta el zoom del navegador usando al mismo tiempo la teclas Control y + o - del teclado numérico.
Logotipo de NorfiPC creado en formato SVG con el programa InkScape
2- Otra de las ventajas de las imágenes vectoriales es su pequeño tamaño, que permite aumentar la velocidad de carga de las páginas, sin prescindir de elementos gráficos o poder emplear mayor cantidad de ellos.
3- Las imágenes son construidas por el navegador, lo que disminuye la carga y consumo de recursos en el servidor web.
4- Se pueden crear imágenes SVG animadas.


Como crear las imágenes vectoriales SVG


Las imágenes SVG se pueden crear de dos formas:
1- Usando programas de diseño gráfico, como son Illustrator, Corel Draw, Freehand o Visio, no obstante el mejor de ellos es InkScape.
También es posible convertir otras imágenes vectoriales como las que usan el formato WMF al formato SVG.
Otra opción es convertir imágenes tradicionales de mapa de bits al formato SVG.
2- Cuando se trata de elementos sencillos, podemos crear las imágenes impregnando en la página web el código necesario para representarlas. Algunos ejemplos se muestran más abajo.
Para eso los más entusiastas pueden introducir el código directamente o copiar y pegar el código de una imagen existente creada mediante software.


¿Cómo insertar las imágenes SVG en las páginas web?


Las imágenes SVG se pueden insertar en las páginas web de dos formas:
1- Como una imagen tradicional mediante la etiqueta IMG y almacenándola en una carpeta del servidor web.
Este es el sistema empleado cuando se trata de imágenes más complejas para representar diagramas o gráficos.
La siguiente imagen en formato SVG creada con InkScape, esta insertada en esta página como una imagen tradicional.
All you need is love. Imagen vectorial de ejemplo en SVG
2- Impregnando el código XML necesario usando la etiqueta SVG de HTML5.
Este es el sistema ideal cuando se trata de elementos gráficos sencillos como iconos, logotipos, texto dinámico o figuras geométricas.
De la misma imagen anterior se tomó el código y se impregnó en el HTML a continuación, solo se cambió el color del texto.
Aparentemente no hay diferencia en los dos casos.
All you need is LOVE norfipc.com


Ejemplos de imágenes SVG impregnadas


A continuación mostramos algunos ejemplos sencillos de gráficos SVG impregnados inline en esta página y el código necesario para mostrarlos.

Un círculo


<svg><circle cx="60" cy="60" r="60" fill="yellow" stroke="blue" stroke-width="4"></svg>
En el código los siguientes valores indican:
cx y cy = Las coordenadas del circulo en el eje x y y
r = El radio
fill = El color de relleno
stroke = El color del borde
stroke-width = ancho del borde

Un rectángulo con las esquinas redondeadas


<svg><rect cx="10" cy="10" rx="20" ry="20" height="100" width="200" stroke="black" stroke-width="1" fill="red">
</svg>
Los valores son similares al círculo, pero es necesario usar height y width para la altura y el ancho y rx y ry para redondear las esquinas.

Texto animado

Texto que cambia su tamaño de forma dinámica al dar clic encima.
Texto
<svg height="60">
<text x="0" y="45" font-size="40" fill="red">
 <animate attributeName="font-size" begin="click" 
 values="8;50;8" dur="6" repeatCount="indefinite"/>Texto</text></svg>

Gradiente infinito

Al dar clic encima se genera mediante Javascript de forma aleatoria un gradiente.
Gradiente infinito

Logo de Twitter en SVG

Logo de Twitter en formato SVG


Como guardar imágenes SVG en formato PNG

En ocasiones necesitamos guardar una imagen SVG de una página web, en formato de mapa de bits.
El único navegador web que permite esta funcionalidad es Microsoft Edge.
Con el resto de los navegadores al tratar de usar el método tradicional de "Guardar imagen como", encontraremos solo la opción del formato SVG.
También podemos usar Edge para convertir imágenes en la computadora.
Si necesitamos redimensionar una imagen SVG previamente, aprovechando su característica de que no distorsionan, podemos abrirla con un editor de texto y modificar los valores de su tamaño.

Más información para crear imágenes SVG


Los más entusiastas que comprendan las posibilidades de las imágenes SVG y deseen conocer y explotar opciones avanzadas, pueden encontrar un completo manual publicado por el W3C: An SVG Primer
Otra opción es SVG Reference en W3School.

Iconos SVG de las redes sociales y sitios de internet
Un ejemplo práctico del uso de las imágenes SVG, es crear iconos de las redes sociales de internet para usar en los botones de compartir en las páginas.
El código impregnado en el HTML hace innecesaria la carga de imágenes externas y de esa forma las páginas cargan mucho más rápido.
En otros artículos de este sitio compartimos los códigos necesarios para crear estos iconos:
- Iconos vectoriales SVG y PNG de las redes sociales de internet
- Iconos SVG y PNG de sitios y servicios de internet

Editores de imagenes SVG
Existen varios programas y servicios en la red para crear o editar las imágenes SVG.
Algunos facilitan convertir de otros formatos y viceversa.
En otro artículo comentamos y detallamos las herramientas más populares para estas tareas: Programas y servicios para crear, editar y convertir imágenes SVG
En otras páginas de nuestro sitio ofrecemos archivos SVG para descargar que se pueden editar fácilmente y personalizar, solo cambiando parámetros como el tamaño y los colores, sencillamente usando el Blog de notas.

Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
 
Inicio | Mapa del sitio | Buscar | Sobre mí