Iconos SVG html
El formato de archivo SVG es una herramienta popular para mostrar gráficos bidimensionales, tablas e ilustraciones en sitios web. Además, al ser un archivo vectorial, puede ampliarse o reducirse sin perder nada de resolución. Obtenga más información sobre las principales características de las imágenes SVG, sus ventajas y desventajas, y cómo ha evolucionado el formato SVG.
Los gráficos vectoriales escalables (SVG) son un formato de archivo vectorial apto para la web. A diferencia de los archivos rasterizados basados en píxeles, como los JPEG, los archivos vectoriales almacenan las imágenes mediante fórmulas matemáticas basadas en puntos y líneas en una cuadrícula. Esto significa que los archivos vectoriales como el SVG pueden cambiar de tamaño considerablemente sin perder nada de calidad, lo que los hace ideales para logotipos y gráficos complejos en línea.
La historia del archivo SVG se remonta a finales de los años 90, cuando el Consorcio de la World Wide Web (W3C) invitó a los desarrolladores a presentar propuestas para un nuevo tipo de formato gráfico vectorial. Se presentaron seis propuestas que competían entre sí y que ayudaron a conformar lo que finalmente se convirtió en el formato SVG del W3C.
Los SVG tardaron en hacerse populares. Hubo relativamente poco apoyo para ellos hasta 2017, cuando la gente comenzó a ver los beneficios de usar SVG en los navegadores web modernos. Los archivos SVG se utilizan ahora ampliamente para las imágenes 2D de los sitios web porque la mayoría de los navegadores y las aplicaciones de dibujo para archivos vectoriales pueden manejarlos fácilmente.
Fuente de iconos frente a svg
Bueno, los tipos de imágenes tradicionales como JPEG, PNG y GIF están basados en mapas de bits (o basados en rasterización), lo que significa que consisten en una cantidad fija de píxeles. Normalmente, esto significa que en cuanto se empieza a aumentar o disminuir una imagen de este tipo, se presentan líneas irregulares, artefactos borrosos y un desorden pixelado.
En resumen, el tipo de imagen WebP se creó para generar tamaños de archivo mucho más pequeños y eliminar la necesidad de utilizar diferentes tipos de imagen en la web. En la actualidad, Safari no lo admite y aún no se ha impuesto en la web.
¿En qué se diferencia el formato SVG de las imágenes basadas en mapas de bits? Están basadas en vectores, lo que significa que son independientes de la resolución. En lugar de estar formadas por píxeles, las imágenes SVG están formadas por formas. Esto significa que pueden escalar indefinidamente sin reducir la calidad. Mágico.
Para reflexionar: A pesar de este hecho, los SVG pequeños que contienen pocos detalles, como el icono de una barra de navegación, pueden parecer fuera de lugar o demasiado simplistas si se amplían para utilizarlos en un cartel de una tienda o en una valla publicitaria. Cada caso es diferente, pero el contexto y un buen ojo son importantes a la hora de decidir si se debe escalar un SVG.
Icono svg en línea
Esto no ha ocurrido por casualidad. Aunque los formatos tradicionales de archivos gráficos de trama, como JPG y PNG, son perfectos para fotografías o imágenes muy complejas, resulta que SVG es el único formato que satisface las exigencias actuales de desarrollo web en cuanto a escalabilidad, capacidad de respuesta, interactividad, programabilidad, rendimiento y accesibilidad.
Los SVG pueden ser mucho más pequeños que 60KB, por supuesto. Esta ilustración de mayor tamaño nos ayuda a destacar la flexibilidad de SVG, pero es un formato perfecto para los iconos y los elementos de la interfaz, algunos de los cuales ni siquiera pesan un kilobyte completo.
SVG es un formato gráfico vectorial basado en el Lenguaje de Marcado Extensible (XML) para la Web y otros entornos. XML utiliza etiquetas como HTML, aunque es más estricto. No se puede, por ejemplo, omitir una etiqueta de cierre, ya que esto hará que el archivo no sea válido y el SVG no se renderizará.
¿Y el Canvas de HTML5? Estas dos tecnologías son muy diferentes, pero es comprensible que esta pregunta surja a menudo. Hemos desglosado los propósitos, los pros y los contras de cada una de ellas en SVG vs Canvas para que tenga la comprensión necesaria para tomar la decisión correcta en todo momento.
Iconos svg de código abierto
Scalable Vector Graphics (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.
Las imágenes SVG se definen en un formato de gráficos vectoriales y se almacenan en archivos de texto XML. De este modo, las imágenes SVG pueden ampliarse en tamaño sin perder calidad, y los archivos SVG pueden buscarse, indexarse, programarse y comprimirse. Los archivos de texto XML pueden crearse y editarse con editores de texto o editores de gráficos vectoriales, y son representados por los navegadores web más utilizados.
Esta imagen ilustra la diferencia entre las imágenes de mapa de bits y las vectoriales. La imagen de mapa de bits está compuesta por un conjunto fijo de píxeles, mientras que la imagen vectorial está compuesta por un conjunto fijo de formas. En la imagen, al escalar el mapa de bits se revelan los píxeles, mientras que al escalar la imagen vectorial se conservan las formas.
El SVG lleva desarrollándose en el seno del Consorcio de la World Wide Web (W3C) desde 1999, después de que durante 1998 se presentaran al consorcio seis propuestas de lenguajes gráficos vectoriales que competían entre sí (véase más adelante)[3].