Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Imágenes SVG con CSS

Sí, ha pasado un tiempo. Un largo rato. En el futuro, planeo regresar con más frecuencia cuando tenga algo que compartir o documentar. Muchas publicaciones se han vuelto bastante anticuadas, y me gustaría estar más actualizado con las técnicas.
Las imágenes SVG (Gráficos vectoriales escalables) han existido desde hace mucho tiempo, por lo que esto no es exactamente una noticia de última hora. Sin embargo, tengo otro tema relacionado con las imágenes SVG que quiero discutir otro día, y esta publicación es para compartir el conocimiento básico para las personas que recién están comenzando con el desarrollo web o que no han usado mucho las imágenes SVG.
Adopté tarde las imágenes SVG y no sé por qué. Me encantan las imágenes vectoriales y, al enseñar Photoshop, conozco todos los beneficios sobre la imagen de trama (píxeles). Las imágenes SVG no pueden reemplazar una fotografía, pero para los iconos, ilustraciones, logotipos y más son a menudo la mejor opción. Son ligeros y completamente escalables. Se verán nítidos y nítidos en cualquier tamaño. Otro beneficio divertido de los SVG es que se pueden animar y diseñar con CSS.
El soporte del navegador para imágenes SVG es bastante completo  (98.8%) con excepciones de versiones de navegador muy antiguas como IE8 y Android temprano. En este punto, los considero seguros de usar sin retrocesos para la mayoría de los sitios. La compatibilidad del navegador para usar todo el CSS en SVG no es tan sólida, pero esas cosas generalmente no dañarán su sitio y podrían considerarse mejoras progresivas.
Guardé la misma imagen de 100 px de altura en Illustrator como un archivo PNG y un archivo SVG. El archivo PNG es 2K. La versión SVG es 0.4K. La diferencia es que el tamaño no siempre será tan dramático, y la versión PNG podría ser más pequeña dependiendo de la complejidad de la imagen, el número de colores y más, pero para imágenes simples, SVG generalmente será más pequeño.

Versión PNG original

Versión PNG a 250 px

Si desea que la imagen responda y aumente o disminuya su escala según el tamaño de la pantalla, no puede ampliar las imágenes PNG sin perder calidad.

Versión SVG a 250 px

La imagen SVG se puede mostrar en cualquier tamaño sin pérdida de calidad.

Insertar SVG

Etiqueta IMG

Las imágenes SVG se pueden agregar a las páginas como cualquier otro tipo de imagen utilizando la etiqueta IMG.
<img src = "asterisk.svg" />
El tamaño de la imagen SVG se puede hacer normalmente como cualquier otra imagen, con HTML o CSS. Sin embargo, si la imagen SVG no se guardó con sus propias propiedades de ancho y alto, la imagen ocupará tanto espacio como lo permita su contenedor. Puedo discutir eso más en una publicación futura.

SVG en línea

Si desea la mayor flexibilidad con su SVG y la capacidad de transformar el original con color y otras propiedades CSS, querrá insertar su imagen en línea copiando el código real en la <svg>etiqueta directamente en el marcado HTML.

SVG Styles

El uso de imágenes SVG en línea significa que puede cambiar el color de la imagen y transformarla de otras maneras. El siguiente ejemplo tiene la misma imagen SVG insertada dos veces. El primero usando la IMGetiqueta y el segundo en línea. Puede ver que los estilos se aplican a ambas versiones, pero el que se inserta con la etiqueta de imagen solo responde a transform: rotate(45deg);El color de relleno y el color del trazo son estilos utilizados solo por la imagen en línea SVG.
La desventaja de usar imágenes SVG en línea es que el código es feo. Dependiendo de cómo esté escribiendo su código y sirviendo sus páginas, hay formas de evitarlo. Hablaré sobre esto en una publicación futura.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas