SVG es un formato de archivo basado en XML que describe gráficos vectoriales de forma bidimensional. A diferencia de las imágenes rasterizadas (como JPEG o PNG), los SVG son escalables, lo que significa que conservan la calidad y nitidez independientemente del tamaño al que se escalen.
Los SVG son gráficos vectoriales basados en XML. Son escalables, lo que significa que pueden ampliarse o reducirse sin perder calidad.
PNG (Portable Network Graphics):Los PNG son imágenes de mapa de bits sin pérdida de compresión, lo que significa que conservan la calidad original sin artefactos visibles.
JPEG (Joint Photographic Experts Group):Los archivos JPEG son imágenes de mapa de bits con compresión con pérdida, diseñados para reducir el tamaño del archivo mediante la eliminación de datos redundantes. Esto puede conducir a una ligera degradación de la calidad visual en comparación con los formatos sin pérdida.
GIF (Graphics Interchange Format):Los GIF son imágenes de mapa de bits que admiten animaciones simples y transparencia, pero tienen una paleta de colores limitada (256 colores).
WebP:WebP es un formato de imagen desarrollado por Google que ofrece una alta compresión con calidad visual similar a JPEG o PNG.
Simplemente especifica la ruta del archivo SVG en el atributo src y proporciona un texto alternativo en el atributo alt para accesibilidad.
Ajuste de tamaño
Indicar el tamaño directamente en la etiqueta img utilizando los atributos width y height.
Las imágenes SVG pueden escribirse directamente en el documento HTML mediante la etiqueta svg.
Cuando utilizas SVG inline en el documento HTML, se reduce el tiempo de carga porque el SVG se sirve como parte del HTML principal, evitando una solicitud HTTP adicional. Sin embargo, el código HTML se hace más extenso y engorroso.
La etiqueta object te permite incrustar un archivo SVG como un objeto independiente en la página. Puedes utilizar la etiqueta object para insertar un archivo SVG y definir el tamaño del objeto utilizando CSS o atributos HTML width y height.
Puedes utilizar la etiqueta iframe para incrustar un archivo SVG en tu página web
Consideraciones:
Dificultades de mantenimiento: Los iframe pueden ser difíciles de mantener, especialmente cuando tienes múltiples elementos iframe en tu página.
SEO (Optimización para Motores de Búsqueda): El uso excesivo de iframe puede afectar negativamente la optimización de tu sitio para motores de búsqueda.
Escalabilidad de SVG: Las imágenes SVG añadidas mediante iframe no son escalables, lo que anula el propósito de utilizar gráficos vectoriales escalables.
Propiedad background-image con SVG
Incorporar imágenes SVG en un diseño web es utilizando la propiedad background-image en CSS. Esta técnica te permite aplicar un SVG como fondo de un elemento HTML, como un div. Puedes utilizar background-image en tu hoja de estilos CSS para aplicar un SVG como fondo de un elemento HTML
Consideraciones:
No Accesible: Las imágenes de fondo SVG no son accesibles a través del texto alternativo (alt) como las imágenes img.
Escalabilidad: La escalabilidad del SVG puede verse limitada dependiendo del contenedor y las propiedades CSS aplicadas.
Puedes ajustar el tamaño de un SVG utilizando las propiedades width y height en CSS. Esto te permite controlar las dimensiones en relación con su contenedor.
Utilizando la propiedad opacity, pudes aplicar animaciones basadas en keyframes con animation, cambiar su posición o usar transiciones y transformaciones, filtros, entre otras cosas.
Puedes cambiar la opacidad de un SVG utilizando la propiedad opacity en CSS. Esto permite hacer que el SVG sea más transparente o más opaco.
Puedes cambiar la posición de un SVG utilizando las propiedades position, top, left, right y bottom en CSS. Esto te permite mover el SVG dentro de su contenedor.
Puedes animar los elementos dentro de un SVG utilizando las animaciones CSS. Esto permite crear efectos visuales dinámicos y atractivos.
Abril Yamilet Cisneos Amador
CECyTEM